supanextail/components/UI/ThemeToggle.tsx

/*
This component will handle the theme (dark/light). You are able to change the selected theme line 9.
DaisyUI have more than 10 themes availables https://daisyui.com/docs/default-themes
*/

import { HiOutlineMoon, HiOutlineSun } from 'react-icons/hi';
import { useEffect, useState } from 'react';

const theme = {
  primary: 'supaTheme',
  secondary: 'dark',
};

const ThemeToggle = (): JSX.Element => {
  const [activeTheme, setActiveTheme] = useState(
    document.body.dataset.theme || ''
  );
  const inactiveTheme = activeTheme === 'supaTheme' ? 'dark' : 'supaTheme';

  useEffect(() => {
    document.body.dataset.theme = activeTheme;
    window.localStorage.setItem('theme', activeTheme);
  }, [activeTheme]);

  return (
    <button className="flex ml-3" onClick={() => setActiveTheme(inactiveTheme)}>
      {activeTheme === theme.secondary ? (
        <HiOutlineSun className="m-auto text-xl hover:text-accent" />
      ) : (
        <HiOutlineMoon className="m-auto text-xl hover:text-accent" />
      )}
    </button>
  );
};

export default ThemeToggle;