@@ -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;
- }
+ 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;
- }
+ 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;
- }
+ background-color: $preview-background-light;
.app--dark & {
background-color: $preview-background-dark;
diff --git a/src/components/Preview.vue b/src/components/Preview.vue
index 13644faa..e0f41c32 100644
--- a/src/components/Preview.vue
+++ b/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);
+ }
}
}
diff --git a/src/components/common/app.scss b/src/components/common/app.scss
index 4d842e29..9c371de8 100644
--- a/src/components/common/app.scss
+++ b/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;
diff --git a/src/components/common/base.scss b/src/components/common/base.scss
index 1f3c24d0..b322ab50 100644
--- a/src/components/common/base.scss
+++ b/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 {
diff --git a/src/components/common/markdownHighlighting.scss b/src/components/common/markdownHighlighting.scss
index 6ca539a5..6e9486f7 100644
--- a/src/components/common/markdownHighlighting.scss
+++ b/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;
- }
+ 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;
- }
+ 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;
- }
+ color: $editor-color-light-low;
.app--dark & {
color: $editor-color-dark-low;
@@ -59,9 +53,7 @@
}
.tag {
- .app--light & {
- color: $editor-color-light;
- }
+ color: $editor-color-light;
.app--dark & {
color: $editor-color-dark;
@@ -84,9 +76,7 @@
.latex,
.math {
- .app--light & {
- color: $editor-color-light;
- }
+ color: $editor-color-light;
.app--dark & {
color: $editor-color-dark;
@@ -94,9 +84,7 @@
}
.entity {
- .app--light & {
- color: $editor-color-light;
- }
+ color: $editor-color-light;
.app--dark & {
color: $editor-color-dark;
@@ -121,9 +109,7 @@
}
.comment {
- .app--light & {
- color: $editor-color-light-high;
- }
+ color: $editor-color-light-high;
.app--dark & {
color: $editor-color-dark-high;
@@ -131,9 +117,7 @@
}
.keyword {
- .app--light & {
- color: $editor-color-light-low;
- }
+ 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;
- }
+ 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;
- }
+ 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;
- }
+ 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;
- }
+ color: $editor-color-light-high;
.app--dark & {
color: $editor-color-dark-high;
}
.cl-underlined-text {
- .app--light & {
- color: $editor-color-light-low;
- }
+ color: $editor-color-light-low;
.app--dark & {
color: $editor-color-dark-low;
@@ -311,9 +289,7 @@
}
.cl-title {
- .app--light & {
- color: $editor-color-light;
- }
+ color: $editor-color-light;
.app--dark & {
color: $editor-color-dark;
diff --git a/src/components/common/mermaid.scss b/src/components/common/mermaid.scss
index 0f97a09d..97df441b 100644
--- a/src/components/common/mermaid.scss
+++ b/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;
+ }
+}
diff --git a/src/components/common/variables.scss b/src/components/common/variables.scss
index 18c3418a..4e65bf42 100644
--- a/src/components/common/variables.scss
+++ b/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;
diff --git a/src/components/gutters/CommentList.vue b/src/components/gutters/CommentList.vue
index 621a99c8..99da80a3 100644
--- a/src/components/gutters/CommentList.vue
+++ b/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;
diff --git a/src/components/gutters/CurrentDiscussion.vue b/src/components/gutters/CurrentDiscussion.vue
index 339181ec..a4d5a4a2 100644
--- a/src/components/gutters/CurrentDiscussion.vue
+++ b/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%);
+ }
}
}
diff --git a/src/components/menus/HistoryMenu.vue b/src/components/menus/HistoryMenu.vue
index 13e656d1..b0dbd316 100644
--- a/src/components/menus/HistoryMenu.vue
+++ b/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;
- }
+ 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;
- }
+ 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 {
diff --git a/static/landing/index.html b/static/landing/index.html
index 8a22f708..23e713b7 100644
--- a/static/landing/index.html
+++ b/static/landing/index.html
@@ -241,7 +241,7 @@