tailwind class theme mode

src/components/layout/Header/DarkModeButton.tsx

@@ -1,19 +1,23 @@
-import { themeAtom, toggleThemeAtom } from "@/atoms/theme";
-import { useAtomValue, useSetAtom } from "jotai";
 import { Moon, Sun } from "lucide-react";
+import { getTheme, setStartTheme, toggleTheme } from "@/utils/theme";
+import { useEffect, useState } from "react";
 
 export default function DarkModeButton() {
-  const theme = useAtomValue(themeAtom);
-  const toggleTheme = useSetAtom(toggleThemeAtom);
+  const [isDark, setIsDark] = useState<boolean>(getTheme() === "dark");
 
-  const toggleDarkMode = () => {
+  useEffect(() => {
+    setStartTheme();
+  }, []);
+
+  const handleThemeChange = () => {
     toggleTheme();
+    setIsDark(!isDark);
   };
 
   return (
     <div className="flex p-3 lg:pr-0 z-50">
-      <button onClick={toggleDarkMode}>
-        {theme === "dark" ? (
+      <button onClick={handleThemeChange}>
+        {isDark ? (
           <Sun className="w-8 h-8 lg:w-9 lg:h-9" strokeWidth={1.6} />
         ) : (
           <Moon className="w-8 h-8 lg:w-9 lg:h-9" strokeWidth={1.6} />

src/components/layout/Header/Logo.tsx

@@ -6,7 +6,7 @@ export default function Logo() {
       <div className="flex items-center justify-center gap-2 lg:gap-3 lg:pb-1 z-50">
         <div className="relative z-50">
           <div className="bg-lightBlue absolute w-6 h-6 lg:w-7 lg:h-7 rounded-[10%_90%_100%_0%_/_0%_100%_0%_100%]" />
-          <div className="bg-darkBlue ml-[7px] w-6 h-6 lg:w-7 lg:h-7 rounded-[90%_10%_0%_100%_/_100%_0%_100%_0%]" />
+          <div className="bg-red-600 dark:bg-darkBlue ml-[7px] w-6 h-6 lg:w-7 lg:h-7 rounded-[90%_10%_0%_100%_/_100%_0%_100%_0%]" />
         </div>
         <p className="font-bold text-2xl sm:text-[1.7rem] lg:text-3xl z-50">
           Quizer

src/utils/theme.ts

@@ -0,0 +1,26 @@
+export const toggleTheme = () => {
+  const htmlTag = document.querySelector("html");
+
+  if (htmlTag?.classList.contains("light")) {
+    htmlTag.setAttribute('class', 'dark');
+    localStorage.setItem('theme', 'dark')
+  } else {
+    htmlTag?.setAttribute('class', 'light');
+    localStorage.setItem('theme', 'light')
+  }
+};
+
+export const getTheme = (): string => {
+  const theme = localStorage.getItem('theme')
+  return theme ? theme : "dark"
+}
+
+export const setStartTheme = () => {
+  const htmlTag = document.querySelector("html");
+
+  if (localStorage.getItem("theme") === 'light') {
+    htmlTag?.setAttribute('class', 'light');
+  } else {
+    htmlTag?.setAttribute('class', 'dark');
+  }
+}

tailwind.config.js

@@ -1,6 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 export default {
   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+  darkMode: "class",
   theme: {
     extend: {
       colors: {