1 files changed, 200 insertions, 14 deletions

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;
+}