Merge pull request #20 from dojineko/dark-theme

Add dark theme

.gitignore

@@ -1,4 +1,7 @@
+.DS_Store
 .env
+Desktop.ini
+Thumbs.db
 node_modules/*
 !node_modules/boost
 /dist

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/components/MarkdownPreview.js

@@ -20,6 +20,7 @@ const sanitizeOpts = {
   allowedClasses: {
     'a': ['lineAnchor'],
     'div': ['math'],
+    'pre': ['hljs'],
     'span': ['math', 'hljs-*'],
     'code': ['language-*']
   },

browser/finder/index.js

@@ -9,11 +9,27 @@ import FinderDetail from './FinderDetail'
 import actions, { selectArticle, searchArticle } from './actions'
 import _ from 'lodash'
 import dataStore from 'browser/lib/dataStore'
-
+import fetchConfig from '../lib/fetchConfig'
 const electron = require('electron')
 const { clipboard, ipcRenderer, remote } = electron
 const path = require('path')
 
+let config = fetchConfig()
+applyConfig(config)
+
+ipcRenderer.on('config-apply', function (e, newConfig) {
+  config = newConfig
+  applyConfig(config)
+})
+
+function applyConfig(){
+  let body = document.body
+  body.setAttribute('data-theme', config['theme-ui'])
+
+  let hljsCss = document.getElementById('hljs-css')
+  hljsCss.setAttribute('href', '../node_modules/highlight.js/styles/' + config['theme-code'] + '.css')
+}
+
 if (process.env.NODE_ENV !== 'production') {
   window.addEventListener('keydown', function (e) {
     if (e.keyCode === 73 && e.metaKey && e.altKey) {

browser/lib/fetchConfig.js

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

browser/lib/hljsThemes.js

@@ -0,0 +1,78 @@
+const hljsThemeList =[
+  {caption: "Default", name: "default"},
+  {caption: "Agate", name: "agate"},
+  {caption: "Androidstudio", name: "androidstudio"},
+  {caption: "Arduino Light", name: "arduino-light"},
+  {caption: "Arta", name: "arta"},
+  {caption: "Ascetic", name: "ascetic"},
+  {caption: "Atelier Cave Dark", name: "atelier-cave-dark"},
+  {caption: "Atelier Cave Light", name: "atelier-cave-light"},
+  {caption: "Atelier Dune Dark", name: "atelier-dune-dark"},
+  {caption: "Atelier Dune Light", name: "atelier-dune-light"},
+  {caption: "Atelier Estuary Dark", name: "atelier-estuary-dark"},
+  {caption: "Atelier Estuary Light", name: "atelier-estuary-light"},
+  {caption: "Atelier Forest Dark", name: "atelier-forest-dark"},
+  {caption: "Atelier Forest Light", name: "atelier-forest-light"},
+  {caption: "Atelier Heath Dark", name: "atelier-heath-dark"},
+  {caption: "Atelier Heath Light", name: "atelier-heath-light"},
+  {caption: "Atelier Lakeside Dark", name: "atelier-lakeside-dark"},
+  {caption: "Atelier Lakeside Light", name: "atelier-lakeside-light"},
+  {caption: "Atelier Plateau Dark", name: "atelier-plateau-dark"},
+  {caption: "Atelier Plateau Light", name: "atelier-plateau-light"},
+  {caption: "Atelier Savanna Dark", name: "atelier-savanna-dark"},
+  {caption: "Atelier Savanna Light", name: "atelier-savanna-light"},
+  {caption: "Atelier Seaside Dark", name: "atelier-seaside-dark"},
+  {caption: "Atelier Seaside Light", name: "atelier-seaside-light"},
+  {caption: "Atelier Sulphurpool Dark", name: "atelier-sulphurpool-dark"},
+  {caption: "Atelier Sulphurpool Light", name: "atelier-sulphurpool-light"},
+  {caption: "Brown Paper", name: "brown-paper"},
+  {caption: "Codepen Embed", name: "codepen-embed"},
+  {caption: "Color Brewer", name: "color-brewer"},
+  {caption: "Dark", name: "dark"},
+  {caption: "Darkula", name: "darkula"},
+  {caption: "Docco", name: "docco"},
+  {caption: "Dracula", name: "dracula"},
+  {caption: "Far", name: "far"},
+  {caption: "Foundation", name: "foundation"},
+  {caption: "Github Gist", name: "github-gist"},
+  {caption: "Github", name: "github"},
+  {caption: "Googlecode", name: "googlecode"},
+  {caption: "Grayscale", name: "grayscale"},
+  {caption: "Gruvbox Dark", name: "gruvbox.dark"},
+  {caption: "Gruvbox Light", name: "gruvbox.light"},
+  {caption: "Hopscotch", name: "hopscotch"},
+  {caption: "Hybrid", name: "hybrid"},
+  {caption: "Idea", name: "idea"},
+  {caption: "Ir Black", name: "ir-black"},
+  {caption: "Kimbie Dark", name: "kimbie.dark"},
+  {caption: "Kimbie Light", name: "kimbie.light"},
+  {caption: "Magula", name: "magula"},
+  {caption: "Mono Blue", name: "mono-blue"},
+  {caption: "Monokai Sublime", name: "monokai-sublime"},
+  {caption: "Monokai", name: "monokai"},
+  {caption: "Obsidian", name: "obsidian"},
+  {caption: "Paraiso Dark", name: "paraiso-dark"},
+  {caption: "Paraiso Light", name: "paraiso-light"},
+  {caption: "Pojoaque", name: "pojoaque"},
+  {caption: "Qtcreator Dark", name: "qtcreator_dark"},
+  {caption: "Qtcreator Light", name: "qtcreator_light"},
+  {caption: "Railscasts", name: "railscasts"},
+  {caption: "Rainbow", name: "rainbow"},
+  {caption: "School Book", name: "school-book"},
+  {caption: "Solarized Dark", name: "solarized-dark"},
+  {caption: "Solarized Light", name: "solarized-light"},
+  {caption: "Sunburst", name: "sunburst"},
+  {caption: "Tomorrow Night Blue", name: "tomorrow-night-blue"},
+  {caption: "Tomorrow Night Bright", name: "tomorrow-night-bright"},
+  {caption: "Tomorrow Night Eighties", name: "tomorrow-night-eighties"},
+  {caption: "Tomorrow Night", name: "tomorrow-night"},
+  {caption: "Tomorrow", name: "tomorrow"},
+  {caption: "Vs", name: "vs"},
+  {caption: "Xcode", name: "xcode"},
+  {caption: "Xt 256", name: "xt256"},
+  {caption: "Zenburn", name: "zenburn"}
+]
+
+export default function hljsTheme() {
+  return hljsThemeList
+}

browser/lib/markdown.js

@@ -11,10 +11,14 @@ var md = markdownit({
   highlight: function (str, lang) {
     if (lang && hljs.getLanguage(lang)) {
       try {
-        return hljs.highlight(lang, str).value
+        return '<pre class="hljs"><code>' +
+               hljs.highlight(lang, str).value +
+               '</code></pre>';
       } catch (e) {}
     }
-    return str.replace(/\&/g, '&amp;').replace(/\</g, '&lt;').replace(/\>/g, '&gt;').replace(/\"/g, '&quot;')
+    return '<pre class="hljs"><code>' +
+           str.replace(/\&/g, '&amp;').replace(/\</g, '&lt;').replace(/\>/g, '&gt;').replace(/\"/g, '&quot;') +
+           '</code></pre>';
   }
 })
 md.use(emoji, {

browser/main/index.js

@@ -7,11 +7,28 @@ 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'])
+
+  let hljsCss = document.getElementById('hljs-css')
+  hljsCss.setAttribute('href', '../node_modules/highlight.js/styles/' + config['theme-code'] + '.css')
+}
+
 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

@@ -2,10 +2,12 @@ import React, { PropTypes } from 'react'
 import linkState from 'browser/lib/linkState'
 import { updateUser } from '../../actions'
 import fetchConfig from 'browser/lib/fetchConfig'
+import hljsTheme from 'browser/lib/hljsThemes'
 
 const electron = require('electron')
 const ipc = electron.ipcRenderer
 const remote = electron.remote
+const ace = window.ace
 
 const OSX = global.process.platform === 'darwin'
 
@@ -114,11 +116,13 @@ export default class AppSettingTab extends React.Component {
           {userAlert.message}
         </p>
       ) : null
+    let aceThemeList = ace.require("ace/ext/themelist")
+    let hljsThemeList = hljsTheme()
 
     return (
       <div className='AppSettingTab content'>
         <div className='section'>
-          <div className='sectionTitle'>User's info</div>
+          <div className='sectionTitle'>User&apos;s info</div>
           <div className='sectionInput'>
             <label>User name</label>
             <input valueLink={this.linkState('user.name')} type='text'/>
@@ -129,7 +133,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 +158,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 +183,34 @@ 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>Code Theme</label>
+            <select valueLink={this.linkState('config.theme-code')}>
+              {
+                hljsThemeList.map(function(v, i){
+                  return (<option value={v.name} key={v.name}>{v.caption}</option>)
+                })
+              }
+            </select>
+          </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/finder/index.styl

@@ -3,6 +3,7 @@
 @import '../mixins/*'
 global-reset()
 @import '../shared/*'
+@import './theme/*'
 
 iptBgColor = #E6E6E6
 iptFocusBorderColor = #369DCD

browser/styles/main/ArticleDetail.styl

@@ -25,7 +25,6 @@ infoButton()
   padding 10px
   background-color #E6E6E6
   border-top 1px solid borderColor
-  border-left 1px solid borderColor
   &.empty
     .ArticleDetail-empty-box
       line-height 72px

browser/styles/main/ArticleNavigator.styl

@@ -11,6 +11,7 @@ articleCount = #999
   .userInfo
     height 60px
     display block
+    box-sizing content-box
     border-bottom 1px solid borderColor
     .userProfileName
       color brandColor

browser/styles/main/index.styl

@@ -8,6 +8,7 @@ global-reset()
 @import './ArticleList'
 @import './ArticleDetail'
 @import './modal/*'
+@import './theme/*'
 
 DEFAULT_FONTS = 'Lato', helvetica, arial, sans-serif
 

browser/styles/main/modal/CreateNewFolder.styl

@@ -72,7 +72,7 @@ iptFocusBorderColor = #369DCD
   .confirmBtn
     display block
     position absolute
-    left 180px
+    left 205px
     bottom 44px
     width 240px
     font-size 24px

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

browser/styles/mixins/marked.styl

@@ -116,9 +116,7 @@ marked()
     border solid 1px alpha(borderColor, 0.3)
     border-radius 4px
     font-size 0.9em
-    color black
     text-decoration none
-    background-color #F6F6F6
     margin-right 2px
   *:not(a.lineAnchor) + code
     margin-left 2px
@@ -128,14 +126,12 @@ marked()
     border-radius 5px
     overflow-x auto
     margin 0 0 15px
-    background-color #F6F6F6
     line-height 1.35em
     &>code
       margin 0
       padding 0
       border none
       border-radius 0
-      color black
   table
     width 100%
     margin 15px 0 25px

browser/styles/theme/dark.styl

@@ -0,0 +1,391 @@
+@import '../vars'
+
+themeDarkBackground = lighten(#212327, 5%)
+themeDarkModal = lighten(themeDarkBackground, 0%)
+themeDarkList = darken(themeDarkBackground, 25%)
+themeDarkPreview = #181818
+themeDarkSidebar = darken(themeDarkBackground, 45%)
+themeDarkText = #DDDDDD
+themeDarkBorder = lighten(themeDarkBackground, 20%)
+themeDarkTopicColor = #369dcd
+themeDarkTooltip = rgba(0, 0, 0, 0.7)
+themeDarkFocusText = #FFFFFF
+themeDarkFocusButton = lighten(themeDarkTopicColor, 30%)
+themeDarkBoxShadow = alpha(lighten(themeDarkTopicColor, 10%), 0.4);
+
+body[data-theme="dark"]
+  .Main
+    .ArticleNavigator .userInfo .settingBtn .tooltip,
+    .ArticleNavigator .ArticleNavigator-folders .ArticleNavigator-folders-header .addBtn .tooltip,
+    .ArticleTopBar>.ArticleTopBar-left>.ArticleTopBar-left-search .tooltip,
+    .ArticleTopBar>.ArticleTopBar-left .ArticleTopBar-left-control button.ArticleTopBar-left-control-new-post-button .tooltip
+    .ArticleTopBar>.ArticleTopBar-right>button .tooltip,
+    .ArticleTopBar>.ArticleTopBar-right>.ArticleTopBar-right-links-button-dropdown,
+    .ArticleDetail .ArticleDetail-info .ArticleDetail-info-control>button .tooltip,
+    .ArticleDetail .ArticleDetail-info .ArticleDetail-info-control .ShareButton-open-button .tooltip {
+      background-color themeDarkTooltip
+    }
+
+    .ArticleNavigator
+      border-color lighten(themeDarkBorder, 10%)
+      background-color themeDarkSidebar
+
+      .userInfo
+        border-color themeDarkBorder
+
+        .userName
+          color themeDarkText
+
+      .ArticleNavigator-folders
+        border-color lighten(themeDarkBorder, 10%)
+        background-color themeDarkSidebar
+
+        .ArticleNavigator-folders-header
+          border-color themeDarkBorder
+
+          .title
+            color themeDarkText
+
+        .folderList,
+        .folderList>button
+          color themeDarkText
+
+        .folderList>button
+          transition 0.1s
+
+          &:hover
+            background-color lighten(themeDarkSidebar, 10%)
+
+          &.active,
+          $:active
+            background-color darken(brandColor, 15%)
+
+      .userInfo .settingBtn,
+      .ArticleNavigator-folders .ArticleNavigator-folders-header .addBtn
+        transition 0.1s
+        color themeDarkText
+        border none
+        background-color lighten(themeDarkBackground, 10%)
+
+      .userInfo .settingBtn:hover,
+      .ArticleNavigator-folders .ArticleNavigator-folders-header .addBtn:hover
+        background-color themeDarkTopicColor
+
+      .userInfo .settingBtn:focus,
+      .ArticleNavigator-folders .ArticleNavigator-folders-header .addBtn:focus
+        background-color darken(themeDarkTopicColor, 20%)
+
+    .ArticleTopBar
+      color themeDarkText
+      background-color themeDarkBackground
+
+      .ArticleTopBar-left
+        .ArticleTopBar-left-search input
+          color themeDarkText
+          background-color lighten(themeDarkBackground, 10%)
+
+        .ArticleTopBar-left-control button.ArticleTopBar-left-control-new-post-button
+          color themeDarkText
+          background-color lighten(themeDarkBackground, 10%)
+
+          &:hover
+            color themeDarkText
+            background-color themeDarkTopicColor
+
+          &:focus
+            color themeDarkText
+            background-color darken(themeDarkTopicColor, 20%)
+
+      .ArticleTopBar-right
+        &>button
+          color themeDarkText
+          border none
+          background-color lighten(themeDarkBackground, 10%)
+
+          &:hover
+            color themeDarkText
+            background-color themeDarkTopicColor
+
+          &:focus
+            color themeDarkText
+            background-color darken(themeDarkTopicColor, 20%)
+
+    .ArticleList
+      color themeDarkText
+      border-color themeDarkBorder
+      background-color themeDarkList
+
+      .ArticleList-item
+        color themeDarkText
+        background-color themeDarkList
+
+        &:hover
+          background-color lighten(themeDarkList, 5%)
+
+      .divider
+        border-color themeDarkBorder
+
+    .ArticleDetail
+      color themeDarkText
+      border-color themeDarkBorder
+      background-color themeDarkBackground
+
+      .ArticleDetail-info
+        .ArticleDetail-info-folder
+          color themeDarkText
+          background-color lighten(themeDarkBackground, 10%)
+
+        .ArticleDetail-info-row2 .TagSelect .TagSelect-tags
+          border-color themeDarkBorder
+          background-color themeDarkBackground
+
+          input
+            color themeDarkText
+
+        .ArticleDetail-info-control
+          &>button,
+          & .ShareButton-open-button
+            transition 0.1s
+            color themeDarkText
+            border none
+            background-color lighten(themeDarkBackground, 10%)
+
+          &>button:hover,
+          & .ShareButton-open-button:hover
+            background-color themeDarkTopicColor
+
+          &>button:focus,
+          & .ShareButton-open-button:focus
+            background-color darken(themeDarkTopicColor, 20%)
+
+          & .ShareButton-dropdown
+            color themeDarkText
+            box-shadow 0px 0px 10px 1px themeDarkBoxShadow;
+            border 1px solid themeDarkBorder;
+            background-color themeDarkBackground
+
+          & .ShareButton-dropdown>button
+            color themeDarkText
+
+            &:hover
+              background-color darken(themeDarkTopicColor, 20%)
+
+      .ArticleDetail-panel
+        border-color themeDarkBackground
+
+        .ArticleDetail-panel-header,
+        .ArticleDetail-panel-header .ArticleDetail-panel-header-title input
+          color themeDarkText
+          border-color themeDarkBorder
+          background-color themeDarkPreview
+
+        .ArticleEditor
+          .CodeEditor
+            border-color themeDarkBorder
+
+        &>.ArticleDetail-panel-header .ArticleDetail-panel-header-mode
+          transition 0.1s
+          color themeDarkText
+          background-color lighten(themeDarkBackground, 10%)
+
+          input
+            color themeDarkText
+
+          &.idle
+            border-color themeDarkBorder
+            background-color themeDarkPreview
+
+          &.idle:hover
+            background-color themeDarkTopicColor
+
+          &.edit .ModeSelect-options
+            color themeDarkText
+            border-color themeDarkBackground
+            background-color themeDarkBackground
+
+            .ModeSelect-options-item
+              &:hover
+                color lighten(themeDarkText, 100%)
+                background-color darken(themeDarkTopicColor, 20%)
+
+  .ModalBase
+    .modal
+      color themeDarkText
+      background-color themeDarkModal
+      box-shadow 0px 0px 10px 1px themeDarkBoxShadow;
+
+      input
+        color themeDarkText
+        border-color lighten(themeDarkBackground, 10%)
+        background-color lighten(themeDarkBackground, 10%)
+
+        &:hover
+          border-color themeDarkBorder
+
+        &:focus
+          border-color themeDarkTopicColor
+
+      button
+        &:hover
+          background-color lighten(themeDarkBackground, 10%)
+
+    .CreateNewFolder.modal
+      .closeBtn
+        transition 0.1s
+        border-radius 24px
+        color themeDarkText
+
+        &:hover
+          background-color darken(#BF360C, 10%)
+
+      .confirmBtn
+        background-color darken(brandColor, 10%)
+
+        &:hover
+          background-color brandColor
+
+    .Preferences.modal
+      .sectionInput input,
+      .sectionSelect select
+      .sectionMultiSelect .sectionMultiSelect-input select
+        color themeDarkText
+        border-color lighten(themeDarkBackground, 10%)
+        background-color lighten(themeDarkBackground, 10%)
+
+        &:hover
+          border-color themeDarkBorder
+
+        &:focus
+          border-color themeDarkTopicColor
+
+      .header
+        border-color themeDarkBorder
+        background-color darken(themeDarkModal, 40%)
+
+      .nav
+        border-color themeDarkBorder
+        background-color darken(themeDarkModal, 20%)
+
+        &>button
+          &:hover
+            color themeDarkFocusText
+            background-color lighten(themeDarkModal, 10%)
+
+          &.active,
+          &:active
+            background-color darken(brandColor, 15%)
+
+      .section
+        border-color themeDarkBorder
+
+      &>.content
+        &.AppSettingTab
+          .description
+            code
+              color themeDarkText
+              border-color darken(themeDarkBorder, 10%)
+              background-color lighten(themeDarkPreview, 5%)
+
+        &.FolderSettingTab
+          .folderTable
+            &>div
+              border-color themeDarkBorder
+
+              &:last-child
+                border-color transparent
+
+            &>div.FolderRow
+              .sortBtns button
+                transition 0.1s
+                color themeDarkText
+
+                &:hover
+                  color themeDarkFocusButton
+
+              .folderColor
+                &>button,
+                .options
+                  color themeDarkText
+                  border-color themeDarkBorder
+
+                &>button
+                  border-color lighten(themeDarkBackground, 10%)
+                  background-color lighten(themeDarkBackground, 10%)
+
+                  &:hover
+                    border-color themeDarkBorder
+
+                  &:focus
+                    border-color themeDarkTopicColor
+
+                .options
+                  background-color themeDarkBackground
+
+            &>div.FolderRow .folderName input,
+            &>div.newFolder .folderName input
+                color themeDarkText
+                border-color lighten(themeDarkBackground, 10%)
+                background-color lighten(themeDarkBackground, 10%)
+
+                &:hover
+                  border-color themeDarkBorder
+
+                &:focus
+                  border-color themeDarkTopicColor
+
+            .folderControl
+              button
+                transition 0.1s
+                color themeDarkText
+
+                &:hover
+                  color themeDarkFocusButton
+
+  .Finder
+    .FinderInput
+      color themeDarkText
+      border-color themeDarkBorder
+      background-color themeDarkBackground
+
+      input
+        color themeDarkText
+        border-color lighten(themeDarkBackground, 10%)
+        background-color lighten(themeDarkBackground, 10%)
+
+        &:focus
+          border-color themeDarkTopicColor
+
+    .FinderList
+      color themeDarkText
+      border-color themeDarkBorder
+      background-color themeDarkList
+
+      .divider
+        border-color themeDarkBorder
+
+    .FinderDetail
+      color themeDarkText
+      border-color themeDarkBorder
+      background-color themeDarkPreview
+      box-shadow 0px 0px 10px 0 darken(themeDarkBorder, 20%);
+
+      .header
+        border-color themeDarkBorder
+
+        .right
+          .clipboardBtn
+            transition 0.1s
+
+            &:hover
+              color themeDarkFocusButton
+
+            .tooltip
+              background-color themeDarkTooltip
+
+  // Markdown Preview
+  .Finder .FinderDetail .content,
+  .ArticleDetail .ArticleDetail-panel .ArticleEditor
+    .MarkdownPreview
+      color themeDarkText
+      border-color themeDarkBorder
+      background-color themeDarkPreview

lib/config.js

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

lib/finder.html

@@ -9,7 +9,7 @@
 
   <link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.min.css" media="screen" charset="utf-8">
   <link rel="stylesheet" href="../node_modules/devicon/devicon.min.css">
-  <link rel="stylesheet" href="../node_modules/highlight.js/styles/xcode.css">
+  <link rel="stylesheet" href="../node_modules/highlight.js/styles/xcode.css" id="hljs-css">
   <link rel="shortcut icon" href="favicon.ico">
   <link rel="stylesheet" href="../resources/katex.min.css">
 

lib/main.html

@@ -6,7 +6,7 @@
 
   <link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.min.css" media="screen" charset="utf-8">
   <link rel="stylesheet" href="../node_modules/devicon/devicon.min.css">
-  <link rel="stylesheet" href="../node_modules/highlight.js/styles/xcode.css">
+  <link rel="stylesheet" href="../node_modules/highlight.js/styles/xcode.css" id="hljs-css">
   <link rel="shortcut icon" href="../resources/favicon.ico">
   <title>Boostnote</title>
   <link rel="stylesheet" href="../resources/katex.min.css">
@@ -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')

package.json

@@ -36,11 +36,11 @@
     "electron-gh-releases": "^2.0.2",
     "font-awesome": "^4.3.0",
     "fs-jetpack": "^0.7.0",
-    "highlight.js": "^8.9.1",
+    "highlight.js": "^9.3.0",
     "lodash": "^3.10.1",
-    "markdown-it": "^4.4.0",
+    "markdown-it": "^6.0.1",
     "markdown-it-checkbox": "^1.1.0",
-    "markdown-it-emoji": "^1.1.0",
+    "markdown-it-emoji": "^1.1.1",
     "markdown-it-math": "^3.0.2",
     "md5": "^2.0.0",
     "moment": "^2.10.3",