themes (part 1)

chrome-app/manifest.json

@@ -0,0 +1,27 @@
+{
+  "name": "StackEdit",
+  "description": "In-browser Markdown editor",
+  "version": "1.0.11",
+  "manifest_version": 2,
+  "container" : "GOOGLE_DRIVE",
+  "api_console_project_id" : "241271498917",
+  "icons": {
+    "16": "icon-16.png",
+    "32": "icon-32.png",
+    "64": "icon-64.png",
+    "128": "icon-128.png",
+    "256": "icon-256.png"
+  },
+  "app": {
+    "urls": [
+      "https://stackedit.io/"
+    ],
+    "launch": {
+      "web_url": "https://stackedit.io/app"
+    }
+  },
+  "offline_enabled": true,
+  "permissions": [
+    "unlimitedStorage"
+  ]
+}

src/components/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="app">
+  <div class="app" :class="themeClasses">
     <splash-screen v-if="!ready"></splash-screen>
     <layout v-else></layout>
     <modal v-if="showModal"></modal>
@@ -61,6 +61,11 @@ Vue.filter('formatTime', time =>
   // Access the minute counter for reactive refresh
   timeSvc.format(time, store.state.minuteCounter));
 
+const themeClasses = {
+  light: ['app--light'],
+  dark: ['app--dark'],
+};
+
 export default {
   components: {
     Layout,
@@ -72,6 +77,10 @@ export default {
     ready: false,
   }),
   computed: {
+    themeClasses() {
+      const result = themeClasses[this.$store.getters['data/computedSettings'].colorTheme];
+      return Array.isArray(result) ? result : themeClasses.light;
+    },
     showModal() {
       return !!this.$store.getters['modal/config'];
     },

src/components/Editor.vue

@@ -85,7 +85,6 @@ export default {
   white-space: pre-wrap;
   word-break: break-word;
   word-wrap: break-word;
-  caret-color: #000;
 
   * {
     line-height: $line-height-base;

src/components/Layout.vue

@@ -148,25 +148,46 @@ export default {
   background-color: #007acc;
 }
 
-$editor-background: #fff;
+$editor-background-light: #fff;
+$editor-background-dark: #1e1e1e;
 
 .layout__panel--editor {
-  background-color: $editor-background;
+  .app--light & {
+    background-color: $editor-background-light;
+  }
+
+  .app--dark & {
+    background-color: $editor-background-dark;
+  }
 
   .gutter__background,
   .comment-list__current-discussion,
   .sticky-comment,
   .current-discussion {
-    background-color: mix(#000, $editor-background, 6.7%);
+    .app--light & {
-    border-color: $editor-background;
+      background-color: mix(#000, $editor-background-light, 6.7%);
+      border-color: $editor-background-light;
+    }
+
+    .app--dark & {
+      background-color: mix(#fff, $editor-background-dark, 5%);
+      border-color: $editor-background-dark;
+    }
   }
 }
 
-$preview-background: #f3f3f3;
+$preview-background-light: #f3f3f3;
+$preview-background-dark: #252525;
 
 .layout__panel--preview,
 .layout__panel--button-bar {
-  background-color: $preview-background;
+  .app--light & {
+    background-color: $preview-background-light;
+  }
+
+  .app--dark & {
+    background-color: $preview-background-dark;
+  }
 }
 
 .layout__panel--preview {
@@ -174,8 +195,8 @@ $preview-background: #f3f3f3;
   .comment-list__current-discussion,
   .sticky-comment,
   .current-discussion {
-    background-color: mix(#000, $preview-background, 6.7%);
+    background-color: mix(#000, $preview-background-light, 6.7%);
-    border-color: $preview-background;
+    border-color: $preview-background-light;
   }
 }
 

src/components/common/markdownHighlighting.scss

@@ -1,7 +1,16 @@
 @import './variables';
 
 .markdown-highlighting {
-  color: $editor-color;
+  .app--light & {
+    color: $editor-color-light;
+    caret-color: $editor-color-light-low;
+  }
+
+  .app--dark & {
+    color: $editor-color-dark;
+    caret-color: $editor-color-dark-low;
+  }
+
   font-family: inherit;
   font-size: inherit;
   -webkit-font-smoothing: auto;
@@ -18,12 +27,25 @@
   }
 
   .pre {
-    color: $editor-color;
+    .app--light & {
+      color: $editor-color-light;
+    }
+
+    .app--dark & {
+      color: $editor-color-dark;
+    }
+
     font-family: $font-family-monospace;
     font-size: $font-size-monospace;
 
     [class*='language-'] {
-      color: $editor-color-dark;
+      .app--light & {
+        color: $editor-color-light-low;
+      }
+
+      .app--dark & {
+        color: $editor-color-dark-low;
+      }
     }
 
     * {
@@ -37,7 +59,14 @@
   }
 
   .tag {
-    color: $editor-color;
+    .app--light & {
+      color: $editor-color-light;
+    }
+
+    .app--dark & {
+      color: $editor-color-dark;
+    }
+
     font-family: $font-family-monospace;
     font-size: $font-size-monospace;
     font-weight: $editor-font-weight-bold;
@@ -55,11 +84,24 @@
 
   .latex,
   .math {
-    color: $editor-color;
+    .app--light & {
+      color: $editor-color-light;
+    }
+
+    .app--dark & {
+      color: $editor-color-dark;
+    }
   }
 
   .entity {
-    color: $editor-color;
+    .app--light & {
+      color: $editor-color-light;
+    }
+
+    .app--dark & {
+      color: $editor-color-dark;
+    }
+
     font-family: $font-family-monospace;
     font-size: $font-size-monospace;
     font-style: italic;
@@ -79,11 +121,24 @@
   }
 
   .comment {
-    color: $editor-color-light;
+    .app--light & {
+      color: $editor-color-light-high;
+    }
+
+    .app--dark & {
+      color: $editor-color-dark-high;
+    }
   }
 
   .keyword {
-    color: $editor-color-dark;
+    .app--light & {
+      color: $editor-color-light-low;
+    }
+
+    .app--dark & {
+      color: $editor-color-dark-low;
+    }
+
     font-weight: $editor-font-weight-bold;
   }
 
@@ -164,12 +219,25 @@
   }
 
   .cl-hash {
-    color: $editor-color-light;
+    .app--light & {
+      color: $editor-color-light-high;
+    }
+
+    .app--dark & {
+      color: $editor-color-dark-high;
+    }
   }
 
   .cl,
   .hr {
-    color: $editor-color-light;
+    .app--light & {
+      color: $editor-color-light-high;
+    }
+
+    .app--dark & {
+      color: $editor-color-dark-high;
+    }
+
     font-style: normal;
     font-weight: $editor-font-weight-base;
   }
@@ -196,7 +264,13 @@
   }
 
   .linkdef .url {
-    color: $editor-color-light;
+    .app--light & {
+      color: $editor-color-light-high;
+    }
+
+    .app--dark & {
+      color: $editor-color-dark-high;
+    }
   }
 
   .fn,
@@ -217,15 +291,33 @@
   .imgref,
   .link,
   .linkref {
-    color: $editor-color-light;
+    .app--light & {
+      color: $editor-color-light-high;
+    }
+
+    .app--dark & {
+      color: $editor-color-dark-high;
+    }
 
     .cl-underlined-text {
-      color: $editor-color-dark;
+      .app--light & {
+        color: $editor-color-light-low;
+      }
+
+      .app--dark & {
+        color: $editor-color-dark-low;
+      }
     }
   }
 
   .cl-title {
-    color: $editor-color;
+    .app--light & {
+      color: $editor-color-light;
+    }
+
+    .app--dark & {
+      color: $editor-color-dark;
+    }
   }
 }
 

src/components/common/variables.scss

@@ -18,8 +18,13 @@ $navbar-color: mix($navbar-bg, #fff, 33%);
 $navbar-hover-color: #fff;
 $navbar-hover-background: rgba(255, 255, 255, 0.1);
 
-$editor-color: rgba(0, 0, 0, 0.8);
+$editor-color-light: rgba(0, 0, 0, 0.8);
-$editor-color-light: rgba(0, 0, 0, 0.28);
+$editor-color-light-high: rgba(0, 0, 0, 0.28);
-$editor-color-dark: #000;
+$editor-color-light-low: #000;
+
+$editor-color-dark: rgba(255, 255, 255, 0.8);
+$editor-color-dark-high: rgba(255, 255, 255, 0.28);
+$editor-color-dark-low: #fff;
+
 $editor-font-weight-base: 400;
 $editor-font-weight-bold: 600;

src/components/menus/HistoryMenu.vue

@@ -268,11 +268,23 @@ export default {
 .layout--revision {
   .cledit-section *,
   .cl-preview-section * {
-    color: rgba(0, 0, 0, 0.15) !important;
+    .app--light & {
+      color: transparentize($editor-color-light, 0.67) !important;
+    }
+
+    .app--dark & {
+      color: transparentize($editor-color-dark, 0.67) !important;
+    }
   }
 
   .cledit-section .revision-diff {
-    color: $editor-color !important;
+    .app--light & {
+      color: $editor-color-light !important;
+    }
+
+    .app--dark & {
+      color: $editor-color-dark !important;
+    }
   }
 
   .cl-preview-section .revision-diff {

src/components/modals/AboutModal.vue

@@ -2,7 +2,7 @@
   <modal-inner class="modal__inner-1--about-modal" aria-label="About">
     <div class="modal__content">
       <div class="logo-background"></div>
-      <div class="app-version">v{{version}} — © 2018 Benoit Schweblin</div>
+      <small>v{{version}} — © 2018 Benoit Schweblin</small>
       <hr>
       <a target="_blank" href="https://github.com/benweet/stackedit/">GitHub repo</a> —
       <a target="_blank" href="https://github.com/benweet/stackedit/issues">issue tracker</a>
@@ -11,10 +11,9 @@
       <br>
       StackEdit on <a target="_blank" href="https://twitter.com/stackedit/">Twitter</a>
       <hr>
-      Licensed under an
+      <small>Licensed under an
-      <a target="_blank" href="http://www.apache.org/licenses/LICENSE-2.0">Apache License</a>
+      <a target="_blank" href="http://www.apache.org/licenses/LICENSE-2.0">Apache License</a><br>
-      <br>
+      <a target="_blank" href="privacy_policy.html">Privacy Policy</a></small>
-      <a target="_blank" href="privacy_policy.html">Privacy Policy</a>
     </div>
     <div class="modal__button-bar">
       <button class="button" @click="config.resolve()">Close</button>
@@ -48,8 +47,8 @@ export default {
     margin: 0.5rem 0;
   }
 
-  .app-version {
+  small {
-    font-size: 0.8em;
+    display: block;
   }
 
   hr {

src/data/defaultSettings.yml

@@ -1,3 +1,5 @@
+# light or dark
+colorTheme: light
 # Auto-sync frequency (in ms). Minimum is 60000.
 autoSyncEvery: 60000
 # Adjust font size in editor and preview