Add dark mode support (#26)

3 files changed, 242 insertions, 14 deletions

diff --git a/static/common.css b/static/common.css
new file mode 100644
index 0000000..2c9a188
--- /dev/null
+++ b/static/common.css
@@ -0,0 +1,41 @@
+/* This file contains design tokens used in core Gleam projects */
+:root {
+  /* Branding */
+  --faff-pink: #ffaff3;
+  --white: #fefefc;
+  --unnamed-blue: #a6f0fc;
+  --aged-plastic-yellow: #fffbe8;
+  --unexpected-aubergine: #584355;
+  --underwater-blue: #292d3e;
+  --charcoal: #2f2f2f;
+  --black: #1e1e1e;
+  --blacker: #151515;
+
+  /* Other greys */
+  --off-white: #f5f5f5;
+
+  /* Other colors */
+  --menthol: #c8ffa7;
+  --caramel: #ffd596;
+  --deep-saffron: #ff9d35;
+  --tomato: #ff6262;
+
+  /* Semantic colors */
+  --brand-success: var(--menthol);
+  --brand-warning: var(--caramel);
+  --brand-error: var(--tomato);
+
+  /* Light theme */
+  --light-theme-background: var(--white);
+  --light-theme-background-dim: var(--off-white);
+  --light-theme-text: var(--black);
+  --light-theme-text-secondary: var(--charcoal);
+  --light-theme-code: var(--black);
+
+  /* Dark theme */
+  --dark-theme-background: var(--underwater-blue);
+  --dark-theme-background-dim: var(--black);
+  --dark-theme-text: var(--white);
+  --dark-theme-text-secondary: var(--aged-plastic-yellow);
+  --dark-theme-code: var(--deep-saffron);
+}
diff --git a/static/index.js b/static/index.js
index 825a4b0..022082d 100644
--- a/static/index.js
+++ b/static/index.js
@@ -52,6 +52,7 @@ function appendOutput(content, className) {
 
 const editor = new CodeFlask("#editor-target", {
   language: "gleam",
+  defaultTheme: false
 });
 editor.addLanguage("gleam", prismGrammar);
 editor.updateCode(initialCode);
diff --git a/static/style.css b/static/style.css
index 53c071b..1881ea5 100644
--- a/static/style.css
+++ b/static/style.css
@@ -22,13 +22,34 @@
   --font-family-normal: "Outfit", sans-serif;
   --font-family-title: "Lexend", sans-serif;
 
-  --color-pink: #ffaff3;
-  --color-red: #ff6262;
-  --color-orange: #ffd596;
-  --color-green: #c8ffa7;
-
   --navbar-height: calc(calc(2 * var(--gap)) + 20px);
   --gap: 12px;
+
+  --color-navbar-background: var(--faff-pink);
+  --color-navbar-text: var(--light-theme-text);
+  --color-navbar-link: var(--light-theme-text);
+}
+
+html.theme-light {
+  --color-background: var(--light-theme-background);
+  --color-background-dim: var(--light-theme-background-dim);
+  --color-text: var(--light-theme-text);
+  --color-link: var(--light-theme-text);
+  --color-link-decoration: var(--faff-pink);
+  --color-code: var(--light-theme-code);
+  --color-divider: var(--faff-pink);
+  color-scheme: light;
+}
+
+html.theme-dark {
+  --color-background: var(--dark-theme-background);
+  --color-background-dim: var(--dark-theme-background-dim);
+  --color-text: var(--dark-theme-text);
+  --color-link: var(--dark-theme-text);
+  --color-link-decoration: var(--faff-pink);
+  --color-code: var(--dark-theme-code);
+  --color-divider: var(--unexpected-aubergine);
+  color-scheme: dark;
 }
 
 * {
@@ -41,12 +62,14 @@ body {
   height: 100vh;
   display: flex;
   flex-direction: column;
+  background-color: var(--color-background);
   font-family: var(--font-family-normal);
   letter-spacing: 0.01em;
   line-height: 1.3;
+  color: var(--color-text);
 }
 
-codeflask__textarea,
+.codeflask__textarea,
 pre,
 code {
   font-weight: normal;
@@ -55,7 +78,8 @@ code {
 
 p code {
   padding: 1px 2px;
-  background-color: #f5f5f5;
+  color: var(--color-code);
+  background-color: var(--color-background-dim);
 }
 
 h1,
@@ -74,7 +98,18 @@ h6 {
   align-items: center;
   height: var(--navbar-height);
   padding: var(--gap);
-  background-color: var(--color-pink);
+  background-color: var(--color-navbar-background);
+  color: var(--color-navbar-text);
+  box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.1)
+}
+
+a {
+  color: var(--color-link);
+  text-decoration-color: var(--color-link-decoration);
+}
+
+a code {
+  color: inherit;
 }
 
 .navbar .logo {
@@ -92,7 +127,35 @@ h6 {
 .navbar a:visited,
 .navbar a {
   text-decoration: none;
-  color: #000;
+  color: var(--color-navbar-link);
+}
+
+html.theme-dark .theme-button.-dark {
+  display: none;
+}
+
+html.theme-light .theme-button.-light {
+  display: none;
+}
+
+.theme-button {
+  appearance: none;
+  margin: 0;
+  border: 0;
+  padding: 0;
+  background: none;
+  color: inherit;
+  display: flex;
+  gap: 0.25em;
+  font-size: inherit;
+  color: inherit;
+}
+
+.theme-button svg {
+  display: inline-block;
+  fill: currentColor;
+  height: 1em;
+  width: 1em;
 }
 
 #left,
@@ -100,7 +163,7 @@ h6 {
 #editor {
   min-height: 200px;
   overflow-y: auto;
-  border-bottom: 2px solid var(--color-pink);
+  border-bottom: 2px solid var(--color-divider);
   margin: 0;
   overflow-wrap: break-word;
 }
@@ -131,7 +194,7 @@ h6 {
   }
 
   #left {
-    border-right: 2px solid var(--color-pink);
+    border-right: 2px solid var(--color-divider);
   }
 
   #right {
@@ -159,17 +222,18 @@ h6 {
 
 .error,
 .warning {
-  border: var(--gap) solid var(--border-color);
+  border-width: var(--gap);
+  border-style: solid;
   border-top: 0;
   border-bottom: 0;
 }
 
 .error {
-  --border-color: var(--color-red);
+  border-color: var(--brand-error);
 }
 
 .warning {
-  --border-color: var(--color-orange);
+  border-color: var(--brand-warning);
 }
 
 .prev-next {
@@ -187,3 +251,125 @@ h6 {
 .mb-0 {
   margin-bottom: 0;
 }
+
+
+/*
+ * CodeFlask editor themes based on the Atom One highlight.js theme used in Gleam package docs sites.
+ */
+
+.codeflask .codeflask__textarea {
+  color: var(--color-background); /* Prevents rendering artifacts in dark mode */
+  caret-color: var(--color-text); /* Makes the text input cursor visible in dark mode */
+}
+
+
+/* CodeFlask light theme */
+
+html.theme-light .codeflask {
+  background: var(--color-background);
+  color: var(--color-text);
+}
+
+html.theme-light .codeflask .token.punctuation {
+  color: #383a42;
+}
+
+html.theme-light .codeflask .token.keyword {
+  color: #a626a4;
+}
+
+html.theme-light .codeflask .token.operator {
+  color: #383a42;
+}
+
+html.theme-light .codeflask .token.string {
+  color: #50a14f;
+}
+
+html.theme-light .codeflask .token.comment {
+  color: #a0a1a7;
+}
+
+html.theme-light .codeflask .token.function {
+  color: #986801;
+}
+
+html.theme-light .codeflask .token.boolean {
+  color: #986801;
+}
+
+html.theme-light .codeflask .token.number {
+  color: #986801;
+}
+
+html.theme-light .codeflask .token.selector {
+  color: #986801;
+}
+
+html.theme-light .codeflask .token.property {
+  color: #986801;
+}
+
+html.theme-light .codeflask .token.tag {
+  color: #383a42;
+}
+
+html.theme-light .codeflask .token.attr-value {
+  color: #383a42;
+}
+
+
+/* CodeFlask dark theme */
+
+html.theme-dark .codeflask {
+  background: var(--color-background);
+  color: #d19a66;
+}
+
+html.theme-dark .codeflask .token.punctuation {
+  color: #abb2bf
+}
+
+html.theme-dark .codeflask .token.keyword {
+  color: #c678dd;
+}
+
+html.theme-dark .codeflask .token.operator {
+  color: #abb2bf;
+}
+
+html.theme-dark .codeflask .token.string {
+  color: #98c379;
+}
+
+html.theme-dark .codeflask .token.comment {
+  color: #5c6370;
+}
+
+html.theme-dark .codeflask .token.function {
+  color: #61aeee;
+}
+
+html.theme-dark .codeflask .token.boolean {
+  color: #61aeee;
+}
+
+html.theme-dark .codeflask .token.number {
+  color: #d19a66;
+}
+
+html.theme-dark .codeflask .token.selector {
+  color: #d19a66;
+}
+
+html.theme-dark .codeflask .token.property {
+  color: #d19a66;
+}
+
+html.theme-dark .codeflask .token.tag {
+  color: #abb2bf;
+}
+
+html.theme-dark .codeflask .token.attr-value {
+  color: #abb2bf;
+}