@vertisanpro/flowbite-react/lib/src/components/DarkThemeToggle/DarkThemeToggle.js

Non-Official React components built for Flowbite and Tailwind CSS

'use client';
import { HiMoon, HiSun } from '@vertisanpro/react-icons/hi';
import { twMerge } from '@vertisanpro/tailwind-merge';
import React from 'react';
import { mergeDeep } from '../../helpers/merge-deep';
import { useIsMounted } from '../../hooks/use-is-mounted';
import { useThemeMode } from '../../hooks/use-theme-mode';
import { getTheme } from '../../theme-store';
export const DarkThemeToggle = ({ className, theme: customTheme = {}, iconDark: IconDark = HiSun, iconLight: IconLight = HiMoon, ...props }) => {
    const isMounted = useIsMounted();
    const { computedMode, toggleMode } = useThemeMode();
    const theme = mergeDeep(getTheme().darkThemeToggle, customTheme);
    return (React.createElement("button", { type: "button", "aria-label": "Toggle dark mode", "data-testid": "dark-theme-toggle", className: twMerge(theme.root.base, className), onClick: toggleMode, ...props },
        React.createElement(IconDark, { "aria-label": "Currently dark mode", "data-active": isMounted && computedMode === 'dark', className: twMerge(theme.root.icon, 'hidden dark:block') }),
        React.createElement(IconLight, { "aria-label": "Currently light mode", "data-active": isMounted && computedMode === 'light', className: twMerge(theme.root.icon, 'dark:hidden') })));
};
DarkThemeToggle.displayName = 'DarkThemeToggle';