From 01e9ec8d56d6d22e3c3e7d6b47958ae908b71a2d Mon Sep 17 00:00:00 2001
From: Steve Landey <steve@steveasleep.com>
Date: Sun, 14 Jul 2024 15:44:36 -0700
Subject: [PATCH 1/3] Move CSS properties closer to their components, or inline

Less indirection between components and their colors.

If a variable is only used once, inline it.
---
 silicon/static/css/colors-light.css | 28 ---------------
 silicon/static/css/edit.css         |  4 +--
 silicon/static/css/history.css      | 10 +++---
 silicon/static/css/layout.css       | 50 ++++++++++++++++++++------
 silicon/static/css/main.css         | 56 ++++++++++++++++++++---------
 silicon/static/css/search.css       |  4 +--
 silicon/templates/edit.html.j2      |  1 -
 7 files changed, 87 insertions(+), 66 deletions(-)

diff --git a/silicon/static/css/colors-light.css b/silicon/static/css/colors-light.css
index 092d41f..ae03b3c 100644
--- a/silicon/static/css/colors-light.css
+++ b/silicon/static/css/colors-light.css
@@ -36,32 +36,4 @@
 
     --color-border-weak: var(--c-gray7);
     --color-border-strong: var(--c-gray5);
-
-    /* Color values in components */
-
-    --nav-background: var(--color-bg-strong);
-    --nav-text: var(--color-fg-text);
-    --nav-title-background: var(--color-invert-bg-strong);
-    --nav-title-text: var(--color-bg-weak);
-    --nav-page-links: var(--color-bg-link);
-    --nav-text: var(--color-fg-text-weak);
-    --nav-button-background: var(--c-blue-light);
-    --nav-button-background-hover: var(--color-bg-link-hover);
-    --nav-button-text: var(--color-invert-fg-text);
-    --nav-alert-background: var(--color-bg-error);
-    --nav-alert-text: var(--color-bg-weak);
-
-    --article-background: var(--color-bg-weak);
-    --article-code-text: var(--color-fg-text);
-    --article-pre-background: var(--color-bg-weak2);
-    --article-pre-text: var(--color-fg-text);
-    --article-pre-border: var(--color-border-weak);
-    --article-table-border: var(--color-border-weak);
-    --article-table-stripe: var(--color-bg-weak2);
-    --article-table-hover: var(--nav-background);
-    --article-header-underline: var(--color-border-strong);
-    --article-internal-link: var(--color-fg-link-internal);
-    --article-external-link: var(--color-fg-link-external);
-    --article-external-link-visited: var(--color-fg-link-visited);
-    --article-warning-text: var(--color-fg-error);
 }
diff --git a/silicon/static/css/edit.css b/silicon/static/css/edit.css
index 8bf1879..e5e8f78 100644
--- a/silicon/static/css/edit.css
+++ b/silicon/static/css/edit.css
@@ -14,8 +14,8 @@
 }
 
 #alerts {
-    background: var(--nav-alert-background);
-    color: var(--nav-alert-text);
+    background: var(--color-bg-weak);
+    color: var(--color-fg-error);
     margin: 1em;
 }
 
diff --git a/silicon/static/css/history.css b/silicon/static/css/history.css
index cec87ff..d09721f 100644
--- a/silicon/static/css/history.css
+++ b/silicon/static/css/history.css
@@ -3,7 +3,7 @@
 }
 
 #revisions a {
-    color: var(--nav-page-links);
+    color: var(--color-bg-link);
 }
 
 #current-revision {
@@ -12,14 +12,14 @@
 
 #current-revision a::before {
     content: "🡆 ";
-    color: var(--nav-text);
+    color: var(--color-fg-text-weak);
     font-weight: normal;
 }
 
 #revision-notice {
-    color: var(--article-warning-text);
-    background-color: var(--article-pre-background);
-    border: 1px solid var(--article-pre-border);
+    color: var(--color-fg-error);
+    background-color: var(--color-bg-weak2);
+    border: 1px solid var(--color-border-weak);
     border-radius: 0.5em;
     margin-top: 1em;
     margin-bottom: 0.5em;
diff --git a/silicon/static/css/layout.css b/silicon/static/css/layout.css
index e7ba087..0d05ef9 100644
--- a/silicon/static/css/layout.css
+++ b/silicon/static/css/layout.css
@@ -1,3 +1,16 @@
+:root {
+    --nav-text: var(--color-fg-text-weak);
+    --nav-background: var(--color-bg-strong);
+    --nav-button-text: var(--color-invert-fg-text);
+    --nav-button-background: var(--c-blue-light);
+    --nav-button-background-hover: var(--color-bg-link-hover);
+
+    --nav-title-text: var(--color-bg-weak);
+    --nav-title-background: var(--color-invert-bg-strong);
+
+    --nav-page-links: var(--color-bg-link);
+}
+
 .grid-for-nav {
     position: absolute;
     width: 100%;
@@ -118,11 +131,21 @@
     list-style-type: decimal;
     padding-left: 2em;
 }
-#toc ol ol { list-style-type: upper-alpha; }
-#toc ol ol ol { list-style-type: upper-roman; }
-#toc ol ol ol ol { list-style-type: lower-alpha; }
-#toc ol ol ol ol ol { list-style-type: lower-roman; }
-#toc ol ol ol ol ol ol { list-style-type: lower-greek; }
+#toc ol ol {
+    list-style-type: upper-alpha;
+}
+#toc ol ol ol {
+    list-style-type: upper-roman;
+}
+#toc ol ol ol ol {
+    list-style-type: lower-alpha;
+}
+#toc ol ol ol ol ol {
+    list-style-type: lower-roman;
+}
+#toc ol ol ol ol ol ol {
+    list-style-type: lower-greek;
+}
 
 .nav-bottom {
     display: block;
@@ -153,7 +176,8 @@
     margin: 0.5em;
 }
 
-.nav-button, .menu-toggle {
+.nav-button,
+.menu-toggle {
     background: var(--nav-button-background);
     color: var(--nav-button-text);
     font-size: 14px;
@@ -168,7 +192,8 @@
     padding-right: 2em;
 }
 
-.nav-button:hover, .menu-toggle:hover {
+.nav-button:hover,
+.menu-toggle:hover {
     background: var(--nav-button-background-hover);
     text-decoration: none;
 }
@@ -198,10 +223,11 @@
 }
 
 .del-relation-btn {
-    color: var(--nav-alert-background);
+    color: var(--color-bg-error);
 }
 
-.widget-title-btn:hover, .del-relation-btn:hover {
+.widget-title-btn:hover,
+.del-relation-btn:hover {
     text-decoration: underline;
     cursor: pointer;
 }
@@ -219,7 +245,8 @@
         clear: both;
     }
 
-    .nav-top::after, .nav-top::before {
+    .nav-top::after,
+    .nav-top::before {
         display: table;
         content: "";
     }
@@ -255,7 +282,8 @@
         width: auto;
     }
 
-    .nav-page-title, .nav-bottom {
+    .nav-page-title,
+    .nav-bottom {
         display: none;
     }
 
diff --git a/silicon/static/css/main.css b/silicon/static/css/main.css
index b88c0b7..346197f 100644
--- a/silicon/static/css/main.css
+++ b/silicon/static/css/main.css
@@ -1,3 +1,9 @@
+:root {
+    --article-pre-background: var(--color-bg-weak2);
+    --article-table-border: var(--color-border-weak);
+    --article-header-underline: var(--color-border-strong);
+}
+
 * {
     box-sizing: border-box;
 }
@@ -8,7 +14,8 @@ html {
     box-sizing: border-box;
 }
 
-body, html {
+body,
+html {
     overflow-x: hidden;
     line-height: 1.4;
 }
@@ -19,7 +26,9 @@ body {
     font-family: sans-serif;
 }
 
-article, nav, section {
+article,
+nav,
+section {
     display: block;
 }
 
@@ -32,12 +41,12 @@ a:hover {
 }
 
 a.internal-link {
-    color: var(--article-internal-link);
+    color: var(--color-fg-link-internal);
     text-decoration: none;
 }
 
 a.internal-link:visited {
-    color: var(--article-internal-link);
+    color: var(--color-fg-link-internal);
 }
 
 a.internal-link:hover {
@@ -45,14 +54,19 @@ a.internal-link:hover {
 }
 
 article a {
-    color: var(--article-external-link);
+    color: var(--color-fg-link-external);
 }
 
 article a:visited {
-    color: var(--article-external-link-visited);
+    color: var(--color-fg-link-visited);
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
     margin-top: 0.5em;
     margin-bottom: 0.5em;
     font-weight: normal;
@@ -64,10 +78,18 @@ h1 {
     border-bottom: 1px solid var(--article-header-underline);
 }
 
-h2 { font-size: 1.5rem; }
-h3 { font-size: 1.35rem; }
-h4 { font-size: 1.20rem; }
-h5 { font-size: 1.05rem; }
+h2 {
+    font-size: 1.5rem;
+}
+h3 {
+    font-size: 1.35rem;
+}
+h4 {
+    font-size: 1.2rem;
+}
+h5 {
+    font-size: 1.05rem;
+}
 
 h6 {
     font-size: 1rem;
@@ -82,13 +104,13 @@ blockquote {
 }
 
 code {
-    color: var(--article-code-text);
+    color: var(--color-fg-text);
     background-color: var(--article-pre-background);
 }
 
 pre {
     background-color: var(--article-pre-background);
-    border: 1px solid var(--article-pre-border);
+    border: 1px solid var(--color-border-weak);
     border-radius: 0.5em;
     margin-bottom: 0.5em;
     padding: 0.5em;
@@ -96,7 +118,7 @@ pre {
 }
 
 pre code {
-    color: var(--article-pre-text);
+    color: var(--color-fg-text);
     background-color: var(--article-pre-background);
 }
 
@@ -110,7 +132,7 @@ article table th {
     font-weight: bold;
     border: 1px solid var(--article-table-border);
     padding: 0.25em;
-    background: var(--article-background);
+    background: var(--color-bg-weak);
 }
 
 article table td {
@@ -119,11 +141,11 @@ article table td {
 }
 
 article table tr:hover {
-    background: var(--article-table-hover);
+    background: var(--color-bg-strong);
 }
 
 article table tr:nth-child(odd) {
-    background: var(--article-table-stripe);
+    background: var(--color-bg-weak2);
 }
 
 article dl dt {
diff --git a/silicon/static/css/search.css b/silicon/static/css/search.css
index 056ede1..d5c6aab 100644
--- a/silicon/static/css/search.css
+++ b/silicon/static/css/search.css
@@ -7,6 +7,6 @@
 }
 
 #search-tips code {
-    color: var(--nav-text);
-    background: var(--nav-title-text);
+    color: var(--color-fg-text-weak);
+    background: var(--color-bg-weak);
 }
diff --git a/silicon/templates/edit.html.j2 b/silicon/templates/edit.html.j2
index cab1002..cbe05ce 100644
--- a/silicon/templates/edit.html.j2
+++ b/silicon/templates/edit.html.j2
@@ -39,7 +39,6 @@
           <li class="alert">{{ message }}</li>
           {% endfor %}
         </ul>
-      </span>
       {% endif %}
     {% endwith %}
   </div>

From e1844316389f4409ea0b1f547c16106b13d38c9f Mon Sep 17 00:00:00 2001
From: Steve Landey <steve@steveasleep.com>
Date: Sun, 14 Jul 2024 16:06:32 -0700
Subject: [PATCH 2/3] Dark mode (everything but editor)

Use these fancy new design tokens to implement dark mode. Colors are very roughly chosen.
---
 silicon/static/css/colors-light.css | 36 +++++++++++++++++++++++++++++
 silicon/static/css/layout.css       |  5 ++--
 silicon/static/css/main.css         |  2 ++
 3 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/silicon/static/css/colors-light.css b/silicon/static/css/colors-light.css
index ae03b3c..b5361dd 100644
--- a/silicon/static/css/colors-light.css
+++ b/silicon/static/css/colors-light.css
@@ -9,12 +9,25 @@
     --c-gray2: rgb(52, 58, 64);
     --c-gray0: black;
 
+    --c-invert-gray10: black;
+    --c-invert-gray9: rgb(32, 32, 33);
+    --c-invert-gray8: rgb(50, 49, 49);
+    --c-invert-gray7: rgb(69, 69, 69);
+    --c-invert-gray5: rgb(128, 128, 128);
+    --c-invert-gray4: rgb(147, 147, 147);
+    --c-invert-gray2: rgb(153, 168, 184);
+    --c-invert-gray0: white;
+
     --c-blue-light: rgba(51, 122, 183);
+    --c-invert-blue-light: rgb(72, 145, 209);
     --c-blue-light-translucent: rgba(51, 122, 183, 0.75);
+    --c-invert-blue-light-translucent: rgba(72, 145, 209, 0.85);
     --c-red: rgb(183, 52, 52);
     --c-green: rgb(45, 169, 74);
     --c-blue: rgb(0, 0, 238);
+    --c-invert-blue: rgb(106, 106, 235);
     --c-purple: rgb(85, 26, 139);
+    --c-invert-purple: rgb(140, 73, 202);
 
     /* Color tokens */
 
@@ -37,3 +50,26 @@
     --color-border-weak: var(--c-gray7);
     --color-border-strong: var(--c-gray5);
 }
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --color-bg-weak: var(--c-invert-gray10);
+        --color-bg-weak2: var(--c-invert-gray9);
+        --color-bg-strong: var(--c-invert-gray8);
+        --color-invert-bg-strong: var(--c-invert-gray2);
+        --color-fg-error: var(--c-red);
+
+        --color-fg-text: var(--c-invert-gray0);
+        --color-invert-fg-text: var(--c-invert-gray10);
+        --color-fg-text-weak: var(--c-invert-gray4);
+
+        --color-fg-link-external: var(--c-invert-blue);
+        --color-fg-link-internal: var(--c-green);
+        --color-fg-link-visited: var(--c-invert-purple);
+        --color-bg-link: var(--c-invert-blue-light);
+        --color-bg-link-hover: var(--c-invert-blue-light-translucent);
+
+        --color-border-weak: var(--c-invert-gray7);
+        --color-border-strong: var(--c-invert-gray5);
+    }
+}
diff --git a/silicon/static/css/layout.css b/silicon/static/css/layout.css
index 0d05ef9..86f1e07 100644
--- a/silicon/static/css/layout.css
+++ b/silicon/static/css/layout.css
@@ -5,8 +5,9 @@
     --nav-button-background: var(--c-blue-light);
     --nav-button-background-hover: var(--color-bg-link-hover);
 
-    --nav-title-text: var(--color-bg-weak);
-    --nav-title-background: var(--color-invert-bg-strong);
+    /* Don't use dark mode colors on title, it's always dark */
+    --nav-title-text: var(--c-gray10);
+    --nav-title-background: var(--c-gray2);
 
     --nav-page-links: var(--color-bg-link);
 }
diff --git a/silicon/static/css/main.css b/silicon/static/css/main.css
index 346197f..74726ba 100644
--- a/silicon/static/css/main.css
+++ b/silicon/static/css/main.css
@@ -24,6 +24,8 @@ body {
     margin: 0;
     min-height: 100%;
     font-family: sans-serif;
+    background-color: var(--color-bg-weak);
+    color: var(--color-fg-text);
 }
 
 article,

From d88309c19840a88ab471ca24e9b76cd719910bcb Mon Sep 17 00:00:00 2001
From: Steve Landey <steve@steveasleep.com>
Date: Sat, 20 Jul 2024 09:21:31 -0700
Subject: [PATCH 3/3] Pygments dark theme; lighter dark bg color

---
 .../css/{colors-light.css => colors.css}      |   6 +-
 silicon/static/css/pygments.css               | 554 +++++++++++++++---
 silicon/templates/base.html.j2                |   2 +-
 3 files changed, 488 insertions(+), 74 deletions(-)
 rename silicon/static/css/{colors-light.css => colors.css} (94%)

diff --git a/silicon/static/css/colors-light.css b/silicon/static/css/colors.css
similarity index 94%
rename from silicon/static/css/colors-light.css
rename to silicon/static/css/colors.css
index b5361dd..9449ba9 100644
--- a/silicon/static/css/colors-light.css
+++ b/silicon/static/css/colors.css
@@ -16,7 +16,7 @@
     --c-invert-gray5: rgb(128, 128, 128);
     --c-invert-gray4: rgb(147, 147, 147);
     --c-invert-gray2: rgb(153, 168, 184);
-    --c-invert-gray0: white;
+    --c-invert-gray0: rgb(239, 239, 239);
 
     --c-blue-light: rgba(51, 122, 183);
     --c-invert-blue-light: rgb(72, 145, 209);
@@ -53,8 +53,8 @@
 
 @media (prefers-color-scheme: dark) {
     :root {
-        --color-bg-weak: var(--c-invert-gray10);
-        --color-bg-weak2: var(--c-invert-gray9);
+        --color-bg-weak: var(--c-invert-gray9);
+        --color-bg-weak2: var(--c-invert-gray8);
         --color-bg-strong: var(--c-invert-gray8);
         --color-invert-bg-strong: var(--c-invert-gray2);
         --color-fg-error: var(--c-red);
diff --git a/silicon/static/css/pygments.css b/silicon/static/css/pygments.css
index 88b00ff..5ac7e57 100644
--- a/silicon/static/css/pygments.css
+++ b/silicon/static/css/pygments.css
@@ -1,71 +1,485 @@
-/* generated with `pygmentize -S default -f html -a .highlight > pygments.css` */
+/* generated with `pygmentize -S default -f html -a .highlight > pygments.css` and then manually tweaked */
 
-.highlight .hll { background-color: #ffffcc }
-.highlight  { background: #f8f8f8; }
-.highlight .c { color: #408080; font-style: italic } /* Comment */
-.highlight .err { border: 1px solid #FF0000 } /* Error */
-.highlight .k { color: #008000; font-weight: bold } /* Keyword */
-.highlight .o { color: #666666 } /* Operator */
-.highlight .ch { color: #408080; font-style: italic } /* Comment.Hashbang */
-.highlight .cm { color: #408080; font-style: italic } /* Comment.Multiline */
-.highlight .cp { color: #BC7A00 } /* Comment.Preproc */
-.highlight .cpf { color: #408080; font-style: italic } /* Comment.PreprocFile */
-.highlight .c1 { color: #408080; font-style: italic } /* Comment.Single */
-.highlight .cs { color: #408080; font-style: italic } /* Comment.Special */
-.highlight .gd { color: #A00000 } /* Generic.Deleted */
-.highlight .ge { font-style: italic } /* Generic.Emph */
-.highlight .gr { color: #FF0000 } /* Generic.Error */
-.highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */
-.highlight .gi { color: #00A000 } /* Generic.Inserted */
-.highlight .go { color: #888888 } /* Generic.Output */
-.highlight .gp { color: #000080; font-weight: bold } /* Generic.Prompt */
-.highlight .gs { font-weight: bold } /* Generic.Strong */
-.highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
-.highlight .gt { color: #0044DD } /* Generic.Traceback */
-.highlight .kc { color: #008000; font-weight: bold } /* Keyword.Constant */
-.highlight .kd { color: #008000; font-weight: bold } /* Keyword.Declaration */
-.highlight .kn { color: #008000; font-weight: bold } /* Keyword.Namespace */
-.highlight .kp { color: #008000 } /* Keyword.Pseudo */
-.highlight .kr { color: #008000; font-weight: bold } /* Keyword.Reserved */
-.highlight .kt { color: #B00040 } /* Keyword.Type */
-.highlight .m { color: #666666 } /* Literal.Number */
-.highlight .s { color: #BA2121 } /* Literal.String */
-.highlight .na { color: #7D9029 } /* Name.Attribute */
-.highlight .nb { color: #008000 } /* Name.Builtin */
-.highlight .nc { color: #0000FF; font-weight: bold } /* Name.Class */
-.highlight .no { color: #880000 } /* Name.Constant */
-.highlight .nd { color: #AA22FF } /* Name.Decorator */
-.highlight .ni { color: #999999; font-weight: bold } /* Name.Entity */
-.highlight .ne { color: #D2413A; font-weight: bold } /* Name.Exception */
-.highlight .nf { color: #0000FF } /* Name.Function */
-.highlight .nl { color: #A0A000 } /* Name.Label */
-.highlight .nn { color: #0000FF; font-weight: bold } /* Name.Namespace */
-.highlight .nt { color: #008000; font-weight: bold } /* Name.Tag */
-.highlight .nv { color: #19177C } /* Name.Variable */
-.highlight .ow { color: #AA22FF; font-weight: bold } /* Operator.Word */
-.highlight .w { color: #bbbbbb } /* Text.Whitespace */
-.highlight .mb { color: #666666 } /* Literal.Number.Bin */
-.highlight .mf { color: #666666 } /* Literal.Number.Float */
-.highlight .mh { color: #666666 } /* Literal.Number.Hex */
-.highlight .mi { color: #666666 } /* Literal.Number.Integer */
-.highlight .mo { color: #666666 } /* Literal.Number.Oct */
-.highlight .sa { color: #BA2121 } /* Literal.String.Affix */
-.highlight .sb { color: #BA2121 } /* Literal.String.Backtick */
-.highlight .sc { color: #BA2121 } /* Literal.String.Char */
-.highlight .dl { color: #BA2121 } /* Literal.String.Delimiter */
-.highlight .sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */
-.highlight .s2 { color: #BA2121 } /* Literal.String.Double */
-.highlight .se { color: #BB6622; font-weight: bold } /* Literal.String.Escape */
-.highlight .sh { color: #BA2121 } /* Literal.String.Heredoc */
-.highlight .si { color: #BB6688; font-weight: bold } /* Literal.String.Interpol */
-.highlight .sx { color: #008000 } /* Literal.String.Other */
-.highlight .sr { color: #BB6688 } /* Literal.String.Regex */
-.highlight .s1 { color: #BA2121 } /* Literal.String.Single */
-.highlight .ss { color: #19177C } /* Literal.String.Symbol */
-.highlight .bp { color: #008000 } /* Name.Builtin.Pseudo */
-.highlight .fm { color: #0000FF } /* Name.Function.Magic */
-.highlight .vc { color: #19177C } /* Name.Variable.Class */
-.highlight .vg { color: #19177C } /* Name.Variable.Global */
-.highlight .vi { color: #19177C } /* Name.Variable.Instance */
-.highlight .vm { color: #19177C } /* Name.Variable.Magic */
-.highlight .il { color: #666666 } /* Literal.Number.Integer.Long */
+/* match corner radius of <pre> */
+.highlight {
+    border-radius: 0.5em;
+}
+
+.highlight .hll {
+    background-color: #ffffcc;
+}
+.highlight {
+    background: #f8f8f8;
+}
+.highlight .c {
+    color: #408080;
+    font-style: italic;
+} /* Comment */
+.highlight .err {
+    border: 1px solid #ff0000;
+} /* Error */
+.highlight .k {
+    color: #008000;
+    font-weight: bold;
+} /* Keyword */
+.highlight .o {
+    color: #666666;
+} /* Operator */
+.highlight .ch {
+    color: #408080;
+    font-style: italic;
+} /* Comment.Hashbang */
+.highlight .cm {
+    color: #408080;
+    font-style: italic;
+} /* Comment.Multiline */
+.highlight .cp {
+    color: #bc7a00;
+} /* Comment.Preproc */
+.highlight .cpf {
+    color: #408080;
+    font-style: italic;
+} /* Comment.PreprocFile */
+.highlight .c1 {
+    color: #408080;
+    font-style: italic;
+} /* Comment.Single */
+.highlight .cs {
+    color: #408080;
+    font-style: italic;
+} /* Comment.Special */
+.highlight .gd {
+    color: #a00000;
+} /* Generic.Deleted */
+.highlight .ge {
+    font-style: italic;
+} /* Generic.Emph */
+.highlight .gr {
+    color: #ff0000;
+} /* Generic.Error */
+.highlight .gh {
+    color: #000080;
+    font-weight: bold;
+} /* Generic.Heading */
+.highlight .gi {
+    color: #00a000;
+} /* Generic.Inserted */
+.highlight .go {
+    color: #888888;
+} /* Generic.Output */
+.highlight .gp {
+    color: #000080;
+    font-weight: bold;
+} /* Generic.Prompt */
+.highlight .gs {
+    font-weight: bold;
+} /* Generic.Strong */
+.highlight .gu {
+    color: #800080;
+    font-weight: bold;
+} /* Generic.Subheading */
+.highlight .gt {
+    color: #0044dd;
+} /* Generic.Traceback */
+.highlight .kc {
+    color: #008000;
+    font-weight: bold;
+} /* Keyword.Constant */
+.highlight .kd {
+    color: #008000;
+    font-weight: bold;
+} /* Keyword.Declaration */
+.highlight .kn {
+    color: #008000;
+    font-weight: bold;
+} /* Keyword.Namespace */
+.highlight .kp {
+    color: #008000;
+} /* Keyword.Pseudo */
+.highlight .kr {
+    color: #008000;
+    font-weight: bold;
+} /* Keyword.Reserved */
+.highlight .kt {
+    color: #b00040;
+} /* Keyword.Type */
+.highlight .m {
+    color: #666666;
+} /* Literal.Number */
+.highlight .s {
+    color: #ba2121;
+} /* Literal.String */
+.highlight .na {
+    color: #7d9029;
+} /* Name.Attribute */
+.highlight .nb {
+    color: #008000;
+} /* Name.Builtin */
+.highlight .nc {
+    color: #0000ff;
+    font-weight: bold;
+} /* Name.Class */
+.highlight .no {
+    color: #880000;
+} /* Name.Constant */
+.highlight .nd {
+    color: #aa22ff;
+} /* Name.Decorator */
+.highlight .ni {
+    color: #999999;
+    font-weight: bold;
+} /* Name.Entity */
+.highlight .ne {
+    color: #d2413a;
+    font-weight: bold;
+} /* Name.Exception */
+.highlight .nf {
+    color: #0000ff;
+} /* Name.Function */
+.highlight .nl {
+    color: #a0a000;
+} /* Name.Label */
+.highlight .nn {
+    color: #0000ff;
+    font-weight: bold;
+} /* Name.Namespace */
+.highlight .nt {
+    color: #008000;
+    font-weight: bold;
+} /* Name.Tag */
+.highlight .nv {
+    color: #19177c;
+} /* Name.Variable */
+.highlight .ow {
+    color: #aa22ff;
+    font-weight: bold;
+} /* Operator.Word */
+.highlight .w {
+    color: #bbbbbb;
+} /* Text.Whitespace */
+.highlight .mb {
+    color: #666666;
+} /* Literal.Number.Bin */
+.highlight .mf {
+    color: #666666;
+} /* Literal.Number.Float */
+.highlight .mh {
+    color: #666666;
+} /* Literal.Number.Hex */
+.highlight .mi {
+    color: #666666;
+} /* Literal.Number.Integer */
+.highlight .mo {
+    color: #666666;
+} /* Literal.Number.Oct */
+.highlight .sa {
+    color: #ba2121;
+} /* Literal.String.Affix */
+.highlight .sb {
+    color: #ba2121;
+} /* Literal.String.Backtick */
+.highlight .sc {
+    color: #ba2121;
+} /* Literal.String.Char */
+.highlight .dl {
+    color: #ba2121;
+} /* Literal.String.Delimiter */
+.highlight .sd {
+    color: #ba2121;
+    font-style: italic;
+} /* Literal.String.Doc */
+.highlight .s2 {
+    color: #ba2121;
+} /* Literal.String.Double */
+.highlight .se {
+    color: #bb6622;
+    font-weight: bold;
+} /* Literal.String.Escape */
+.highlight .sh {
+    color: #ba2121;
+} /* Literal.String.Heredoc */
+.highlight .si {
+    color: #bb6688;
+    font-weight: bold;
+} /* Literal.String.Interpol */
+.highlight .sx {
+    color: #008000;
+} /* Literal.String.Other */
+.highlight .sr {
+    color: #bb6688;
+} /* Literal.String.Regex */
+.highlight .s1 {
+    color: #ba2121;
+} /* Literal.String.Single */
+.highlight .ss {
+    color: #19177c;
+} /* Literal.String.Symbol */
+.highlight .bp {
+    color: #008000;
+} /* Name.Builtin.Pseudo */
+.highlight .fm {
+    color: #0000ff;
+} /* Name.Function.Magic */
+.highlight .vc {
+    color: #19177c;
+} /* Name.Variable.Class */
+.highlight .vg {
+    color: #19177c;
+} /* Name.Variable.Global */
+.highlight .vi {
+    color: #19177c;
+} /* Name.Variable.Instance */
+.highlight .vm {
+    color: #19177c;
+} /* Name.Variable.Magic */
+.highlight .il {
+    color: #666666;
+} /* Literal.Number.Integer.Long */
+
+@media (prefers-color-scheme: dark) {
+    .highlight .hll {
+        background-color: #f1fa8c;
+    }
+    .highlight {
+        background: #282a36;
+        color: #f8f8f2;
+    }
+    .highlight .c {
+        color: #6272a4;
+    } /* Comment */
+    .highlight .err {
+        color: #f8f8f2;
+    } /* Error */
+    .highlight .g {
+        color: #f8f8f2;
+    } /* Generic */
+    .highlight .k {
+        color: #ff79c6;
+    } /* Keyword */
+    .highlight .l {
+        color: #f8f8f2;
+    } /* Literal */
+    .highlight .n {
+        color: #f8f8f2;
+    } /* Name */
+    .highlight .o {
+        color: #ff79c6;
+    } /* Operator */
+    .highlight .x {
+        color: #f8f8f2;
+    } /* Other */
+    .highlight .p {
+        color: #f8f8f2;
+    } /* Punctuation */
+    .highlight .ch {
+        color: #6272a4;
+    } /* Comment.Hashbang */
+    .highlight .cm {
+        color: #6272a4;
+    } /* Comment.Multiline */
+    .highlight .cp {
+        color: #ff79c6;
+    } /* Comment.Preproc */
+    .highlight .cpf {
+        color: #6272a4;
+    } /* Comment.PreprocFile */
+    .highlight .c1 {
+        color: #6272a4;
+    } /* Comment.Single */
+    .highlight .cs {
+        color: #6272a4;
+    } /* Comment.Special */
+    .highlight .gd {
+        color: #8b080b;
+    } /* Generic.Deleted */
+    .highlight .ge {
+        color: #f8f8f2;
+        text-decoration: underline;
+    } /* Generic.Emph */
+    .highlight .gr {
+        color: #f8f8f2;
+    } /* Generic.Error */
+    .highlight .gh {
+        color: #f8f8f2;
+        font-weight: bold;
+    } /* Generic.Heading */
+    .highlight .gi {
+        color: #f8f8f2;
+        font-weight: bold;
+    } /* Generic.Inserted */
+    .highlight .go {
+        color: #44475a;
+    } /* Generic.Output */
+    .highlight .gp {
+        color: #f8f8f2;
+    } /* Generic.Prompt */
+    .highlight .gs {
+        color: #f8f8f2;
+    } /* Generic.Strong */
+    .highlight .gu {
+        color: #f8f8f2;
+        font-weight: bold;
+    } /* Generic.Subheading */
+    .highlight .gt {
+        color: #f8f8f2;
+    } /* Generic.Traceback */
+    .highlight .kc {
+        color: #ff79c6;
+    } /* Keyword.Constant */
+    .highlight .kd {
+        color: #8be9fd;
+        font-style: italic;
+    } /* Keyword.Declaration */
+    .highlight .kn {
+        color: #ff79c6;
+    } /* Keyword.Namespace */
+    .highlight .kp {
+        color: #ff79c6;
+    } /* Keyword.Pseudo */
+    .highlight .kr {
+        color: #ff79c6;
+    } /* Keyword.Reserved */
+    .highlight .kt {
+        color: #8be9fd;
+    } /* Keyword.Type */
+    .highlight .ld {
+        color: #f8f8f2;
+    } /* Literal.Date */
+    .highlight .m {
+        color: #bd93f9;
+    } /* Literal.Number */
+    .highlight .s {
+        color: #f1fa8c;
+    } /* Literal.String */
+    .highlight .na {
+        color: #50fa7b;
+    } /* Name.Attribute */
+    .highlight .nb {
+        color: #8be9fd;
+        font-style: italic;
+    } /* Name.Builtin */
+    .highlight .nc {
+        color: #50fa7b;
+    } /* Name.Class */
+    .highlight .no {
+        color: #f8f8f2;
+    } /* Name.Constant */
+    .highlight .nd {
+        color: #f8f8f2;
+    } /* Name.Decorator */
+    .highlight .ni {
+        color: #f8f8f2;
+    } /* Name.Entity */
+    .highlight .ne {
+        color: #f8f8f2;
+    } /* Name.Exception */
+    .highlight .nf {
+        color: #50fa7b;
+    } /* Name.Function */
+    .highlight .nl {
+        color: #8be9fd;
+        font-style: italic;
+    } /* Name.Label */
+    .highlight .nn {
+        color: #f8f8f2;
+    } /* Name.Namespace */
+    .highlight .nx {
+        color: #f8f8f2;
+    } /* Name.Other */
+    .highlight .py {
+        color: #f8f8f2;
+    } /* Name.Property */
+    .highlight .nt {
+        color: #ff79c6;
+    } /* Name.Tag */
+    .highlight .nv {
+        color: #8be9fd;
+        font-style: italic;
+    } /* Name.Variable */
+    .highlight .ow {
+        color: #ff79c6;
+    } /* Operator.Word */
+    .highlight .w {
+        color: #f8f8f2;
+    } /* Text.Whitespace */
+    .highlight .mb {
+        color: #bd93f9;
+    } /* Literal.Number.Bin */
+    .highlight .mf {
+        color: #bd93f9;
+    } /* Literal.Number.Float */
+    .highlight .mh {
+        color: #bd93f9;
+    } /* Literal.Number.Hex */
+    .highlight .mi {
+        color: #bd93f9;
+    } /* Literal.Number.Integer */
+    .highlight .mo {
+        color: #bd93f9;
+    } /* Literal.Number.Oct */
+    .highlight .sa {
+        color: #f1fa8c;
+    } /* Literal.String.Affix */
+    .highlight .sb {
+        color: #f1fa8c;
+    } /* Literal.String.Backtick */
+    .highlight .sc {
+        color: #f1fa8c;
+    } /* Literal.String.Char */
+    .highlight .dl {
+        color: #f1fa8c;
+    } /* Literal.String.Delimiter */
+    .highlight .sd {
+        color: #f1fa8c;
+    } /* Literal.String.Doc */
+    .highlight .s2 {
+        color: #f1fa8c;
+    } /* Literal.String.Double */
+    .highlight .se {
+        color: #f1fa8c;
+    } /* Literal.String.Escape */
+    .highlight .sh {
+        color: #f1fa8c;
+    } /* Literal.String.Heredoc */
+    .highlight .si {
+        color: #f1fa8c;
+    } /* Literal.String.Interpol */
+    .highlight .sx {
+        color: #f1fa8c;
+    } /* Literal.String.Other */
+    .highlight .sr {
+        color: #f1fa8c;
+    } /* Literal.String.Regex */
+    .highlight .s1 {
+        color: #f1fa8c;
+    } /* Literal.String.Single */
+    .highlight .ss {
+        color: #f1fa8c;
+    } /* Literal.String.Symbol */
+    .highlight .bp {
+        color: #f8f8f2;
+        font-style: italic;
+    } /* Name.Builtin.Pseudo */
+    .highlight .fm {
+        color: #50fa7b;
+    } /* Name.Function.Magic */
+    .highlight .vc {
+        color: #8be9fd;
+        font-style: italic;
+    } /* Name.Variable.Class */
+    .highlight .vg {
+        color: #8be9fd;
+        font-style: italic;
+    } /* Name.Variable.Global */
+    .highlight .vi {
+        color: #8be9fd;
+        font-style: italic;
+    } /* Name.Variable.Instance */
+    .highlight .vm {
+        color: #8be9fd;
+        font-style: italic;
+    } /* Name.Variable.Magic */
+    .highlight .il {
+        color: #bd93f9;
+    } /* Literal.Number.Integer.Long */
+}
diff --git a/silicon/templates/base.html.j2 b/silicon/templates/base.html.j2
index 66e1239..4dec438 100644
--- a/silicon/templates/base.html.j2
+++ b/silicon/templates/base.html.j2
@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <title>{{ title }}</title>
   {% block links %}
-  <link rel="stylesheet" href="{{ url_for('static', filename='css/colors-light.css') }}" type="text/css">
+  <link rel="stylesheet" href="{{ url_for('static', filename='css/colors.css') }}" type="text/css">
   <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}" type="text/css">
   <link rel="stylesheet" href="{{ url_for('static', filename='css/layout.css') }}" type="text/css" media="screen">
   {% endblock %}