adds OS controlled dark mode

jzwood · jzwood · commit 66ae3078a16a · 2023-02-21T19:12:53.000-05:00
diff --git a/dist-newstyle/cache/compiler b/dist-newstyle/cache/compiler
diff --git a/message-index/css/default.css b/message-index/css/default.css
@@ -1,7 +1,6 @@
 *:focus-visible {
   outline-offset: 4px;
   outline-width: 1px;
-  outline-color: #DB83ED;
 }
 
 article .header {
@@ -12,7 +11,6 @@ article .header {
 
 body {
   font-size: 1.6rem;
-  color: #000;
   margin: 0 auto;
   max-width: 120rem;
 }
@@ -42,14 +40,10 @@ details > summary {
 
 .example {
   flex-grow: 1;
-  overflow-x: scroll !important;
+  overflow-x: auto;
   margin-top: 10px;
 }
 
-.example pre {
-  background-color: #FAFAFA;
-}
-
 .example-container {
   min-height: 300px;
   display: flex;
@@ -71,7 +65,6 @@ details > summary {
 }
 
 .filename {
-  background-color: #EAEAEA;
   padding: 10px 5px 10px 5px;
 }
 
@@ -85,12 +78,10 @@ footer {
 
 h1 {
   font-size: 2.4rem;
-  color: #6D28D9;
 }
 
 h2 {
   font-size: 2rem;
-  color: #6D28D9;
 }
 
 header {
@@ -129,20 +120,14 @@ main {
   padding: 0 2%;
 }
 main code {
-  background-color: #EDE4FA;
   font-family: monospace;
   display: inline-block;
   padding-left: 2px;
   padding-right: 2px;
 }
 
-main pre {
-  background: #fafafa;
-}
-
 main pre code {
   padding: 10px;
-  background: #fafafa;
 }
 
 nav.breadcrumb {
@@ -152,7 +137,6 @@ nav.breadcrumb {
 
 nav.breadcrumb a {
   font-weight: normal;
-  color: black;
   text-decoration: underline;
   text-transform: none;
   display: inline;
diff --git a/message-index/css/theme.css b/message-index/css/theme.css
@@ -0,0 +1,64 @@
+body {
+  --bg-color: #FFFFFF;
+  --text-color: #333;
+  --outline-color: #DB83ED;
+  --header-color: #6D28D9;
+  --anchor: #0000EE;
+  --bg-nav: transparent;
+  --code-color: #FAFAFA;
+  --filename-bg: #EAEAEA;
+}
+
+@media (prefers-color-scheme: dark) {
+  body {
+    --bg-color: #33333A;
+    --text-color: #F4F3F8;
+    --header-color: #70619E;
+    --anchor: #EB82DC;
+    --bg-nav: #393939;
+    --code-color: transparent;
+    --filename-bg: #2C2C2C;
+  }
+
+  code.hljs {
+    background-color: transparent;
+    filter: invert(1);
+  }
+}
+
+*:focus-visible {
+  outline-color: var(--outline-color);
+}
+
+body {
+  color: var(--text-color);
+  background-color: var(--bg-color);
+}
+
+h1, h2, h3, h4, h5, h6 {
+  color: var(--header-color);
+}
+
+a {
+  color: var(--anchor);
+}
+
+input {
+  background-color: rgba(255, 255, 255, 0.06);
+}
+
+details {
+  border: 2px solid #C7A1FF;
+}
+
+main code, main pre, main pre code, .example pre {
+  background-color: var(--code-color);
+}
+
+.filename {
+  background-color: var(--filename-bg);
+}
+
+nav.breadcrumb a {
+  color: var(--text-color);
+}
diff --git a/message-index/templates/default.html b/message-index/templates/default.html
@@ -10,6 +10,7 @@
   <link rel="stylesheet" href="/css/highlight.css">
   <script src="/js/highlight.min.js"></script>
   <link rel="stylesheet" href="/css/default.css" />
+  <link rel="stylesheet" href="/css/theme.css" />
 </head>
 
 <body>
