feishin/src/remote/components/buttons/theme-button.tsx

import { useIsDark, useToggleDark } from '/@/remote/store';
import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
import { Icon } from '/@/shared/components/icon/icon';

export const ThemeButton = () => {
    const isDark = useIsDark();
    const toggleDark = useToggleDark();

    const handleToggleTheme = () => {
        toggleDark();
    };

    return (
        <ActionIcon
            onClick={handleToggleTheme}
            tooltip={{
                label: 'Toggle Theme',
            }}
            variant="default"
        >
            {isDark ? (
                <Icon
                    icon="themeLight"
                    size={30}
                />
            ) : (
                <Icon
                    icon="themeDark"
                    size={30}
                />
            )}
        </ActionIcon>
    );
};