Add light/dark mode functionality

2026-08-14 07:33:07 +08:00 · 2022-09-09 00:48:23 +06:30
parent 74efc50049
commit f995485c09
3 changed files with 35 additions and 1 deletions
@@ -59,3 +59,18 @@
    @apply w-6 h-6 fill-skin-base hover:fill-skin-accent;
  }
 </style>
+
+<script>
+  const themeBtn = document.querySelector("#theme-btn");
+  const htmlClassList = document.querySelector("html")?.classList;
+
+  themeBtn?.addEventListener("click", function () {
+    if (htmlClassList?.contains("theme-dark")) {
+      localStorage.setItem("theme", "light");
+      htmlClassList?.remove("theme-dark");
+    } else {
+      localStorage.setItem("theme", "dark");
+      htmlClassList?.add("theme-dark");
+    }
+  });
+</script>
@@ -35,8 +35,19 @@ const { title } = Astro.props;
      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap"
      rel="stylesheet"
    />
+
+    <script is:inline>
+      // Get theme data from local storage
+      const currentTheme = localStorage.getItem("theme");
+
+      // Set theme to 'theme-dark' if currentTheme is 'dark'
+      const theme = currentTheme === "dark" ? "theme-dark" : "";
+
+      // Put dark class on html tag to enable dark mode
+      document.querySelector("html").className = theme;
+    </script>
  </head>
-  <body>
+  <body class="font-mono bg-skin-fill text-skin-base">
    <slot />
  </body>
 </html>
@@ -19,6 +19,14 @@
    --color-card: 63, 75, 90;
    --color-border: 236, 233, 233;
  }
+  #sun-svg,
+  .theme-dark #moon-svg {
+    display: none;
+  }
+  #moon-svg,
+  .theme-dark #sun-svg {
+    display: block;
+  }
 }

@layer components {