themes (part 2)

README.md

@@ -30,16 +30,16 @@ https://stackedit.io/.
 
 ``` bash
 # install dependencies
-yarn install
+npm install
 
 # serve with hot reload at localhost:8080
-yarn start
+npm start
 
 # build for production with minification
-yarn run build
+npm run build
 
 # build for production and view the bundle analyzer report
-yarn run build --report
+npm run build --report
 ```
 
 > **NOTE:** This page has been written and published with [StackEdit](https://stackedit.io/ "StackEdit").

gulpfile.js

@@ -10,6 +10,7 @@ const prismScripts = [
   'prismjs/components/prism-javascript',
   'prismjs/components/prism-css',
   'prismjs/components/prism-ruby',
+  'prismjs/components/prism-cpp',
 ].map(require.resolve);
 prismScripts.push(
   path.join(path.dirname(require.resolve('prismjs/components/prism-core')), 'prism-!(*.min).js'));

src/components/ButtonBar.vue

@@ -43,8 +43,9 @@ export default {
 };
 </script>
 
-
 <style lang="scss">
+@import 'common/variables.scss';
+
 .button-bar {
   position: absolute;
   width: 100%;
@@ -60,27 +61,44 @@ export default {
 }
 
 .button-bar__button {
-  display: block;
   color: rgba(0, 0, 0, 0.2);
+  display: block;
   width: 26px;
   height: 26px;
   padding: 2px;
   margin: 3px 0;
 
+  .app--dark & {
+    color: rgba(255, 255, 255, 0.15);
+  }
+
   &:active,
   &:focus,
   &:hover {
     color: rgba(0, 0, 0, 0.2);
+
+    .app--dark & {
+      color: rgba(255, 255, 255, 0.15);
+      background-color: $navbar-hover-background;
+    }
   }
 }
 
 .button-bar__button--on {
   color: rgba(0, 0, 0, 0.4);
 
+  .app--dark & {
+    color: rgba(255, 255, 255, 0.4);
+  }
+
   &:active,
   &:focus,
   &:hover {
     color: rgba(0, 0, 0, 0.4);
+
+    .app--dark & {
+      color: rgba(255, 255, 255, 0.4);
+    }
   }
 }
 </style>

src/components/FindReplace.vue

@@ -349,6 +349,7 @@ export default {
 
 .find-replace-highlighting {
   background-color: $highlighting-color;
+  color: $editor-color-light !important;
 }
 
 .find-replace-selection {

src/components/Layout.vue

@@ -18,9 +18,6 @@
               <sticky-comment v-if="styles.editorGutterWidth && stickyComment === 'top'"></sticky-comment>
               <current-discussion v-if="styles.editorGutterWidth"></current-discussion>
             </div>
-            <div class="layout__panel layout__panel--find-replace" v-if="showFindReplace">
-              <find-replace></find-replace>
-            </div>
           </div>
           <div class="layout__panel layout__panel--button-bar" v-show="styles.showEditor" :style="{width: constants.buttonBarWidth + 'px'}">
             <button-bar></button-bar>
@@ -35,6 +32,9 @@
               <current-discussion v-if="styles.previewGutterWidth"></current-discussion>
             </div>
           </div>
+          <div class="layout__panel layout__panel--find-replace" v-if="showFindReplace">
+            <find-replace></find-replace>
+          </div>
         </div>
         <div class="layout__panel layout__panel--status-bar" v-show="styles.showStatusBar" :style="{height: constants.statusBarHeight + 'px'}">
           <status-bar></status-bar>
@@ -148,13 +148,8 @@ export default {
   background-color: #007acc;
 }
 
-$editor-background-light: #fff;
-$editor-background-dark: #1e1e1e;
-
 .layout__panel--editor {
-  .app--light & {
   background-color: $editor-background-light;
-  }
 
   .app--dark & {
     background-color: $editor-background-dark;
@@ -164,13 +159,11 @@ $editor-background-dark: #1e1e1e;
   .comment-list__current-discussion,
   .sticky-comment,
   .current-discussion {
-    .app--light & {
     background-color: mix(#000, $editor-background-light, 6.7%);
     border-color: $editor-background-light;
-    }
 
     .app--dark & {
-      background-color: mix(#fff, $editor-background-dark, 5%);
+      background-color: mix(#fff, $editor-background-dark, 6.7%);
       border-color: $editor-background-dark;
     }
   }
@@ -181,9 +174,7 @@ $preview-background-dark: #252525;
 
 .layout__panel--preview,
 .layout__panel--button-bar {
-  .app--light & {
   background-color: $preview-background-light;
-  }
 
   .app--dark & {
     background-color: $preview-background-dark;

src/components/Preview.vue

@@ -134,6 +134,10 @@ $corner-size: 110px;
     border-top: $corner-size solid rgba(0, 0, 0, 0.075);
     border-left: $corner-size solid transparent;
     pointer-events: none;
+
+    .app--dark & {
+      border-top-color: rgba(255, 255, 255, 0.075);
+    }
   }
 }
 
@@ -146,11 +150,19 @@ $corner-size: 110px;
   padding: 5px;
   color: rgba(0, 0, 0, 0.25);
 
+  .app--dark & {
+    color: rgba(255, 255, 255, 0.25);
+  }
+
   &:active,
   &:focus,
   &:hover {
     color: rgba(0, 0, 0, 0.33);
     background-color: transparent;
+
+    .app--dark & {
+      color: rgba(255, 255, 255, 0.33);
+    }
   }
 }
 </style>

src/components/common/app.scss

@@ -100,6 +100,18 @@ textarea {
     text-decoration: none;
   }
 
+  .app--dark .layout__panel--editor &,
+  .app--dark .layout__panel--preview & {
+    color: #ccc;
+
+    &:active,
+    &:focus,
+    &:hover {
+      color: #ccc;
+      background-color: rgba(255, 255, 255, 0.067);
+    }
+  }
+
   &[disabled] {
     &,
     &:active,
@@ -235,22 +247,38 @@ textarea {
   height: 21px;
   line-height: 1;
 
+  .app--dark & {
+    color: rgba(255, 255, 255, 0.33);
+  }
+
   &:active,
   &:focus,
   &:hover {
     color: rgba(0, 0, 0, 0.4);
+
+    .app--dark & {
+      color: rgba(255, 255, 255, 0.4);
+    }
   }
 }
 
 .discussion-editor-highlighting,
 .discussion-preview-highlighting {
-  background-color: mix(#fff, $selection-highlighting-color, 70%);
+  background-color: mix($editor-background-light, $selection-highlighting-color, 70%);
   padding: 0.25em 0;
+
+  .app--dark & {
+    background-color: mix($editor-background-dark, $selection-highlighting-color, 70%);
+  }
 }
 
 .discussion-editor-highlighting--hover,
 .discussion-preview-highlighting--hover {
-  background-color: mix(#fff, $selection-highlighting-color, 50%);
+  background-color: mix($editor-background-light, $selection-highlighting-color, 50%);
+
+  .app--dark & {
+    background-color: mix($editor-background-dark, $selection-highlighting-color, 50%);
+  }
 
   * {
     background-color: transparent;
@@ -259,7 +287,11 @@ textarea {
 
 .discussion-editor-highlighting--selected,
 .discussion-preview-highlighting--selected {
-  background-color: mix(#fff, $selection-highlighting-color, 20%);
+  background-color: mix($editor-background-light, $selection-highlighting-color, 20%);
+
+  .app--dark & {
+    background-color: mix($editor-background-dark, $selection-highlighting-color, 20%);
+  }
 
   * {
     background-color: transparent;

src/components/common/base.scss

@@ -9,7 +9,7 @@
 
 html,
 body {
-  color: $body-color;
+  color: $body-color-light;
   font-size: 16px;
   font-family: $font-family-main;
   font-variant-ligatures: common-ligatures;
@@ -18,6 +18,11 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
+.app--dark .layout__panel--editor,
+.app--dark .layout__panel--preview {
+  color: $body-color-dark;
+}
+
 p,
 blockquote,
 pre,
@@ -81,6 +86,12 @@ blockquote {
   color: rgba(0, 0, 0, 0.5);
   padding-left: 1.5em;
   border-left: 5px solid rgba(0, 0, 0, 0.075);
+
+  .app--dark .layout__panel--editor &,
+  .app--dark .layout__panel--preview & {
+    color: rgba(255, 255, 255, 0.4);
+    border-left-color: rgba(255, 255, 255, 0.075);
+  }
 }
 
 code {

src/components/common/markdownHighlighting.scss

@@ -1,10 +1,8 @@
 @import './variables';
 
 .markdown-highlighting {
-  .app--light & {
   color: $editor-color-light;
   caret-color: $editor-color-light-low;
-  }
 
   .app--dark & {
     color: $editor-color-dark;
@@ -27,9 +25,7 @@
   }
 
   .pre {
-    .app--light & {
     color: $editor-color-light;
-    }
 
     .app--dark & {
       color: $editor-color-dark;
@@ -39,9 +35,7 @@
     font-size: $font-size-monospace;
 
     [class*='language-'] {
-      .app--light & {
       color: $editor-color-light-low;
-      }
 
       .app--dark & {
         color: $editor-color-dark-low;
@@ -59,9 +53,7 @@
   }
 
   .tag {
-    .app--light & {
     color: $editor-color-light;
-    }
 
     .app--dark & {
       color: $editor-color-dark;
@@ -84,9 +76,7 @@
 
   .latex,
   .math {
-    .app--light & {
     color: $editor-color-light;
-    }
 
     .app--dark & {
       color: $editor-color-dark;
@@ -94,9 +84,7 @@
   }
 
   .entity {
-    .app--light & {
     color: $editor-color-light;
-    }
 
     .app--dark & {
       color: $editor-color-dark;
@@ -121,9 +109,7 @@
   }
 
   .comment {
-    .app--light & {
     color: $editor-color-light-high;
-    }
 
     .app--dark & {
       color: $editor-color-dark-high;
@@ -131,9 +117,7 @@
   }
 
   .keyword {
-    .app--light & {
     color: $editor-color-light-low;
-    }
 
     .app--dark & {
       color: $editor-color-dark-low;
@@ -173,7 +157,11 @@
   }
 
   .blockquote {
-    color: rgba(0, 0, 0, 0.48);
+    color: $editor-color-light-blockquote;
+
+    .app--dark & {
+      color: $editor-color-dark-blockquote;
+    }
   }
 
   .h1,
@@ -219,9 +207,7 @@
   }
 
   .cl-hash {
-    .app--light & {
     color: $editor-color-light-high;
-    }
 
     .app--dark & {
       color: $editor-color-dark-high;
@@ -230,9 +216,7 @@
 
   .cl,
   .hr {
-    .app--light & {
     color: $editor-color-light-high;
-    }
 
     .app--dark & {
       color: $editor-color-dark-high;
@@ -264,9 +248,7 @@
   }
 
   .linkdef .url {
-    .app--light & {
     color: $editor-color-light-high;
-    }
 
     .app--dark & {
       color: $editor-color-dark-high;
@@ -291,18 +273,14 @@
   .imgref,
   .link,
   .linkref {
-    .app--light & {
     color: $editor-color-light-high;
-    }
 
     .app--dark & {
       color: $editor-color-dark-high;
     }
 
     .cl-underlined-text {
-      .app--light & {
       color: $editor-color-light-low;
-      }
 
       .app--dark & {
         color: $editor-color-dark-low;
@@ -311,9 +289,7 @@
   }
 
   .cl-title {
-    .app--light & {
     color: $editor-color-light;
-    }
 
     .app--dark & {
       color: $editor-color-dark;

src/components/common/mermaid.scss

@@ -1,4 +1,4 @@
-/* stylelint-disable color-hex-case, color-hex-length, rule-empty-line-before, comment-empty-line-before */
+/* stylelint-disable color-hex-case, color-hex-length, rule-empty-line-before, comment-empty-line-before, comment-whitespace-inside, comment-no-empty */
 .mermaid {
   font-size: 16px;
 
@@ -7,6 +7,10 @@
     width: 100%;
     max-width: 100%;
 
+    .app--dark & {
+      color: rgba(255, 255, 255, 0.75);
+    }
+
     * {
       font-family: $font-family-main;
     }
@@ -357,3 +361,278 @@
     z-index: 100;
   }
 }
+
+.app--dark .mermaid {
+  /* Flowchart variables */
+  /* Sequence Diagram variables */
+  /* Gantt chart variables */
+  .label {
+    color: #323D47;
+  }
+  .node rect,
+  .node circle,
+  .node ellipse,
+  .node polygon {
+    fill: #BDD5EA;
+    stroke: #81B1DB;
+    stroke-width: 1px;
+  }
+  .edgePath .path {
+    stroke: lightgrey;
+  }
+  .edgeLabel {
+    background-color: #e8e8e8;
+  }
+  .cluster rect {
+    fill: #6D6D65 !important;
+    rx: 4 !important;
+    stroke: rgba(255, 255, 255, 0.25) !important;
+    stroke-width: 1px !important;
+  }
+  .cluster text {
+    fill: #F9FFFE;
+  }
+  .actor {
+    stroke: #81B1DB;
+    fill: #BDD5EA;
+  }
+  text.actor {
+    fill: black;
+    stroke: none;
+  }
+  .actor-line {
+    stroke: lightgrey;
+  }
+  .messageLine0 {
+    stroke-width: 1.5;
+    stroke-dasharray: "2 2";
+    marker-end: "url(#arrowhead)";
+    stroke: lightgrey;
+  }
+  .messageLine1 {
+    stroke-width: 1.5;
+    stroke-dasharray: "2 2";
+    stroke: lightgrey;
+  }
+  #arrowhead {
+    fill: lightgrey !important;
+  }
+  #crosshead path {
+    fill: lightgrey !important;
+    stroke: lightgrey !important;
+  }
+  .messageText {
+    fill: lightgrey;
+    stroke: none;
+  }
+  .labelBox {
+    stroke: #81B1DB;
+    fill: #BDD5EA;
+  }
+  .labelText {
+    fill: #323D47;
+    stroke: none;
+  }
+  .loopText {
+    fill: lightgrey;
+    stroke: none;
+  }
+  .loopLine {
+    stroke-width: 2;
+    stroke-dasharray: "2 2";
+    marker-end: "url(#arrowhead)";
+    stroke: #81B1DB;
+  }
+  .note {
+    stroke: rgba(255, 255, 255, 0.25);
+    fill: #fff5ad;
+  }
+  .noteText {
+    fill: black;
+    stroke: none;
+    font-family: 'trebuchet ms', verdana, arial;
+    font-size: 14px;
+  }
+  /** Section styling */
+  .section {
+    stroke: none;
+    opacity: 0.2;
+  }
+  .section0 {
+    fill: rgba(255, 255, 255, 0.3);
+  }
+  .section2 {
+    fill: #EAE8B9;
+  }
+  .section1,
+  .section3 {
+    fill: white;
+    opacity: 0.2;
+  }
+  .sectionTitle0 {
+    fill: #F9FFFE;
+  }
+  .sectionTitle1 {
+    fill: #F9FFFE;
+  }
+  .sectionTitle2 {
+    fill: #F9FFFE;
+  }
+  .sectionTitle3 {
+    fill: #F9FFFE;
+  }
+  .sectionTitle {
+    text-anchor: start;
+    font-size: 11px;
+  }
+  /* Grid and axis */
+  .grid .tick {
+    stroke: rgba(255, 255, 255, 0.3);
+    opacity: 0.3;
+    shape-rendering: crispEdges;
+  }
+  .grid .tick text {
+    fill: lightgrey;
+    opacity: 0.5;
+  }
+  .grid path {
+    stroke-width: 0;
+  }
+  /* Today line */
+  .today {
+    fill: none;
+    stroke: #DB5757;
+    stroke-width: 2px;
+  }
+  /* Task styling */
+  /* Default task */
+  .task {
+    stroke-width: 1;
+  }
+  .taskText {
+    text-anchor: middle;
+    font-size: 11px;
+  }
+  .taskTextOutsideRight {
+    fill: #323D47;
+    text-anchor: start;
+    font-size: 11px;
+  }
+  .taskTextOutsideLeft {
+    fill: #323D47;
+    text-anchor: end;
+    font-size: 11px;
+  }
+  /* Specific task settings for the sections*/
+  .taskText0,
+  .taskText1,
+  .taskText2,
+  .taskText3 {
+    fill: #323D47;
+  }
+  .task0,
+  .task1,
+  .task2,
+  .task3 {
+    fill: #BDD5EA;
+    stroke: rgba(255, 255, 255, 0.5);
+  }
+  .taskTextOutside0,
+  .taskTextOutside2 {
+    fill: lightgrey;
+  }
+  .taskTextOutside1,
+  .taskTextOutside3 {
+    fill: lightgrey;
+  }
+  /* Active task */
+  .active0,
+  .active1,
+  .active2,
+  .active3 {
+    fill: #81B1DB;
+    stroke: rgba(255, 255, 255, 0.5);
+  }
+  .activeText0,
+  .activeText1,
+  .activeText2,
+  .activeText3 {
+    fill: #323D47 !important;
+  }
+  /* Completed task */
+  .done0,
+  .done1,
+  .done2,
+  .done3 {
+    fill: lightgrey;
+  }
+  .doneText0,
+  .doneText1,
+  .doneText2,
+  .doneText3 {
+    fill: #323D47 !important;
+  }
+  /* Tasks on the critical line */
+  .crit0,
+  .crit1,
+  .crit2,
+  .crit3 {
+    stroke: #E83737;
+    fill: #E83737;
+    stroke-width: 2;
+  }
+  .activeCrit0,
+  .activeCrit1,
+  .activeCrit2,
+  .activeCrit3 {
+    stroke: #E83737;
+    fill: #81B1DB;
+    stroke-width: 2;
+  }
+  .doneCrit0,
+  .doneCrit1,
+  .doneCrit2,
+  .doneCrit3 {
+    stroke: #E83737;
+    fill: lightgrey;
+    stroke-width: 1;
+    cursor: pointer;
+    shape-rendering: crispEdges;
+  }
+  .doneCritText0,
+  .doneCritText1,
+  .doneCritText2,
+  .doneCritText3 {
+    fill: lightgrey !important;
+  }
+  .activeCritText0,
+  .activeCritText1,
+  .activeCritText2,
+  .activeCritText3 {
+    fill: #323D47 !important;
+  }
+  .titleText {
+    text-anchor: middle;
+    font-size: 18px;
+    fill: lightgrey;
+  }
+  /*
+  */
+  .node text {
+    font-family: 'trebuchet ms', verdana, arial;
+    font-size: 14px;
+  }
+  div.mermaidTooltip {
+    position: absolute;
+    text-align: center;
+    max-width: 200px;
+    padding: 2px;
+    font-family: 'trebuchet ms', verdana, arial;
+    font-size: 12px;
+    background: #6D6D65;
+    border: 1px solid rgba(255, 255, 255, 0.25);
+    border-radius: 2px;
+    pointer-events: none;
+    z-index: 100;
+  }
+}

src/components/common/variables.scss

@@ -1,10 +1,11 @@
 $font-family-main: Lato, 'Helvetica Neue', Helvetica, sans-serif;
 $font-family-monospace: 'Roboto Mono', 'Lucida Sans Typewriter', 'Lucida Console', monaco, Courrier, monospace;
-$body-color: rgba(0, 0, 0, 0.75);
+$body-color-light: rgba(0, 0, 0, 0.75);
+$body-color-dark: rgba(255, 255, 255, 0.75);
+$code-bg: rgba(0, 0, 0, 0.05);
 $line-height-base: 1.67;
 $line-height-title: 1.33;
 $font-size-monospace: 0.85em;
-$code-bg: rgba(0, 0, 0, 0.05);
 $highlighting-color: #ff0;
 $selection-highlighting-color: #ff9632;
 $info-bg: transparentize($selection-highlighting-color, 0.85);
@@ -18,13 +19,18 @@ $navbar-color: mix($navbar-bg, #fff, 33%);
 $navbar-hover-color: #fff;
 $navbar-hover-background: rgba(255, 255, 255, 0.1);
 
+$editor-background-light: #fff;
+$editor-background-dark: #1e1e1e;
+
 $editor-color-light: rgba(0, 0, 0, 0.8);
-$editor-color-light-high: rgba(0, 0, 0, 0.28);
 $editor-color-light-low: #000;
+$editor-color-light-high: rgba(0, 0, 0, 0.28);
+$editor-color-light-blockquote: rgba(0, 0, 0, 0.48);
 
 $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-color-dark-high: rgba(255, 255, 255, 0.28);
+$editor-color-dark-blockquote: rgba(255, 255, 255, 0.48);
 
 $editor-font-weight-base: 400;
 $editor-font-weight-bold: 600;

src/components/gutters/CommentList.vue

@@ -300,8 +300,12 @@ div.comment {
     position: absolute;
     bottom: -8px;
     right: 0;
-    border-top: 8px solid #fff;
+    border-top: 8px solid $editor-background-light;
     border-left: 8px solid transparent;
+
+    .app--dark & {
+      border-top-color: $editor-background-dark;
+    }
   }
 
   h1,
@@ -351,11 +355,15 @@ div.comment {
   max-height: 200px;
   overflow: auto;
   padding: 1px 8px;
-  background-color: #fff;
+  background-color: $editor-background-light;
   border: 1px solid transparent;
   border-radius: $border-radius-base;
   border-bottom-right-radius: 0;
 
+  .app--dark & {
+    background-color: $editor-background-dark;
+  }
+
   .markdown-highlighting {
     padding: 5px 0;
     margin: 0;

src/components/gutters/CurrentDiscussion.vue

@@ -158,8 +158,12 @@ export default {
 
   span {
     padding: 0.2em 0;
-    background-color: mix(#fff, $selection-highlighting-color, 10%);
+    background-color: mix($editor-background-light, $selection-highlighting-color, 10%);
     cursor: pointer;
+
+    .app--dark {
+      background-color: mix($editor-background-dark, $selection-highlighting-color, 10%);
+    }
   }
 }
 </style>

src/components/menus/HistoryMenu.vue

@@ -268,9 +268,7 @@ export default {
 .layout--revision {
   .cledit-section *,
   .cl-preview-section * {
-    .app--light & {
     color: transparentize($editor-color-light, 0.67) !important;
-    }
 
     .app--dark & {
       color: transparentize($editor-color-dark, 0.67) !important;
@@ -278,9 +276,7 @@ export default {
   }
 
   .cledit-section .revision-diff {
-    .app--light & {
     color: $editor-color-light !important;
-    }
 
     .app--dark & {
       color: $editor-color-dark !important;
@@ -288,7 +284,11 @@ export default {
   }
 
   .cl-preview-section .revision-diff {
-    color: $body-color !important;
+    color: $body-color-light !important;
+
+    .app--dark & {
+      color: $body-color-dark !important;
+    }
   }
 
   .revision-diff {

static/landing/index.html

@@ -241,7 +241,7 @@
         <div class="navigation-bar">
             <a class="navigation-bar__button button" href="app" title="Editor">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon"><path d="M 16.8363,2.73375C 16.45,2.73375 16.0688,2.88125 15.7712,3.17375L 13.6525,5.2925L 18.955,10.5962L 21.0737,8.47625C 21.665,7.89 21.665,6.94375 21.0737,6.3575L 17.895,3.17375C 17.6025,2.88125 17.2163,2.73375 16.8363,2.73375 Z M 12.9437,6.00125L 4.84375,14.1062L 7.4025,14.39L 7.57875,16.675L 9.85875,16.85L 10.1462,19.4088L 18.2475,11.3038M 4.2475,15.0437L 2.515,21.7337L 9.19875,19.9412L 8.955,17.7838L 6.645,17.6075L 6.465,15.2925"></path></svg>
-                Start writing!
+                Start writing
             </a>
         </div>
         <div class="splash-screen">