hoda-react
Version:
<div align="center"> <h1>:construction: flowbite-react (unreleased) :construction:</h1> <p> <a href="https://flowbite-react.com"> <img alt="Flowbite - Tailwind CSS components" width="350" src=".github/assets/flowbite-react-github.png"> <
29 lines (28 loc) • 1.14 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { useEffect, useMemo } from 'react';
import { mergeDeep } from '../../helpers/mergeDeep';
import windowExists from '../../helpers/window-exists';
import defaultTheme from '../../theme/default';
import { ThemeContext, useTheme, useThemeMode } from './ThemeContext';
export const Flowbite = ({ children, theme = {} }) => {
const { theme: customTheme = {}, dark, usePreferences = true } = theme;
const [mode, setMode, toggleMode] = useThemeMode(usePreferences);
const mergedTheme = mergeDeep(defaultTheme, customTheme);
useEffect(() => {
if (dark) {
if (setMode != null) {
setMode('dark');
}
if (windowExists()) {
document.documentElement.classList.add('dark');
}
}
}, [dark, setMode]);
const themeContextValue = useMemo(() => ({
theme: mergedTheme,
mode,
toggleMode,
}), [mode, toggleMode, mergedTheme]);
return _jsx(ThemeContext.Provider, { value: themeContextValue, children: children });
};
export { useTheme, useThemeMode };