Support prefers color scheme dark (#17)

* add global dark theme styles * add dark mode to documentation pages * update styles
FartLabs · Mar 31, 2024 · 866a955 · 866a955
1 parent d9a653a
commit 866a955
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 7 deletions.
diff --git a/components/doc/doc_content.tsx b/components/doc/doc_content.tsx
@@ -44,7 +44,8 @@ export default function DocContent(props: DocContentProps) {
         <meta property="og:title" content={title} />
         <link rel="stylesheet" href="/md.css" />
 
-        <Hljs id="github" />
+        {/* Choose an ID: https://highlightjs.org/examples */}
+        <Hljs id="github-dark-dimmed" />
         <script src="/copy.js" defer></script>
       </Head>
 

diff --git a/components/nav.tsx b/components/nav.tsx
@@ -14,9 +14,9 @@ export interface NavProps {
 export default function Nav(props: NavProps) {
   return (
     <nav class="nav">
-      <a href="/">
-        <h1>jsonx</h1>
-      </a>
+      <h1>
+        <a href="/">jsonx</a>
+      </h1>
 
       <ToC
         nodes={nodes}

diff --git a/static/global.css b/static/global.css
@@ -7,7 +7,7 @@
 }
 
 ::selection {
-  background-color: #f0a8ff;
+  background-color: rgba(240, 168, 255, 0.5);
 }
 
 body {
@@ -20,6 +20,14 @@ body {
   font-size: 1.2em;
 }
 
+a:visited {
+  color: #833bff;
+}
+
+a:hover {
+  color: #e045ff;
+}
+
 .nav {
   grid-area: nav;
   margin: 0 1em;
@@ -29,6 +37,10 @@ body {
   font-size: 1.5em;
 }
 
+.nav h1 a {
+  text-decoration: none;
+}
+
 .nav ul {
   padding: 0;
   margin-left: 1em;
@@ -67,6 +79,37 @@ body {
   margin-left: 1em;
 }
 
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: #111;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  a,
+  ul,
+  ol {
+    color: #ddd;
+  }
+
+  hr {
+    border-color: #333;
+  }
+
+  a:visited {
+    color: #c671ff;
+  }
+
+  a:hover {
+    color: #f0a8ff;
+  }
+}
+
 @media (min-width: 768px) {
   body {
     grid-template-columns: 1fr 3fr 1fr;

diff --git a/static/md.css b/static/md.css
@@ -1,6 +1,7 @@
 .markdown-body {
   margin: 0 auto;
   line-height: 1.5;
+  margin-bottom: 2em;
 }
 
 @media (min-width: 768px) {
@@ -73,8 +74,10 @@
 
 .markdown-body pre,
 .markdown-body code {
-  background-color: #f8f8f8;
-  border: 1px solid #ddd;
+  font-family: monospace;
+  color: #ddd;
+  background-color: #44475a;
+  border: 1px solid #282a36;
   border-radius: 3px;
   padding: 0.1em 0.2em;
 }
@@ -89,6 +92,7 @@
   overflow-x: auto;
   white-space: pre-wrap;
   word-break: break-all;
+  border: none;
 }
 
 .markdown-body pre {
@@ -102,16 +106,34 @@
   text-decoration: underline;
   text-underline-offset: 0.3em;
   padding: 0.2em 0.9em;
+  color: #bbb;
 }
 
 .markdown-body pre button {
   position: absolute;
   top: 5px;
   right: 5px;
   height: 2em;
+  color: #bbb;
+  background-color: #303241;
+}
+
+.markdown-body kbd {
+  border-radius: 3px;
+  padding: 1px 2px 0;
+  border: 1px solid black;
+  background-color: #f7f7f7;
+  font-family: monospace;
 }
 
 .markdown-body img:not(:has([width]), :has([height])) {
   max-width: 100%;
   height: auto;
 }
+
+@media (prefers-color-scheme: dark) {
+  .markdown-body blockquote {
+    background-color: rgba(255, 255, 255, 0.1);
+    border-left: 0.25em solid #44475a;
+  }
+}