minimal dark mode implementation

jashkenas · Jul 23, 2024 · 55720c0 · 55720c0
1 parent de20b6f
commit 55720c0
Show file tree

Hide file tree

Showing 7 changed files with 65 additions and 359 deletions.
diff --git a/index.html b/index.html
@@ -9,7 +9,6 @@
   <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
   <title>Underscore.js</title>
   <style>
-    @import './static/css/theme-toggle.css';
     body {
       font-size: 14px;
       line-height: 22px;
@@ -260,8 +259,72 @@
         width: 100%;
       }
     }
+    @media screen and (prefers-color-scheme: light) {
+    img#logo {
+     filter: none;
+    }
+}
+
+@media screen and (prefers-color-scheme: dark) {
+      body {
+          background: #333 !important;
+          color: #c6c6c6;
+      }
+
+      div#sidebar {
+          background: #444;
+          border-right: 1px solid #666;
+          box-shadow: 0 0 20px #555;
+          -webkit-box-shadow: 0 0 20px #555;
+          -moz-box-shadow: 0 0 20px #555;
+      }
+
+      a.toc_title,
+      a.toc_title:visited {
+          color: #f4f4f4;
+      }
+
+      a.toc_title:hover {
+          text-decoration: underline;
+      }
+
+      .toc_section li a {
+          text-decoration: none;
+          color: #f4f4f4;
+      }
+
+      img#logo {
+          filter: brightness(0) invert(1);
+      }
+
+      div.warning {
+          color: #CC6060;
+      }
+
+      a,
+      a:visited {
+          color: #f4f4f4;
+      }
+
+      a:active,
+      a:hover {
+          color: #ffffff;
+      }
+
+      table .rule {
+          background: #777;
+      }
+
+      tt {
+          background: #444;
+          border: 1px solid #777;
+      }
+
+      pre {
+          border-left: 5px solid #aaa;
+      }
+  }
   </style>
-  <script src="/static/js/themeToggle.js" defer></script>
 </head>
 <body>
 
@@ -4323,15 +4386,6 @@ <h2 id="changelog">Change Log</h2>
 
   </div>
 
-  <form action="#" id="themeForm" data-name="toggleForm">
-    <div class="theme-control">
-      <label role="listbox" for="themeToggle" aria-label="theme">
-        <input role="option" type="checkbox" name="theme" id="themeToggle">
-      </label>
-    </div>
-  </form>
-
-
   <!-- Include Underscore, so you can play with it in the console. -->
   <script type="text/javascript" src="underscore-umd.js"></script>
   <script type="text/javascript" src="docs/main.js"></script>

diff --git a/static/css/theme-toggle.css b/static/css/theme-toggle.css
diff --git a/static/images/moon-light.svg b/static/images/moon-light.svg
diff --git a/static/images/moon.svg b/static/images/moon.svg
diff --git a/static/images/sun-light.svg b/static/images/sun-light.svg
diff --git a/static/images/sun.svg b/static/images/sun.svg