Merge pull request #23 from nunawa/16-add-dark-mode

16 add dark mode
nunawa · Jul 16, 2024 · 7a84da3 · 7a84da3
2 parents c567434 + 8e981d1
commit 7a84da3
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 3 deletions.
diff --git a/jotai/atom.js b/jotai/atom.js
@@ -1,4 +1,5 @@
 import { atom } from "jotai";
+import { atomWithStorage } from "jotai/utils";
 
 export const selectedProductsAtom = atom({
   cpu: null,
@@ -7,3 +8,5 @@ export const selectedProductsAtom = atom({
   gpu: null,
   ssd: null,
 });
+
+export const themeAtom = atomWithStorage("default");
diff --git a/pages/_document.js b/pages/_document.js
@@ -2,7 +2,7 @@ import { Html, Head, Main, NextScript } from "next/document";
 
 export default function Document() {
   return (
-    <Html lang="en">
+    <Html lang="en" data-bs-theme="light">
       <Head />
       <body>
         <script

diff --git a/pages/index.js b/pages/index.js
@@ -1,17 +1,21 @@
 import BuildTab from "@/components/BuildTab";
 import PartsTab from "@/components/PartsTab";
 import TotalPrice from "@/components/TotalPrice";
+import { themeAtom } from "@/jotai/atom";
 import styles from "@/styles/TabNav.module.scss";
-import { useState } from "react";
+import { useAtom } from "jotai";
+import { useEffect, useState } from "react";
 import {
   Col,
   Container,
   Dropdown,
   Nav,
   Navbar,
+  NavDropdown,
   Row,
   Tab,
 } from "react-bootstrap";
+import { BsMoonFill, BsPcDisplay, BsSunFill } from "react-icons/bs";
 import useSWRImmutable from "swr/immutable";
 
 const fetcher = (...args) => fetch(...args).then((res) => res.arrayBuffer());
@@ -122,6 +126,69 @@ function TabContainer({ buf, sql }) {
   );
 }
 
+function ThemeDropdown() {
+  const [theme, setThemeAtom] = useAtom(themeAtom);
+
+  useEffect(() => {
+    let targetTheme = theme;
+
+    if (theme === "default") {
+      targetTheme = window.matchMedia("(prefers-color-scheme: dark)").matches
+        ? "dark"
+        : "light";
+    }
+
+    if (targetTheme === "light") {
+      document.documentElement.dataset.bsTheme = targetTheme;
+    } else if (targetTheme === "dark") {
+      document.documentElement.dataset.bsTheme = targetTheme;
+    }
+  }, [theme]);
+
+  function setTheme(t) {
+    if (t === "default") {
+      const defaultTheme = window.matchMedia("(prefers-color-scheme: dark)")
+        .matches
+        ? "dark"
+        : "light";
+      document.documentElement.dataset.bsTheme = defaultTheme;
+      setThemeAtom("default");
+    } else if (t === "light") {
+      document.documentElement.dataset.bsTheme = "light";
+      setThemeAtom("light");
+    } else if (t === "dark") {
+      document.documentElement.dataset.bsTheme = "dark";
+      setThemeAtom("dark");
+    }
+  }
+
+  function ThemeIcon({ t }) {
+    if (t === "default") {
+      return <BsPcDisplay />;
+    } else if (t === "light") {
+      return <BsSunFill />;
+    } else if (t === "dark") {
+      return <BsMoonFill />;
+    }
+  }
+
+  return (
+    <>
+      <NavDropdown title={<ThemeIcon t={theme} />}>
+        <NavDropdown.Item onClick={() => setTheme("light")}>
+          Light
+        </NavDropdown.Item>
+        <NavDropdown.Item onClick={() => setTheme("dark")}>
+          Dark
+        </NavDropdown.Item>
+        <NavDropdown.Item onClick={() => setTheme("default")}>
+          System
+        </NavDropdown.Item>
+      </NavDropdown>
+    </>
+  );
+}
+
 export default function Home() {
   const { buf } = useBuf();
   const [sql, setSql] = useState();
@@ -137,10 +204,11 @@ export default function Home() {
 
   return (
     <>
-      <Navbar className="mb-3" bg="light">
+      <Navbar className="mb-3 border-bottom">
         <Container>
           <Navbar.Brand href="/">jisaku.nunawa.net</Navbar.Brand>
           <Nav className="ms-auto">
+            <ThemeDropdown />
             <Nav.Link href="/about">About</Nav.Link>
           </Nav>
         </Container>