Add dark theme and UI theme selector

browser/main/index.js

@@ -7,11 +7,25 @@ require('../styles/main/index.styl')
 import { openModal } from 'browser/lib/modal'
 import OSSAnnounceModal from './modal/OSSAnnounceModal'
 import activityRecord from 'browser/lib/activityRecord'
+import fetchConfig from '../lib/fetchConfig'
 const electron = require('electron')
 const ipc = electron.ipcRenderer
 const path = require('path')
 const remote = electron.remote
 
+let config = fetchConfig()
+applyConfig(config)
+
+ipc.on('config-apply', function (e, newConfig) {
+  config = newConfig
+  applyConfig(config)
+})
+
+function applyConfig(config) {
+  let body = document.body
+  body.setAttribute('data-theme', config['theme-ui'])
+}
+
 if (process.env.NODE_ENV !== 'production') {
   window.addEventListener('keydown', function (e) {
     if (e.keyCode === 73 && e.metaKey && e.altKey) {

browser/main/modal/Preference/AppSettingTab.js

@@ -182,6 +182,13 @@ export default class AppSettingTab extends React.Component {
             : null
           }
           <div className='sectionTitle'>Theme</div>
+          <div className='sectionSelect'>
+            <label>UI Theme</label>
+            <select valueLink={this.linkState('config.theme-ui')}>
+              <option value='light'>Light</option>
+              <option value='dark'>Dark</option>
+            </select>
+          </div>
           <div className='sectionSelect'>
             <label>Syntax Theme</label>
             <select valueLink={this.linkState('config.theme-syntax')}>