theme switcher

vladkens · Jan 22, 2024 · 4d74cb2 · 4d74cb2
1 parent 9472c46
commit 4d74cb2
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 11 deletions.
diff --git a/index.html b/index.html
@@ -13,5 +13,9 @@
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
+    <script>
+      const isDark = localStorage.getItem("dark") === "true"
+      document.body.classList.toggle("dark", isDark)
+    </script>
   </body>
 </html>
diff --git a/src/app.tsx b/src/app.tsx
@@ -5,13 +5,29 @@ import { Timeline } from "./components/Timeline"
 import { TzListState } from "./state"
 import { getPlaceByTzName } from "./utils/places"
 
+const ChangeTheme: FC = () => {
+  const change = () => {
+    const isDark = !document.body.classList.contains("dark")
+    document.body.classList.toggle("dark", isDark)
+    localStorage.setItem("dark", isDark.toString())
+  }
+
+  return <button onClick={change}>ChangeTheme</button>
+}
+
 const Index: FC = () => {
   const [tzs, setTzs] = useAtom(TzListState)
   const places = tzs.map((tz) => getPlaceByTzName(tz))
 
   return (
     <div className="flex flex-col gap-2.5 py-2.5">
-      <SelectPlace values={places} onChange={(place) => setTzs((old) => [...old, place.tzName])} />
+      <div className="flex flex-row gap-2.5">
+        <SelectPlace
+          values={places}
+          onChange={(place) => setTzs((old) => [...old, place.tzName])}
+        />
+        <ChangeTheme />
+      </div>
 
       <div className="flex flex-col gap-2">
         {places.map((x, idx) => (

diff --git a/src/components/Timeline.tsx b/src/components/Timeline.tsx
@@ -83,8 +83,9 @@ export const Timeline: FC<{ place: Place }> = ({ place }) => {
             isHome && "border-orange-500",
           )}
           onClick={() => setTzHome(place.tzName)}
+          disabled={isHome}
         >
-          {isHome ? "><" : withSign((place.tzOffset - refPlace.tzOffset) / 60)}
+          {isHome ? "🏠" : withSign((place.tzOffset - refPlace.tzOffset) / 60)}
         </button>
 
         <TzInfo place={place} />

diff --git a/src/index.css b/src/index.css
@@ -2,6 +2,34 @@
 @tailwind components;
 @tailwind utilities;
 
-body {
-  @apply bg-gray-100;
+/* 
+- https://ui.shadcn.com/themes
+- https://daisyui.com/docs/colors/
+- https://github.com/saadeghi/daisyui/blob/master/src/theming/themes.js
+*/
+
+@layer base {
+  :root {
+    --base-100: #f1f1f1;
+    --base-200: #dbdbdb;
+    --base-300: #c6c6c6;
+    --base-txt: #141414;
+  }
+
+  .dark {
+    --base-100: #0a0a0b;
+    --base-200: #171718;
+    --base-300: #2f2d30;
+    --base-txt: #dca54d;
+  }
+}
+
+@layer base {
+  * {
+    /* @apply border-border; */
+  }
+
+  body {
+    @apply bg-base text-base-txt;
+  }
 }
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -1,11 +1,12 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-  ],
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+  darkMode: "class",
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        base: { DEFAULT: "var(--base-100)", txt: "var(--base-txt)" },
+      },
+    },
   },
-  plugins: [],
-}
+}