Add light theme

app/src/components/Sidebar/History.tsx

@@ -14,6 +14,7 @@ interface Props {
   onClick?: (index: number, element: EventTarget) => void
   classes: any
   contentTypeIndicator?: JSX.Element
+  theme: Theme
 }
 
 interface State {
@@ -30,7 +31,7 @@ class MessageHistory extends React.Component<Props, State> {
 
   public renderHistory() {
     const style = (element: HistoryItem) => ({
-      backgroundColor: element.selected ? 'rgba(120, 120, 120, 0.6)' : 'rgba(80, 80, 80, 0.6)',
+      backgroundColor: element.selected ? this.props.theme.palette.action.selected : this.props.theme.palette.action.hover,
       margin: '8px',
       padding: '8px 8px 0 8px',
       cursor: this.props.onClick ? 'pointer' : 'inherit',
@@ -53,7 +54,7 @@ class MessageHistory extends React.Component<Props, State> {
     const visible = this.props.items.length > 0 && this.state.collapsed
 
     return (
-      <div style={{ backgroundColor: 'rgba(60, 60, 60, 0.6)', marginTop: '16px' }}>
+      <div className={this.props.classes.main}>
         <Typography
           component={'span'}
           onClick={this.toggle}
@@ -93,7 +94,11 @@ class MessageHistory extends React.Component<Props, State> {
 }
 
 const styles = (theme: Theme) => ({
+  main: {
+    backgroundColor: 'rgba(170, 170, 170, 0.2)',
+    marginTop: '16px',
+  },
   badge: { right:'-25px' },
 })
 
-export default withStyles(styles)(MessageHistory)
+export default withStyles(styles, { withTheme: true })(MessageHistory)

app/src/components/Sidebar/Publish/Publish.tsx

@@ -3,6 +3,7 @@ import 'brace/mode/json'
 import 'brace/mode/text'
 import 'brace/mode/xml'
 import 'brace/theme/monokai'
+import 'brace/theme/dawn'
 
 import * as React from 'react'
 import * as q from '../../../../../backend/src/Model'
@@ -20,6 +21,8 @@ import {
   MenuItem,
   Tooltip,
   Fab,
+  Theme,
+  withTheme,
 } from '@material-ui/core'
 
 // tslint:disable-next-line
@@ -45,6 +48,7 @@ interface Props {
   retain: boolean
   editorMode: string
   qos: 0 | 1 | 2
+  theme: Theme
 }
 
 interface State {
@@ -310,7 +314,7 @@ class Publish extends React.Component<Props, State> {
     return (
       <AceEditor
         mode={this.props.editorMode}
-        theme="monokai"
+        theme={this.props.theme.palette.type === 'dark' ? 'monokai' : 'dawn'}
         name="UNIQUE_ID_OF_DIV"
         width="100%"
         height="200px"
@@ -341,4 +345,4 @@ const mapStateToProps = (state: AppState) => {
   }
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(Publish)
+export default withTheme(connect(mapStateToProps, mapDispatchToProps)(Publish))

app/src/components/Sidebar/ValueRenderer/ValueRenderer.tsx

@@ -2,10 +2,10 @@ import * as q from '../../../../../backend/src/Model'
 import * as React from 'react'
 import CodeDiff from '../../CodeDiff'
 import { AppState } from '../../../reducers'
+import { Base64Message } from '../../../../../backend/src/Model/Base64Message'
 import { connect } from 'react-redux'
 import { default as ReactResizeDetector } from 'react-resize-detector'
 import { ValueRendererDisplayMode } from '../../../reducers/Settings'
-import { Base64Message } from '../../../../../backend/src/Model/Base64Message';
 
 interface Props {
   message: q.Message
@@ -42,7 +42,6 @@ class ValueRenderer extends React.Component<Props, State> {
     if (renderMode === 'raw') {
       compareMessage = message
     }
-
     if (!message.value) {
       return null
     }
@@ -69,7 +68,7 @@ class ValueRenderer extends React.Component<Props, State> {
       const compare = this.messageToPrettyJson(compareStr) || compareStr
       const language = current && compare ? 'json' : undefined
 
-      return this.renderDiff(str, compareStr, language)
+      return this.renderDiff(current, compare, language)
     }
   }