fix: improve dark mode colors

denoland · Feb 4, 2025 · 96c7436 · 96c7436
1 parent 8cb3e16
commit 96c7436
Show file tree

Hide file tree

Showing 7 changed files with 62 additions and 40 deletions.
diff --git a/www/components/Header.tsx b/www/components/Header.tsx
@@ -1,5 +1,4 @@
 import NavigationBar from "./NavigationBar.tsx";
-import ThemeToggle from "../islands/ThemeToggle.tsx";
 
 export default function Header(props: { title: string; active: string }) {
   const isHome = props.active == "/";
@@ -23,10 +22,7 @@ export default function Header(props: { title: string; active: string }) {
           <Logo />
         </div>
       )}
-      <div class="flex">
-        <NavigationBar class="" active={props.active} />
-        {isDocs && <ThemeToggle />}
-      </div>
+      <NavigationBar class="" active={props.active} />
     </header>
   );
 }

diff --git a/www/components/NavigationBar.tsx b/www/components/NavigationBar.tsx
@@ -1,3 +1,4 @@
+import ThemeToggle from "../islands/ThemeToggle.tsx";
 import * as Icons from "./Icons.tsx";
 
 export default function NavigationBar(
@@ -57,6 +58,11 @@ export default function NavigationBar(
             <Icons.Discord />
           </a>
         </li>
+        {isDocs && (
+          <li class="flex items-center">
+            <ThemeToggle />
+          </li>
+        )}
       </ul>
     </nav>
   );

diff --git a/www/islands/ThemeToggle.tsx b/www/islands/ThemeToggle.tsx
@@ -26,39 +26,36 @@ export default function ThemeToggle() {
 
   return (
     <button
+      type="button"
       onClick={toggleTheme}
-      class="dark-mode-toggle button p-1 rounded bg-background-primary mr-3"
+      class="dark-mode-toggle button p-1 -m-1"
       aria-label="Toggle Theme"
     >
       {theme === "light"
         ? (
-          <>
-            <svg
-              class="fill-foreground-primary hover:fill-fresh w-6 h-6"
-              viewBox="0 0 20 20"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z">
-              </path>
-            </svg>
-          </>
+          <svg
+            class="fill-foreground-primary hover:fill-fresh w-6 h-6"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z">
+            </path>
+          </svg>
         )
         : (
-          <>
-            <svg
-              class="fill-foreground-primary hover:fill-fresh w-6 h-6"
-              viewBox="0 0 20 20"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1
+          <svg
+            class="fill-foreground-primary hover:fill-fresh w-6 h-6"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1
                   0 100-2H3a1 1 0 000 2h1z"
-                fill-rule="evenodd"
-                clip-rule="evenodd"
-              >
-              </path>
-            </svg>
-          </>
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+            >
+            </path>
+          </svg>
         )}
     </button>
   );

diff --git a/www/islands/VersionSelect.tsx b/www/islands/VersionSelect.tsx
@@ -20,7 +20,7 @@ export default function VersionSelect(
         </label>
         {selectedIsLatest && (
           <div class="flex absolute pointer-events-none select-none w-full h-full items-center justify-end pr-8">
-            <div class="rounded-full px-2 py-1 text-xs tag-label bg-[#056CF025] text-blue-700">
+            <div class="rounded-full px-2 py-1 text-xs tag-label bg-[#056CF025] dark:bg-[#2182ff45] text-blue-700 dark:text-blue-400">
               Latest
             </div>
           </div>

diff --git a/www/routes/docs/[...slug].tsx b/www/routes/docs/[...slug].tsx
@@ -295,7 +295,7 @@ function ForwardBackButtons(props: {
             href={prev.href}
             class="px-4 py-2 text-left rounded border border-foreground-secondary/20 grid border-solid w-full hover:border-green-600 transition-colors"
           >
-            <span class="text-sm text-gray-600">
+            <span class="text-sm text-gray-600 dark:text-gray-500">
               Previous page
             </span>
             <span class="text-green-600 font-medium">
@@ -310,7 +310,7 @@ function ForwardBackButtons(props: {
             href={next.href}
             class="px-4 py-2 text-left rounded border border-foreground-secondary/20 grid border-solid w-full hover:border-green-600 transition-colors"
           >
-            <span class="text-sm text-gray-600">
+            <span class="text-sm text-gray-600 dark:text-gray-500">
               Next page
             </span>
             <span class="text-green-600 font-medium">

diff --git a/www/static/docsearch.css b/www/static/docsearch.css
@@ -46,7 +46,7 @@ html[data-theme="dark"] {
   --docsearch-container-background: rgba(9, 10, 17, 0.8);
   --docsearch-modal-background: #15172a;
   --docsearch-modal-shadow: inset 1px 1px 0 0 #2c2e40,0 3px 8px 0 #000309;
-  --docsearch-searchbox-background: #090a11;
+  --docsearch-searchbox-background: #2b2d3c;
   --docsearch-searchbox-focus-background: #000;
   --docsearch-hit-color: #bec3c9;
   --docsearch-hit-shadow: none;

diff --git a/www/static/markdown.css b/www/static/markdown.css
@@ -26,6 +26,27 @@
   --color-accent-fg: #0969da;
   --color-accent-emphasis: #0969da;
   --color-danger-fg: #cf222e;
+
+  --warn-border: #ff9100;
+  --warn-bg: #f0900525;
+  --warn-text: var(--color-fg-default);
+}
+
+html[data-theme="dark"] {
+  --color-accent-fg: #3d96ff;
+  --color-prettylights-syntax-keyword: #ee5b65;
+  --color-prettylights-syntax-entity: #b291f0;
+  --color-prettylights-syntax-constant: #448ce5;
+  --color-prettylights-syntax-entity-tag: #7cb78a;
+  --color-prettylights-syntax-variable: #d18253;
+  --color-prettylights-syntax-markup-deleted-text: #ffebe9;
+  --color-prettylights-syntax-markup-deleted-bg: #82071e;
+  --color-prettylights-syntax-markup-inserted-text: #dafbe1;
+  --color-prettylights-syntax-markup-inserted-bg: #116329;
+
+  --warn-border: #ff9100;
+  --warn-bg: #f0900525;
+  --warn-text: var(--color-fg-default);
 }
 
 .markdown-body {
@@ -86,7 +107,7 @@
   padding: 0;
 }
 .markdown-body blockquote {
-  color: var(--color-fg-muted);
+  color: var(--color-fg-default);
   border-left: 0.25em solid var(--color-border-default);
   padding: 0 1em;
 }
@@ -622,8 +643,9 @@
   margin-bottom: 0.25rem;
 }
 .markdown-body blockquote.warn {
-  border-color: #ff9100;
-  background: #f0900525;
+  border-color: var(--warn-border);
+  background: var(--warn-bg);
+  color: var(--warn-text);
 }
 
 .markdown-body .admonition .fenced-code {
@@ -657,11 +679,12 @@
   color: hsla(var(--foreground-primary));
 }
 .markdown-body .admonition.warn .admonition-header {
-  color: hsla(var(--info));
+  color: #dd6f04;
 }
 .markdown-body .admonition.warn {
-  background-color: #f0900525;
-  border-color: #ff9100;
+  color: var(--warn-text);
+  background-color: var(--warn-bg);
+  border-color: var(--warn-border);
 }
 
 @media screen and (min-width: 768px) {