Dark & Light mode

Indra — Mon, 29 Jan 2024 04:33:42 +0000

The dark mode is ideal for reducing eye strain in low-light conditions and conserving battery power. It might also enhance focus and productivity, particularly for late-night workers. On the other hand, the light mode can improve reading comprehension, speed and might even foster creativity.

import { useEffect, useState } from "react";
import { LuMoonStar } from "react-icons/lu";
import { MdOutlineWbSunny } from "react-icons/md";

export function ThemeChanger() {
  const [theme, setTheme] = useState("light"); // dark

  function changeTheme() {
    if (theme === "light") {
      setTheme("dark");
      document.documentElement.classList.add("dark");
      localStorage.setItem("theme", "dark");
    } else {
      setTheme("light");
      document.documentElement.classList.remove("dark");
      localStorage.setItem("theme", "light");
    }
  }

  // called only once after component creation. (Component Uuseh uydee gants udaa ajilladag)
  useEffect(() => {
    const localTheme = localStorage.getItem("theme");
    setTheme(localTheme);
    document.documentElement.classList.add(localTheme);

    console.log("Called only once");
  }, []);

  console.log("Called every Render");

  return (
    <button onClick={changeTheme}>
      {theme === "dark" ? <LuMoonStar /> : <MdOutlineWbSunny />}
    </button>
  );
}

DEV Community: Indra

Dark & Light mode