support dark mode, closed #78

Author: egoist

.eslintrc

@@ -8,9 +8,13 @@
     "curly": ["error", "multi-line"],
     "no-warning-comments": 0,
     "max-lines": 0,
-    "quote-props": ["error", "as-needed"]
+    "quote-props": ["error", "as-needed"],
+    "guard-for-in": 0
   },
   "env": {
     "browser": "true"
+  },
+  "globals": {
+    "Mousetrap": true
   }
 }

app/eme/config.js

@@ -12,6 +12,15 @@ const config = new Config({
       currentTabIndex: null
     },
     settings: {
+      theme: 'white',
+      colorSchema: 'base16-light',
+      highlight: 'github',
+      font: `-apple-system, BlinkMacSystemFont,
+            'avenir next', avenir,
+            helvetica, 'helvetica neue',
+            Ubuntu,
+            'segoe ui', arial,
+            sans-serif`,
       writingMode: 'default',
       tabSize: 2,
       indentWithTabs: false,

package.json

@@ -68,6 +68,7 @@
     "animate.css": "^3.5.1",
     "babel-runtime": "^6.11.6",
     "codemirror": "^5.17.0",
+    "color-preset": "^0.1.1",
     "highlight.js": "^9.5.0",
     "hint.css": "2.3.2",
     "lodash.debounce": "^4.0.6",

scripts/webpack.config.js

@@ -6,8 +6,8 @@ const appPkg = require('../app/package')
 
 const postcss = [
   require('postcss-nested'),
-  require('postcss-simple-vars'),
   require('postcss-import')(),
+  require('postcss-simple-vars'),
   require('postcss-mixins'),
   require('autoprefixer')({
     browsers: ['last 2 Chrome versions']

src/app.vue

@@ -2,7 +2,8 @@
 <style src="animate.css/animate.css"></style>
 <style src="codemirror/lib/codemirror.css"></style>
 <style src="./css/reset"></style>
-<style src="./css/editor-reset"></style>
+<style src="src/css/theme/white"></style>
+<style src="src/css/theme/dark"></style>
 <style>
   .overlay {
     position: fixed;
@@ -16,10 +17,14 @@
 
 <template>
   <div id="app"
-    :class="{
-      'distraction-free': isDistractionFreeMode,
-      'full-screen': isFullScreen
-    }">
+    :class="[
+      {
+        'distraction-free': isDistractionFreeMode,
+        'full-screen': isFullScreen
+      },
+      'theme-' + theme,
+      highlight
+    ]">
     <div
       class="overlay"
       @click="togglePreferencePane"
@@ -53,7 +58,9 @@
     vuex: {
       getters: {
         tabsAmount: state => state.editor.tabs.length,
-        showPreferencePane: state => state.app.showPreferencePane
+        showPreferencePane: state => state.app.showPreferencePane,
+        theme: state => state.app.settings.theme,
+        highlight: state => state.app.settings.highlight
       },
       actions: {
         togglePreferencePane({dispatch}) {

src/components/footer.vue

@@ -5,16 +5,12 @@
     background-color: #f0f0f0;
     padding: 0 10px;
     font-size: 12px;
-    color: #666;
-    border-top: 1px solid #e2e2e2;
+    border-top: 1px solid;
     position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
     -webkit-app-region: drag;
-    box-shadow: inset 0 1px 0 #f5f4f5;
-    background-image: linear-gradient(to bottom,#e8e6e8 0,#d1cfd1 100%);
-    border-top: 1px solid #c2c0c2;
     > span {
       margin-right: 10px;
     }
@@ -24,8 +20,8 @@
       border: none;
       font-size: 12px;
       outline: none;
-      color: #666;
       -webkit-appearance: none;
+      text-rendering: geometricPrecision;
     }
 
     .footer-right {
@@ -39,11 +35,7 @@
         .footer-icon-item {
           height: 16px;
           line-height: 16px;
-          background-color: #fcfcfc;
-          background-image: linear-gradient(to bottom,#fcfcfc 0,#f1f1f1 100%);
           border: 1px solid;
-          border-color: #c2c0c2 #c2c0c2 #a19fa1;
-          box-shadow: 0 1px 1px rgba(0,0,0,.06);
           margin-left: -1px;
           padding: 0 5px;
           text-align: center;
@@ -53,16 +45,7 @@
           position: relative;
           z-index: 1;
           &.active {
-            background-color: #6d6c6d;
-            background-image: none;
-            color: white;
-            border-color: transparent;
             z-index: 2;
-            .footer-icon {
-              path {
-                fill: white;
-              }
-            }
           }
           &:first-child {
             border-radius: 4px 0 0 4px;
@@ -85,9 +68,6 @@
     svg {
       width: 12px;
     }
-    path {
-      fill: #666;
-    }
     .disabled & path {
       fill: #ccc;
     }

src/components/header.vue

@@ -5,7 +5,7 @@
     display: flex;
     cursor: default;
     height: $header-height;
-    border-bottom: 1px solid #ddd;
+    border-bottom: 1px solid;
     -webkit-app-region: drag;
     &:hover {
       .settings-trigger {
@@ -38,17 +38,15 @@
       padding-right: 40px;
       position: relative;
       text-align: center;
-      border-left: 1px solid #ddd;
-      border-bottom: 1px solid #ddd;
+      border-left: 1px solid;
+      border-bottom: 1px solid;
       display: flex;
       flex: 1;
       width: 100%;
       white-space: nowrap;
-      background-color: white;
       overflow: hidden;
       text-overflow: ellipsis;
       .tab-title {
-        color: #999;
         -webkit-user-select: none;
         width: 100%;
         display: block;
@@ -60,17 +58,11 @@
         }
       }
       &.current-tab {
-        border-left-color: #1976D2;
-        background-color: white;
         border-left-width: 2px;
         border-bottom: none;
-        .tab-title {
-          color: #333;
-        }
       }
       &.hover {
         .tab-indicator {
-          background-color: rgba(255, 255, 255, 0.84);
           .dot {
             display: none;
           }
@@ -86,26 +78,18 @@
 
     &:not(.single-tab) {
       .tab:last-child {
-        border-right: 1px solid #ddd;
+        border-right: 1px solid;
       }
     }
 
     &.single-tab {
       .tab {
         &.current-tab {
-          border-bottom: 1px solid #ddd;
+          border-bottom: 1px solid;
           border-left-width: 1px;
-          border-left-color: #ddd;
-          border-right: 1px solid #ddd;
+          border-right: 1px solid transparent;
           &:not(.unsaved) {
-            border-right-width: 0;
-          }
-        }
-      }
-      &:hover {
-        .tab {
-          &.current-tab {
-            border-right-width: 1px;
+            border-right-color: transparent;
           }
         }
       }
@@ -127,7 +111,6 @@
       .dot {
         width: 5px;
         height: 5px;
-        background-color: #4b89ff;
         border-radius: 50%;
         display: inline-block;
       }
@@ -146,27 +129,12 @@
     }
 
     .settings-trigger {
-      $color: #b1b1b1;
-      $colorActive: #666;
-
       opacity: 0;
       display: flex;
       justify-content: center;
       width: 50px;
       svg {
         width: 14px;
-        color: $color;
-        circle {
-          color: $color;
-        }
-      }
-      &:hover {
-        svg {
-          color: $colorActive;
-          circle {
-            color: $colorActive;
-          }
-        }
       }
     }
   }

src/components/main.vue

@@ -1,7 +1,12 @@
-<style src="highlight.js/styles/github"></style>
-<style src="../css/base16-light"></style>
-<style src="../css/editor-dialog"></style>
-<style src="../css/editor-scrollbar"></style>
+<!-- codemirror theme -->
+<style src="src/css/codemirror/tomorrow-night-bright"></style>
+<style src="src/css/codemirror/base16-light"></style>
+<style src="src/css/codemirror/editor-dialog"></style>
+<style src="src/css/codemirror/editor-scrollbar"></style>
+<style src="src/css/codemirror/editor-reset"></style>
+<!-- highlight.js theme -->
+<style src="src/css/highlight/github"></style>
+<style src="src/css/highlight/tomorrow-night-bright"></style>
 
 <style>
   .main {
@@ -40,7 +45,7 @@
     cursor: text;
     overflow-x: hidden !important;
     position: relative;
-    border-right: 1px solid #e3e3e3;
+    border-right: 1px solid;
     .editor-input {
       display: none;
     }
@@ -86,7 +91,7 @@
 </style>
 
 <template>
-  <div class="main">
+  <div class="main" :style="{'font-family': settings.font}">
     <tip v-if="tabs.length === 0"></tip>
     <div
       class="tab-body"
@@ -387,7 +392,7 @@
           const textarea = tabEl.querySelector(`#editor-${index}`)
           const editor = CodeMirror.fromTextArea(textarea, {
             mode: 'gfm',
-            theme: 'base16-light',
+            theme: this.settings.colorSchema,
             lineNumbers: false,
             matchBrackets: true,
             lineWrapping: true,
@@ -623,6 +628,12 @@
           this.editor.refresh()
           this.editor.focus()
         })
+
+        event.on('update-editor-options', options => {
+          for (const option in options) {
+            this.editor.setOption(option, options[option])
+          }
+        })
       },
       async closeTab(index) {
         const tab = this.tabs[index]