leumas-private-shared/src/Theme/ThemeToggleButton.jsx

Private React JSX Package For Leumas Shared Components, Headers, Footers, Asides, Login Pages, API Key Manager and much more. Styles and everything reusable to avoid DRY code across all of our subdomains

import { FaMoon, FaSun } from 'react-icons/fa';
import { useTheme } from './ThemeContext'; 
import React from 'react';

const ThemeToggleButton = () => {
  const { theme, toggleTheme } = useTheme();

  return (
    <button
      onClick={toggleTheme}
      className="bg-transparent border-none cursor-pointer p-2 rounded-full
                 transition duration-500 ease-in-out transform hover:scale-110
                 focus:outline-none"
      style={{ position: 'relative', display: 'inline-block', width: '50px', height: '50px' }}
    >
      <div
        className="absolute"
        style={{
          transition: 'opacity 500ms ease-in-out',
          opacity: theme === 'light' ? 1 : 0,
          position: 'absolute',
          inset: 0,
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
        }}
      >
        <FaMoon className="text-xl text-blue-500" />
      </div>
      <div
        className="absolute"
        style={{
          transition: 'opacity 500ms ease-in-out',
          opacity: theme === 'dark' ? 1 : 0,
          position: 'absolute',
          inset: 0,
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
        }}
      >
        <FaSun className="text-xl text-blue-300" />
      </div>
    </button>
  );
};

export default ThemeToggleButton;