Merge pull request #383 from jzwood/dark-mode

david-christiansen · web-flow · commit 9f0544d185be · 2023-02-28T10:32:59.000+01:00
adds OS controlled dark mode
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;
 }
@@ -37,19 +35,15 @@ details > summary {
 }
 
 #error-message {
-  font-size: small;
+  font-size: medium;
 }
 
 .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,70 @@
+:root {
+  --bg-color: #FFFFFF;
+  --text-color: #333;
+  --outline-color: #DB83ED;
+  --header-color: #5E5184;
+  --anchor-color: #9E358F;
+  --anchor-visited-color: #6F5F9C;
+  --code-bg-color: #FAFAFA;
+  --filename-bg: #EAEAEA;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg-color: #333;
+    --text-color: #C9D1D9;
+    --header-color: #BBA1FF;
+    --anchor-color: #EB82DC;
+    --anchor-visited-color: #D5C5FF;
+    --code-bg-color: transparent;
+    --filename-bg: #2C2C2C;
+  }
+
+  /* TODO: this is a stopgap until there's custom highlighting for dark mode */
+  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);
+}
+
+a {
+  color: var(--anchor-color);
+}
+
+a:visited {
+  color: var(--anchor-visited-color);
+}
+
+h1, h2, h3, h4, h5, h6 {
+  color: var(--header-color);
+}
+
+input {
+  background-color: rgba(255, 255, 255, 0.06);
+  color: var(--text-color);
+}
+
+details {
+  border: 2px solid #C7A1FF;
+}
+
+main code, main pre, main pre code, .example pre {
+  background-color: var(--code-bg-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>
