Merge v0.5.11

Conflicts: browser/main/index.js package.json
2025-12-13 09:46:22 +00:00 · 2016-04-29 12:25:55 +09:00
parent ac7e08ae2c f6208c1324
commit b9fd3b8b7d
33 changed files with 723 additions and 64 deletions
--- a/browser/components/CodeEditor.js
+++ b/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)
    })
--- a/browser/components/MarkdownPreview.js
+++ b/browser/components/MarkdownPreview.js
@@ -20,6 +20,7 @@ const sanitizeOpts = {
  allowedClasses: {
    'a': ['lineAnchor'],
    'div': ['math'],
+    'pre': ['hljs'],
    'span': ['math', 'hljs-*'],
    'code': ['language-*']
  },
--- a/browser/finder/index.js
+++ b/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) {
--- a/browser/lib/fetchConfig.js
+++ b/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 () {
--- a/browser/lib/hljsThemes.js
+++ b/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
+}
--- a/browser/lib/markdown.js
+++ b/browser/lib/markdown.js
@@ -1,6 +1,6 @@
 import markdownit from 'markdown-it'
 import emoji from 'markdown-it-emoji'
-import math from 'markdown-it-math'
+import math from '@rokt33r/markdown-it-math'
 import hljs from 'highlight.js'

 var md = markdownit({
@@ -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, {
--- a/browser/main/index.js
+++ b/browser/main/index.js
@@ -7,10 +7,37 @@ require('!!style!css!stylus?sourceMap!../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) {
+      remote.getCurrentWindow().toggleDevTools()
+    }
+  })
+}
+
 activityRecord.init()
 window.addEventListener('online', function () {
  ipc.send('check-update', 'check-update')
--- a/browser/main/modal/Preference/AppSettingTab.js
+++ b/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 block 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>Editor 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>
--- a/browser/main/modal/Preference/FolderRow.js
+++ b/browser/main/modal/Preference/FolderRow.js
@@ -63,7 +63,7 @@ export default class FolderRow extends React.Component {
  }

  handleColorButtonClick (index) {
-    return e => {
+    return (e) => {
      this.setState({
        color: index,
        isColorEditing: false
@@ -116,7 +116,7 @@ export default class FolderRow extends React.Component {
            ? 'active'
            : null
          return (
-            <button onClick={e => this.handleColorButtonClick(index)(e)} className={className} key={index}>
+            <button onClick={(e) => this.handleColorButtonClick(index)(e)} className={className} key={index}>
              <FolderMark color={index}/>
            </button>
          )
@@ -125,7 +125,7 @@ export default class FolderRow extends React.Component {
        return (
          <div className='FolderRow edit'>
            <div className='folderColor'>
-              <button onClick={e => this.handleColorSelectClick(e)} className='select'>
+              <button onClick={(e) => this.handleColorSelectClick(e)} className='select'>
                <FolderMark color={this.state.color}/>
              </button>
              {this.state.isColorEditing
@@ -139,11 +139,11 @@ export default class FolderRow extends React.Component {
              }
            </div>
            <div className='folderName'>
-              <input onKeyDown={e => this.handleNameInputKeyDown(e)} valueLink={this.linkState('name')} type='text'/>
+              <input onKeyDown={(e) => this.handleNameInputKeyDown(e)} valueLink={this.linkState('name')} type='text'/>
            </div>
            <div className='folderControl'>
-              <button onClick={e => this.handleSaveButtonClick(e)} className='primary'>Save</button>
-              <button onClick={e => this.handleCancelButtonClick(e)}>Cancel</button>
+              <button onClick={(e) => this.handleSaveButtonClick(e)} className='primary'>Save</button>
+              <button onClick={(e) => this.handleCancelButtonClick(e)}>Cancel</button>
            </div>
          </div>
        )
@@ -152,8 +152,8 @@ export default class FolderRow extends React.Component {
          <div className='FolderRow delete'>
            <div className='folderDeleteLabel'>Are you sure to delete <strong>{folder.name}</strong> folder?</div>
            <div className='folderControl'>
-              <button onClick={e => this.handleDeleteConfirmButtonClick(e)} className='primary'>Sure</button>
-              <button onClick={e => this.handleCancelButtonClick(e)}>Cancel</button>
+              <button onClick={(e) => this.handleDeleteConfirmButtonClick(e)} className='primary'>Sure</button>
+              <button onClick={(e) => this.handleCancelButtonClick(e)}>Cancel</button>
            </div>
          </div>
        )
@@ -162,14 +162,14 @@ export default class FolderRow extends React.Component {
        return (
          <div className='FolderRow'>
            <div className='sortBtns'>
-              <button onClick={e => this.handleUpClick(e)}><i className='fa fa-sort-up fa-fw'/></button>
-              <button onClick={e => this.handleDownClick(e)}><i className='fa fa-sort-down fa-fw'/></button>
+              <button onClick={(e) => this.handleUpClick(e)}><i className='fa fa-sort-up fa-fw'/></button>
+              <button onClick={(e) => this.handleDownClick(e)}><i className='fa fa-sort-down fa-fw'/></button>
            </div>
            <div className='folderColor'><FolderMark color={folder.color}/></div>
            <div className='folderName'>{folder.name}</div>
            <div className='folderControl'>
-              <button onClick={e => this.handleEditButtonClick(e)}><i className='fa fa-fw fa-edit'/></button>
-              <button onClick={e => this.handleDeleteButtonClick(e)}><i className='fa fa-fw fa-close'/></button>
+              <button onClick={(e) => this.handleEditButtonClick(e)}><i className='fa fa-fw fa-edit'/></button>
+              <button onClick={(e) => this.handleDeleteButtonClick(e)}><i className='fa fa-fw fa-close'/></button>
            </div>
          </div>
        )
--- a/browser/main/modal/Preference/FolderSettingTab.js
+++ b/browser/main/modal/Preference/FolderSettingTab.js
@@ -75,10 +75,10 @@ export default class FolderSettingTab extends React.Component {
            {folderElements}
            <div className='newFolder'>
              <div className='folderName'>
-                <input onKeyDown={e => this.handleNewFolderNameKeyDown(e)} valueLink={this.linkState('name')} type='text' placeholder='New Folder'/>
+                <input onKeyDown={(e) => this.handleNewFolderNameKeyDown(e)} valueLink={this.linkState('name')} type='text' placeholder='New Folder'/>
              </div>
              <div className='folderControl'>
-                <button onClick={e => this.handleSaveButtonClick(e)} className='primary'>Add</button>
+                <button onClick={(e) => this.handleSaveButtonClick(e)} className='primary'>Add</button>
              </div>
            </div>
            {alertElement}
--- a/browser/main/modal/Preferences.js
+++ b/browser/main/modal/Preferences.js
@@ -8,7 +8,6 @@ import ContactTab from './Preference/ContactTab'
 import { closeModal } from 'browser/lib/modal'

 const APP = 'APP'
-const HELP = 'HELP'
 const FOLDER = 'FOLDER'
 const CONTACT = 'CONTACT'

@@ -64,8 +63,6 @@ class Preferences extends React.Component {
    let { user, folders, dispatch } = this.props

    switch (this.state.currentTab) {
-      case HELP:
-        return (<HelpTab/>)
      case FOLDER:
        return (
          <FolderSettingTab
--- a/browser/main/modal/Tutorial.js
+++ b/browser/main/modal/Tutorial.js
@@ -33,10 +33,10 @@ export default class Tutorial extends React.Component {

    return (
      <div className='Tutorial modal'>
-        <button onClick={e => this.handlePriorSlideClick()} className={'priorBtn' + (this.state.slideIndex === 0 ? ' hide' : '')}>
+        <button onClick={(e) => this.handlePriorSlideClick()} className={'priorBtn' + (this.state.slideIndex === 0 ? ' hide' : '')}>
          <i className='fa fa-fw fa-angle-left'/>
        </button>
-        <button onClick={e => this.handleNextSlideClick()} className={'nextBtn' + (this.state.slideIndex === 4 ? ' hide' : '')}>
+        <button onClick={(e) => this.handleNextSlideClick()} className={'nextBtn' + (this.state.slideIndex === 4 ? ' hide' : '')}>
          <i className='fa fa-fw fa-angle-right'/>
        </button>
        {content}
@@ -80,7 +80,7 @@ export default class Tutorial extends React.Component {
            Boost supports code syntax highlighting.<br/>
            There are more than 100 different type of language.
            <div className='code'>
-              <CodeEditor readOnly article={{content:code, mode: 'jsx'}}/>
+              <CodeEditor readOnly article={{content: code, mode: 'jsx'}}/>
            </div>
          </div>
        </div>)
@@ -101,7 +101,7 @@ export default class Tutorial extends React.Component {
        return (<div className='slide slide4'>
          <div className='title'>Are you ready?</div>
          <div className='content'>
-          <button onClick={e => this.startButtonClick(e)}>Start<br/>Boost</button>
+          <button onClick={(e) => this.startButtonClick(e)}>Start<br/>Boost</button>
          </div>
        </div>)
      default:
--- a/browser/main/reducer.js
+++ b/browser/main/reducer.js
@@ -76,7 +76,7 @@ function folders (state = initialFolders, action) {
        if (newFolder.name == null || newFolder.name.length === 0) throw new Error('Folder name is required')
        if (newFolder.name.match(/\//)) throw new Error('`/` is not available for folder name')

-        let conflictFolder = _.find(state, folder => folder.name.toLowerCase() === newFolder.name.toLowerCase())
+        let conflictFolder = _.find(state, (folder) => folder.name.toLowerCase() === newFolder.name.toLowerCase())
        if (conflictFolder != null) throw new Error(`${conflictFolder.name} already exists!`)
        state.push(newFolder)

@@ -98,7 +98,7 @@ function folders (state = initialFolders, action) {
        if (targetFolder == null) throw new Error('Folder doesnt exist')
        // Name conflict check
        if (targetFolder.name !== folder.name) {
-          let conflictFolder = _.find(state, _folder => {
+          let conflictFolder = _.find(state, (_folder) => {
            return folder.name.toLowerCase() === _folder.name.toLowerCase() && folder.key !== _folder.key
          })
          if (conflictFolder != null) throw new Error('Name conflicted')
@@ -116,7 +116,7 @@ function folders (state = initialFolders, action) {
        if (state.length < 2) throw new Error('Folder must exist more than one')

        let targetKey = action.data.key
-        let targetIndex = _.findIndex(state, folder => folder.key === targetKey)
+        let targetIndex = _.findIndex(state, (folder) => folder.key === targetKey)
        if (targetIndex >= 0) {
          state.splice(targetIndex, 1)
        }
@@ -161,9 +161,9 @@ function articles (state = initialArticles, action) {
      {
        let modified = action.data.article
        let targetKey = action.data.key
-        let originalIndex = _.findIndex(state.data, _article => targetKey === _article.key)
+        let originalIndex = _.findIndex(state.data, (_article) => targetKey === _article.key)
        if (originalIndex === -1) return state
-        let modifiedIndex = _.findIndex(state.modified, _article => targetKey === _article.key)
+        let modifiedIndex = _.findIndex(state.modified, (_article) => targetKey === _article.key)

        modified = compareArticle(state.data[originalIndex], modified)
        if (modified == null) {
--- a/browser/styles/finder/index.styl
+++ b/browser/styles/finder/index.styl
@@ -3,6 +3,7 @@
@import '../mixins/*'
 global-reset()
@import '../shared/*'
+@import '../theme/*'

 iptBgColor = #E6E6E6
 iptFocusBorderColor = #369DCD
--- a/browser/styles/main/ArticleDetail.styl
+++ b/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
--- a/browser/styles/main/ArticleList.styl
+++ b/browser/styles/main/ArticleList.styl
@@ -30,6 +30,8 @@ articleItemColor = #777
        height 20px
        color articleItemColor
        font-size 11px
+        i
+          margin-right 4px
        .folderName
          overflow ellipsis
          display inline-block
--- a/browser/styles/main/ArticleNavigator.styl
+++ b/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
--- a/browser/styles/main/index.styl
+++ b/browser/styles/main/index.styl
@@ -7,6 +7,7 @@ global-reset()
@import './ArticleList'
@import './ArticleDetail'
@import './modal/*'
+@import '../theme/*'

 DEFAULT_FONTS = 'Lato', helvetica, arial, sans-serif

--- a/browser/styles/main/modal/CreateNewFolder.styl
+++ b/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
--- a/browser/styles/main/modal/Preferences.styl
+++ b/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
--- a/browser/styles/mixins/marked.styl
+++ b/browser/styles/mixins/marked.styl
@@ -6,7 +6,7 @@ marked()
    background-color alpha(red, 0.1)
    color darken(red, 15%)
    padding 5px
-    margin -5px
+    margin 5px 0
    border-radius 5px
  sup
    position relative
@@ -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,15 @@ 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
+      &>pre
+        border none
+        margin -5px
  table
    width 100%
    margin 15px 0 25px
--- a/browser/styles/theme/dark.styl
+++ b/browser/styles/theme/dark.styl
@@ -0,0 +1,460 @@
+@import '../vars'
+
+themeDarkBackground = darken(#21252B, 10%)
+themeDarkModal = darken(#21252B, 10%)
+themeDarkList = #282C34
+themeDarkPreview = #282C34
+themeDarkSidebar = darken(#21252B, 10%)
+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);
+themeDarkTableOdd = themeDarkPreview
+themeDarkTableEven = darken(themeDarkPreview, 10%)
+themeDarkTableHead = themeDarkTableEven
+themeDarkTableBorder = themeDarkBorder
+themeDarkModalButtonDefault = themeDarkPreview
+themeDarkModalButtonDanger = #BF360C
+
+body[data-theme="dark"]
+  background-color themeDarkBackground
+
+  .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%)
+
+        .ArticleList-item-top
+          .folderName
+            color darken(themeDarkText, 15%)
+
+      .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
+            border-radius 0
+
+        &>.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
+
+    .DeleteArticleModal.modal
+      .control
+        button
+          transition 0.1s
+          color themeDarkText
+          border-color lighten(themeDarkModalButtonDefault, 20%)
+          background-color themeDarkModalButtonDefault
+
+          &:hover
+            background-color: lighten(themeDarkModalButtonDefault, 10%)
+
+          &:focus
+            border-color themeDarkTopicColor
+
+          &.danger
+            background-color themeDarkModalButtonDanger
+            border-color lighten(themeDarkModalButtonDanger, 30%)
+
+            &:hover
+              background-color: lighten(themeDarkModalButtonDanger, 10%)
+
+            &:focus
+              border-color lighten(themeDarkModalButtonDanger, 50%)
+
+    .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
+
+  .ArticleDetail-panel
+    border-radius 0
+
+  // Markdown Preview
+  .Finder .FinderDetail .content,
+  .ArticleDetail .ArticleDetail-panel .ArticleEditor
+    .MarkdownPreview
+      color themeDarkText
+      border-color themeDarkBorder
+      background-color themeDarkPreview
+
+      a:hover
+        background-color alpha(lighten(brandColor, 30%), 0.2) !important
+
+      code
+        border-color darken(themeDarkBorder, 10%)
+        background-color lighten(themeDarkPreview, 5%)
+
+      pre
+        code
+          background-color transparent
+
+      table
+        thead
+          tr
+            background-color themeDarkTableHead
+          th
+            border-color themeDarkTableBorder
+            &:last-child
+              border-right solid 1px themeDarkTableBorder
+        tbody
+          tr:nth-child(2n + 1)
+            background-color themeDarkTableOdd
+          tr:nth-child(2n)
+            background-color themeDarkTableEven
+          td
+            border-color themeDarkTableBorder
+            &:last-child
+              border-right solid 1px themeDarkTableBorder