feat: dark mode (#3236)

speced · Mar 6, 2024 · 031abec · 031abec
1 parent a2e5b7d
commit 031abec
Show file tree

Hide file tree

Showing 15 changed files with 196 additions and 53 deletions.
diff --git a/src/styles/algorithms.css.js b/src/styles/algorithms.css.js
@@ -4,9 +4,29 @@ const css = String.raw;
 // Prettier ignore only to keep code indented from level 0.
 // prettier-ignore
 export default css`
+:root {
+  --assertion-border: #aaa;
+  --assertion-bg: #eee;
+  --assertion-text: black;
+}
+
 .assert {
-  background: #eee;
   border-left: 0.5em solid #aaa;
   padding: 0.3em;
+  border-color: #aaa;
+  border-color: var(--assertion-border);
+  background: #eee;
+  background: var(--assertion-bg);
+  color: black;
+  color: var(--assertion-text);
+}
+
+/* There's no way to adapt this to "manual" theme toggle yet. */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --assertion-border: #444;
+    --assertion-bg: var(--borderedblock-bg);
+    --assertion-text: var(--text);
+  }
 }
 `;
diff --git a/src/styles/caniuse.css.js b/src/styles/caniuse.css.js
@@ -40,7 +40,7 @@ export default css`
 }
 
 .caniuse-type span {
-  background-color: white;
+  background-color: var(--bg, white);
   padding: 0 0.4em;
 }
 
@@ -73,6 +73,7 @@ export default css`
 
 img.caniuse-browser {
   filter: drop-shadow(0px 0px .1cm #666666);
+  background: transparent;
 }
 
 .caniuse-cell span.browser-version {

diff --git a/src/styles/datatype.css.js b/src/styles/datatype.css.js
@@ -25,14 +25,14 @@ var[data-type]::before {
   border-width: 4px 6px 0 6px;
   border-style: solid;
   border-color: transparent;
-  border-top-color: #000;
+  border-top-color: #222;
 }
 
 /* actual text */
 var[data-type]::after {
   content: attr(data-type);
   transform: translateX(-50%) translateY(-100%);
-  background: #000;
+  background: #222;
   text-align: center;
   /* additional styling */
   font-family: "Dank Mono", "Fira Code", monospace;

diff --git a/src/styles/dfn-panel.css.js b/src/styles/dfn-panel.css.js
@@ -22,9 +22,13 @@ dfn {
   font-family: "Helvetica Neue", sans-serif;
   font-size: small;
   background: #fff;
+  background: var(--indextable-hover-bg, #fff);
   color: black;
+  color: var(--text, black);
   box-shadow: 0 1em 3em -0.4em rgba(0, 0, 0, 0.3),
     0 0 1px 1px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 1em 3em -0.4em var(--tocsidebar-shadow, rgba(0, 0, 0, 0.3)),
+    0 0 1px 1px var(--tocsidebar-shadow, rgba(0, 0, 0, 0.05));
   border-radius: 2px;
 }
 /* Triangle/caret */
@@ -39,10 +43,13 @@ dfn {
   border: 10px solid transparent;
   border-top: 0;
   border-bottom: 10px solid #fff;
+  border-bottom-color: var(--indextable-hover-bg, #fff);
   top: 0;
 }
 .dfn-panel:not(.docked) > .caret::before {
   border-bottom: 9px solid #a2a9b1;
+  /* TODO: need slightly darker shade */
+  border-bottom-color: var(--indextable-hover-bg, #a2a9b1);
 }
 
 .dfn-panel * {
@@ -52,11 +59,13 @@ dfn {
 .dfn-panel b {
   display: block;
   color: #000;
+  color: var(--text, #000);
   margin-top: 0.25em;
 }
 
 .dfn-panel ul a[href] {
   color: #333;
+  color: var(--text, #333);
 }
 
 .dfn-panel > div {

diff --git a/src/styles/examples.css.js b/src/styles/examples.css.js
@@ -24,21 +24,9 @@ div.illegal-example p {
   color: black;
 }
 
-:is(aside,div).example {
-  border-left-width: 0.5em;
-  border-left-style: solid;
-  border-color: #e0cb52;
-  background: #fcfaee;
-}
-
 aside.example div.example {
   border-left-width: 0.1em;
   border-color: #999;
   background: #fff;
 }
-
-
-.example pre {
-  background-color: rgba(0, 0, 0, 0.03);
-}
 `;
diff --git a/src/styles/highlight.css.js b/src/styles/highlight.css.js
@@ -1,43 +1,69 @@
 /*
-Adapted from Atom One Light by Daniel Gamage for ReSpec, with better color contrast
+One Light for ReSpec, with better color contrast
+Adapted from Atom One Light by Daniel Gamage (https://github.com/highlightjs/highlight.js/blob/c0b6ddbaaf7/src/styles/atom-one-light.css>
 Original One Light Syntax theme from https://github.com/atom/one-light-syntax
-base:    #fafafa
-mono-1:  #383a42
-mono-2:  #686b77
-mono-3:  #a0a1a7
-hue-1:   #0184bb
-hue-2:   #4078f2
-hue-3:   #a626a4
-hue-4:   #50a14f
-hue-5:   #e45649
-hue-5-2: #c91243
-hue-6:   #986801
-hue-6-2: #c18401
 */
 
 const css = String.raw;
 
 // Prettier ignore only to keep code indented from level 0.
 // prettier-ignore
 export default css`
+.hljs {
+  --base: #fafafa;
+  --mono-1: #383a42;
+  --mono-2: #686b77;
+  --mono-3: #717277;
+  --hue-1: #0b76c5;
+  --hue-2: #336ae3;
+  --hue-3: #a626a4;
+  --hue-4: #42803c;
+  --hue-5: #ca4706;
+  --hue-5-2: #c91243;
+  --hue-6: #986801;
+  --hue-6-2: #9a6a01;
+}
+
+/* There's no way to adapt this to "manual" theme toggle yet. */
+@media (prefers-color-scheme: dark) {
+  .hljs {
+    --base: #282c34;
+    --mono-1: #abb2bf;
+    --mono-2: #818896;
+    --mono-3: #5c6370;
+    --hue-1: #56b6c2;
+    --hue-2: #61aeee;
+    --hue-3: #c678dd;
+    --hue-4: #98c379;
+    --hue-5: #e06c75;
+    --hue-5-2: #be5046;
+    --hue-6: #d19a66;
+    --hue-6-2: #e6c07b;
+  }
+}
+
 .hljs {
   display: block;
   overflow-x: auto;
   padding: 0.5em;
   color: #383a42;
+  color: var(--mono-1, #383a42);
   background: #fafafa;
+  background: var(--base, #fafafa);
 }
 
 .hljs-comment,
 .hljs-quote {
   color: #717277;
+  color: var(--mono-3, #717277);
   font-style: italic;
 }
 
 .hljs-doctag,
 .hljs-keyword,
 .hljs-formula {
   color: #a626a4;
+  color: var(--hue-3, #a626a4);
 }
 
 .hljs-section,
@@ -46,11 +72,13 @@ export default css`
 .hljs-deletion,
 .hljs-subst {
   color: #ca4706;
+  color: var(--hue-5, #ca4706);
   font-weight: bold;
 }
 
 .hljs-literal {
   color: #0b76c5;
+  color: var(--hue-1, #0b76c5);
 }
 
 .hljs-string,
@@ -59,11 +87,13 @@ export default css`
 .hljs-attribute,
 .hljs-meta-string {
   color: #42803c;
+  color: var(--hue-4, #42803c);
 }
 
 .hljs-built_in,
 .hljs-class .hljs-title {
   color: #9a6a01;
+  color: var(--hue-6-2, #9a6a01);
 }
 
 .hljs-attr,
@@ -75,6 +105,7 @@ export default css`
 .hljs-selector-pseudo,
 .hljs-number {
   color: #986801;
+  color: var(--hue-6, #986801);
 }
 
 .hljs-symbol,
@@ -84,6 +115,7 @@ export default css`
 .hljs-selector-id,
 .hljs-title {
   color: #336ae3;
+  color: var(--hue-2, #336ae3);
 }
 
 .hljs-emphasis {

diff --git a/src/styles/issues-notes.css.js b/src/styles/issues-notes.css.js
@@ -31,9 +31,13 @@ span.warning {
 
 .warning {
   border-color: #f11;
+  border-color: var(--warning-border, #f11);
   border-width: 0.2em;
   border-style: solid;
   background: #fbe9e9;
+  background: var(--warning-bg, #fbe9e9);
+  color: black;
+  color: var(--text, black);
 }
 
 .warning-title:before {

diff --git a/src/styles/mdn-annotation.css.js b/src/styles/mdn-annotation.css.js
@@ -25,8 +25,15 @@ export default css`
   min-width: 25ch;
   max-width: 32ch;
   background: #fff;
-  box-shadow: 0 1em 3em -0.4em rgba(0, 0, 0, 0.3),
+  background: var(--indextable-hover-bg, #fff);
+  color: black;
+  color: var(--indextable-hover-text, black);
+  box-shadow:
+    0 1em 3em -0.4em rgba(0, 0, 0, 0.3),
     0 0 1px 1px rgba(0, 0, 0, 0.05);
+  box-shadow:
+    0 1em 3em -0.4em var(--tocsidebar-shadow, rgba(0, 0, 0, 0.3)),
+    0 0 1px 1px var(--tocsidebar-shadow, rgba(0, 0, 0, 0.05));
   border-radius: 2px;
   z-index: 11;
   margin-bottom: 0.4em;
@@ -41,7 +48,9 @@ export default css`
 .mdn summary span {
   font-family: zillaslab, Palatino, "Palatino Linotype", serif;
   color: #fff;
+  color: var(--bg, #fff);
   background-color: #000;
+  background-color: var(--text, #000);
   display: inline-block;
   padding: 3px;
 }

diff --git a/src/styles/respec.css.js b/src/styles/respec.css.js
@@ -86,11 +86,6 @@ a[href].orcid > svg {
   text-decoration: none;
 }
 
-a .secno,
-a .figno {
-  color: #000;
-}
-
 ul.tof,
 ol.tof {
   list-style: none outside none;