fix: [#1784] dark mode in the documentation (#1932)

* Add dark theme in docs * Add button for switch theme * Uncomment google script I commented that script for a test and I forgot to uncomment it * Clean up design --------- Co-authored-by: Colin McDonnell <colinmcd@alum.mit.edu>
2023-01-29 23:58:45 +01:00 · 2023-01-29 23:58:45 +01:00 · 2bca607097
parent 296d708d32
commit 2bca607097
3 changed files with 131 additions and 8 deletions
--- a/index.html
+++ b/index.html
@ -96,6 +96,7 @@
      .markdown-section {
        max-width: 720px;
      }
+
      p > img {
        height: 200px;
      }
@ -110,21 +111,119 @@
      .markdown-section h3 code {
        font-size: 80%;
      }
+      .sidebar {
+        padding-top: 24px;
+      }
+
+      .sidebar::-webkit-scrollbar {
+        width: 6px;
+      }
+
+      .theme-btn {
+        position: relative;
+        left: 15px;
+        width: 24px;
+        height: 24px;
+        margin-bottom: 14px;
+        background-image: url("./static/moon.svg");
+        background-repeat: no-repeat;
+        background-size: cover;
+        background-position: center;
+        cursor: pointer;
+        z-index: 100;
+      }
+    </style>
+    <!-- Theme: dark -->
+    <style>
+      .dark,
+      .dark .sidebar,
+      .dark blockquote,
+      .dark .sidebar a {
+        background-color: #283339;
+        color: #d3d3d3;
+      }
+
+      .dark .sidebar::-webkit-scrollbar-thumb {
+        background: hsla(0, 0%, 88%, 0.4);
+      }
+
+      .dark .sidebar::-webkit-scrollbar-track {
+        background: hsla(0, 0%, 53%, 0.1);
+      }
+
+      .dark .sidebar-toggle {
+        background-color: hsl(201deg 18% 19% / 80%) !important;
+      }
+
+      .dark .markdown-section h1,
+      .dark .markdown-section h2,
+      .dark .markdown-section h3,
+      .dark .markdown-section h4,
+      .dark .markdown-section strong,
+      .dark .anchor span {
+        color: #fff;
+      }
+
+      .dark .markdown-section tr:nth-child(2n) {
+        background-color: #1f282d;
+      }
+
+      .dark .markdown-section td,
+      .dark .markdown-section th {
+        border-color: #495e69;
+      }
+
+      .dark .markdown-section pre,
+      .dark .markdown-section code {
+        background-color: #34434b;
+      }
+
+      .dark .markdown-section code,
+      .dark .token.keyword,
+      .dark .token.function {
+        color: #f07178;
+      }
+
+      .dark .markdown-section pre > code,
+      .dark .token.punctuation {
+        color: #f3f3f3;
+      }
+
+      .dark .token.number,
+      .dark .token.boolean {
+        color: #ffcb6b;
+      }
+
+      .dark .github-corner svg {
+        color: #283339;
+      }
+
+      .dark .theme-btn {
+        background-image: url("./static/sun.svg");
+      }
    </style>
  </head>

  <body>
-    <nav
-      style="
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: space-between;
-      "
-    ></nav>
+    <div class="theme-btn"></div>
+
    <div id="app"></div>
    <script src="//cdnjs.cloudflare.com/ajax/libs/docsify/4.12.2/docsify.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/components/prism-typescript.min.js"></script>
+    <script>
+      window
+        .matchMedia("(prefers-color-scheme: dark)")
+        .addEventListener("change", (e) => {
+          document.body.classList.toggle("dark", e.matches);
+        });
+
+      const themeBtn = document.querySelector(".theme-btn");
+
+      themeBtn.addEventListener("click", () => {
+        document.body.classList.toggle("dark");
+      });
+    </script>
+
    <script>
      window.$docsify = {
        subMaxLevel: 1,
@ -145,5 +244,12 @@
        ],
      };
    </script>
+    <script>
+      window.addEventListener("DOMContentLoaded", () => {
+        document
+          .querySelector("aside")
+          .prepend(document.querySelector(".theme-btn"));
+      });
+    </script>
  </body>
 </html>
--- a/static/moon.svg
+++ b/static/moon.svg
@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#1D1D1B"
+  stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+</svg>
--- a/static/sun.svg
+++ b/static/sun.svg
@ -0,0 +1,13 @@
+<?xml version="1.0" ?>
+<svg class="feather feather-sun" fill="none" height="24" stroke="#fff" stroke-linecap="round" stroke-linejoin="round"
+  stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="12" cy="12" r="5" />
+  <line x1="12" x2="12" y1="1" y2="3" />
+  <line x1="12" x2="12" y1="21" y2="23" />
+  <line x1="4.22" x2="5.64" y1="4.22" y2="5.64" />
+  <line x1="18.36" x2="19.78" y1="18.36" y2="19.78" />
+  <line x1="1" x2="3" y1="12" y2="12" />
+  <line x1="21" x2="23" y1="12" y2="12" />
+  <line x1="4.22" x2="5.64" y1="19.78" y2="18.36" />
+  <line x1="18.36" x2="19.78" y1="5.64" y2="4.22" />
+</svg>