Add syntax theme selector

browser/components/CodeEditor.js

@@ -96,7 +96,8 @@ export default class CodeEditor extends React.Component {
       fontSize: config['editor-font-size'],
       fontFamily: config['editor-font-family'],
       indentType: config['editor-indent-type'],
-      indentSize: config['editor-indent-size']
+      indentSize: config['editor-indent-size'],
+      themeSyntax: config['theme-syntax']
     }
 
     this.silentChange = false
@@ -114,7 +115,7 @@ export default class CodeEditor extends React.Component {
     var editor = this.editor = ace.edit(el)
     editor.$blockScrolling = Infinity
     editor.renderer.setShowGutter(true)
-    editor.setTheme('ace/theme/xcode')
+    editor.setTheme('ace/theme/' + this.state.themeSyntax)
     editor.moveCursorTo(0, 0)
     editor.setReadOnly(!!this.props.readOnly)
     editor.setFontSize(this.state.fontSize)
@@ -202,9 +203,13 @@ export default class CodeEditor extends React.Component {
       fontSize: config['editor-font-size'],
       fontFamily: config['editor-font-family'],
       indentType: config['editor-indent-type'],
-      indentSize: config['editor-indent-size']
+      indentSize: config['editor-indent-size'],
+      themeSyntax: config['theme-syntax']
     }, function () {
-      var session = this.editor.getSession()
+      var editor = this.editor
+      editor.setTheme('ace/theme/' + this.state.themeSyntax)
+
+      var session = editor.getSession()
       session.setUseSoftTabs(this.state.indentType === 'space')
       session.setTabSize(!isNaN(this.state.indentSize) ? parseInt(this.state.indentSize, 10) : 4)
     })

browser/lib/fetchConfig.js

@@ -13,7 +13,8 @@ const defaultConfig = {
   'preview-font-size': '14',
   'preview-font-family': 'Lato',
   'switch-preview': 'blur',
-  'disable-direct-write': false
+  'disable-direct-write': false,
+  'theme-syntax': 'xcode'
 }
 
 export default function fetchConfig () {

browser/main/modal/Preference/AppSettingTab.js

@@ -6,6 +6,7 @@ import fetchConfig from 'browser/lib/fetchConfig'
 const electron = require('electron')
 const ipc = electron.ipcRenderer
 const remote = electron.remote
+const ace = window.ace
 
 const OSX = global.process.platform === 'darwin'
 
@@ -114,6 +115,7 @@ export default class AppSettingTab extends React.Component {
           {userAlert.message}
         </p>
       ) : null
+    let aceThemeList = ace.require("ace/ext/themelist")
 
     return (
       <div className='AppSettingTab content'>
@@ -129,7 +131,7 @@ export default class AppSettingTab extends React.Component {
           </div>
         </div>
         <div className='section'>
-          <div className='sectionTitle'>Text</div>
+          <div className='sectionTitle'>Editor</div>
           <div className='sectionInput'>
             <label>Editor Font Size</label>
             <input valueLink={this.linkState('config.editor-font-size')} onKeyDown={e => this.handleConfigKeyDown(e)} type='text'/>
@@ -154,6 +156,7 @@ export default class AppSettingTab extends React.Component {
               </select>
             </div>
           </div>
+          <div className='sectionTitle'>Preview</div>
           <div className='sectionInput'>
             <label>Preview Font Size</label>
             <input valueLink={this.linkState('config.preview-font-size')} onKeyDown={e => this.handleConfigKeyDown(e)} type='text'/>
@@ -178,7 +181,17 @@ export default class AppSettingTab extends React.Component {
             )
             : null
           }
-
+          <div className='sectionTitle'>Theme</div>
+          <div className='sectionSelect'>
+            <label>Syntax Theme</label>
+            <select valueLink={this.linkState('config.theme-syntax')}>
+              {
+                aceThemeList.themes.map(function(v, i){
+                  return (<option value={v.name} key={v.name}>{v.caption}</option>)
+                })
+              }
+            </select>
+          </div>
           <div className='sectionConfirm'>
             <button onClick={e => this.handleConfigSaveButtonClick(e)}>Save</button>
           </div>

browser/styles/main/modal/Preferences.styl

@@ -8,7 +8,7 @@ iptFocusBorderColor = #369DCD
   border-radius 5px
   overflow hidden
   width 720px
-  height 450px
+  height 600px
   &>.header
     absolute top left right
     height 50px

lib/config.js

@@ -12,7 +12,8 @@ const defaultConfig = {
   'preview-font-size': '14',
   'preview-font-family': 'Lato',
   'switch-preview': 'blur',
-  'disable-direct-write': false
+  'disable-direct-write': false,
+  'theme-syntax': 'xcode'
 }
 const configFile = 'config.json'
 
@@ -76,4 +77,3 @@ app.on('ready', function () {
     applyConfig()
   })
 })
-

lib/main.html

@@ -56,6 +56,7 @@
   <div id="content"></div>
 
   <script src="../submodules/ace/src-min/ace.js"></script>
+  <script src="../submodules/ace/src-min/ext-themelist.js"></script>
   <script src="../resources/katex.min.js"></script>
   <script type='text/javascript'>
     const electron = require('electron')