ThemeToggleButton Component with ParkUI

theme-toggle-button.tsx

'use client'
/**
 * ThemeToggleButton Component
 *
 * npm install next-themes react-icons --force
 */
import { useTheme } from 'next-themes'
import { MdOutlineDarkMode, MdOutlineLightMode } from 'react-icons/md'

import { Button } from '../button'

export default function ThemeToggleButton() {
    const { theme, setTheme } = useTheme()

    return (
        <div>
            <Button
                variant="ghost"
                onClick={() => {
                    if (theme === 'light') {
                        setTheme('dark')
                    } else {
                        setTheme('light')
                    }
                }}
            >
                {theme !== 'light' ? <MdOutlineLightMode /> : <MdOutlineDarkMode />}
            </Button>
        </div>
    )
}

// EOF