Fix responsive (colinhacks#3585)

* Fix responsive * Remove theme button * Remove localstorage
oberbeck · Jun 19, 2024 · 826d6a2 · 826d6a2
1 parent 457a095
commit 826d6a2
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 25 deletions.
diff --git a/README.md b/README.md
@@ -196,9 +196,9 @@ Sponsorship at any level is appreciated and encouraged. For individual developer
 
 <div align="center">
   <a href="https://go.clerk.com/PKHrcwh">
-    <picture height="120px">
+    <picture height="120px" >
       <source media="(prefers-color-scheme: dark)" srcset="https://github.com/colinhacks/zod/assets/3084745/167ea625-bf23-4f7b-afc2-1dbb0ad60a3e">
-      <img alt="speakeasy'" height="120px" src="https://github.com/colinhacks/zod/assets/3084745/68a43b31-62e5-4344-a112-7066dcf3d830">
+      <img alt="clerk logo" height="120px" src="https://github.com/colinhacks/zod/assets/3084745/68a43b31-62e5-4344-a112-7066dcf3d830">
     </picture>
   </a>
   <br/>

diff --git a/blog/index.html b/blog/index.html
@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -233,7 +233,7 @@
   </head>
 
   <body>
-    <div class="theme-btn"></div>
+    <!-- <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>
@@ -264,23 +264,23 @@
         auto2top: true,
         repo: "colinhacks/zod",
         routerMode: "history",
-        homepage: 'clerk-fellowship.md',
+        homepage: "clerk-fellowship.md",
         crossOriginLinks: [
           "https://twitter.com/colinhacks",
           "https://github.com/sponsors/colinhacks",
           "https://twitter.com/tweetsbycolin",
           "https://authjs.dev",
-          "https://authjs.dev/getting-started"
+          "https://authjs.dev/getting-started",
         ],
       };
     </script>
-    <script>
+    <!-- <script>
       window.addEventListener("DOMContentLoaded", () => {
         document
           .querySelector("aside")
           .prepend(document.querySelector(".theme-btn"));
       });
-    </script>
+    </script> -->
     <script src="https://www.unpkg.com/zod/lib/index.umd.js"></script>
   </body>
 </html>
diff --git a/deno/lib/README.md b/deno/lib/README.md
@@ -196,9 +196,9 @@ Sponsorship at any level is appreciated and encouraged. For individual developer
 
 <div align="center">
   <a href="https://go.clerk.com/PKHrcwh">
-    <picture height="120px">
+    <picture height="120px" >
       <source media="(prefers-color-scheme: dark)" srcset="https://github.com/colinhacks/zod/assets/3084745/167ea625-bf23-4f7b-afc2-1dbb0ad60a3e">
-      <img alt="speakeasy'" height="120px" src="https://github.com/colinhacks/zod/assets/3084745/68a43b31-62e5-4344-a112-7066dcf3d830">
+      <img alt="clerk logo" height="120px" src="https://github.com/colinhacks/zod/assets/3084745/68a43b31-62e5-4344-a112-7066dcf3d830">
     </picture>
   </a>
   <br/>

diff --git a/index.html b/index.html
@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -221,31 +221,62 @@
       .dark .theme-btn {
         background-image: url("./static/sun.svg");
       }
+      /* .dark .light-mode-logo {
+        display: block !important;
+      }
+      @media (prefers-color-scheme: light) {
+        .dark .light-mode-logo {
+          display: block !important;
+        }
+        .dark picture {
+          display: none;
+        }
+        .dark .light-mode-logo {
+          display: none !important;
+        }
+      } */
     </style>
   </head>
 
-  <body>
-    <div class="theme-btn"></div>
+  <body data-theme="dark">
+    <!-- <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>
-      toggleDarkTheme(localStorage.getItem("dark-theme") === "true" || false);
+      localStorage.removeItem("dark-theme");
+      function checkDark() {
+        return (
+          // localStorage.getItem("dark-theme") === "true" ??
+          window.matchMedia("(prefers-color-scheme: dark)").matches ?? false
+        );
+      }
+
+      let isDark = checkDark();
+      toggleDarkTheme(isDark);
 
       window
         .matchMedia("(prefers-color-scheme: dark)")
-        .addEventListener("change", (e) => toggleDarkTheme(e.matches));
+        .addEventListener("change", (e) => toggleDarkTheme(e.matches()));
+
+      document.querySelector(".theme-btn").addEventListener("click", () => {
+        const isDark = checkDark();
+        console.log("isDark", isDark);
+        toggleDarkTheme(!isDark);
+      });
 
-      document
-        .querySelector(".theme-btn")
-        .addEventListener("click", () => toggleDarkTheme());
+      function toggleDarkTheme(isDark) {
+        if (isDark) {
+          document.body.classList.add("dark");
+        } else {
+          document.body.classList.remove("dark");
+        }
 
-      function toggleDarkTheme(force) {
-        document.body.classList.toggle("dark", force);
-        localStorage.setItem(
-          "dark-theme",
-          document.body.classList.contains("dark")
+        document.documentElement.setAttribute(
+          "data-theme",
+          isDark ? "dark" : "light"
         );
+        // localStorage.setItem("dark-theme", isDark ? "true" : "false");
       }
     </script>
 
@@ -271,13 +302,13 @@
         ],
       };
     </script>
-    <script>
+    <!-- <script>
       window.addEventListener("DOMContentLoaded", () => {
         document
           .querySelector("aside")
           .prepend(document.querySelector(".theme-btn"));
       });
-    </script>
+    </script> -->
     <script src="https://www.unpkg.com/zod/lib/index.umd.js"></script>
   </body>
 </html>