dark and light mood toggle in react and tailwind

mimo S answered on March 14, 2024 Popularity 1/10 Helpfulness 1/10

answer dark and light mood toggle in react and tailwind

dark and light mood toggle in react and tailwind

Comment

import { useState, useEffect } from "react";
import { CiDark, CiLight } from "react-icons/ci";

const ModeSwitcher = () => {
  const [theme, setTheme] = useState(
    localStorage.theme === "dark" ? "dark" : "light"
  );

  useEffect(() => {
    if (theme === "dark") {
      document.documentElement.classList.add("dark");
    } else {
      document.documentElement.classList.remove("dark");
    }
    localStorage.theme = theme;
  }, [theme]);

  const toggleTheme = () => {
    setTheme(theme === "dark" ? "light" : "dark");
  };

  return (
    <div className="flex items-center">
      <div className="flex" onClick={toggleTheme}>
        <div className="flex-initial w-64 font-bold underline decoration-sky-500 text-red-800">
          {theme === "dark" ? <CiDark /> : <CiLight />}
        </div>
      </div>
    </div>
  );
};

export default ModeSwitcher;

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: chat.openai.com

Tags: javascript light toggle

Link to this answer
Share Copy Link

Contributed on Mar 14 2024

mimo S

0 Answers Avg Quality 2/10

Continue with Google

By continuing, I agree that I have read and agree to Greppers's Terms of Service and Privacy Policy.

dark and light mood toggle in react and tailwind

Contents

More Related Answers

dark and light mood toggle in react and tailwind

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.