refactor: organizing theme component

src/lib/components/Accordion/AccordionContent.tsx

@@ -1,6 +1,7 @@
 import cn from 'classnames';
 import { ComponentProps, FC } from 'react';
-import { useTheme } from '../../../hooks/useTheme';
+import { useTheme } from '../Flowbite/ThemeContext';
+
 import { useAccordionContext } from './AccordionPanelContext';
 
 export const AccordionContent: FC<ComponentProps<'div'>> = ({ children, ...props }) => {

src/lib/components/Accordion/AccordionTitle.tsx

@@ -2,7 +2,7 @@ import { ComponentProps, FC } from 'react';
 import cn from 'classnames';
 import { HiChevronDown } from 'react-icons/hi';
 import { useAccordionContext } from './AccordionPanelContext';
-import { useTheme } from '../../../hooks/useTheme';
+import { useTheme } from '../Flowbite/ThemeContext';
 
 export type AccordionTitleProps = ComponentProps<'button'> & {
   arrowIcon?: FC<ComponentProps<'svg'>>;

src/lib/components/Accordion/index.tsx

@@ -3,7 +3,7 @@ import { AccordionPanel, AccordionPanelProps } from './AccordionPanel';
 import { AccordionTitle } from './AccordionTitle';
 import { AccordionContent } from './AccordionContent';
 import cn from 'classnames';
-import { useTheme } from '../../../hooks/useTheme';
+import { useTheme } from '../Flowbite/ThemeContext';
 
 export type AccordionProps = PropsWithChildren<{
   flush?: boolean;

src/lib/components/DarkThemeToggle/index.tsx

@@ -1,6 +1,6 @@
 import { FC, useContext } from 'react';
 import { HiMoon, HiSun } from 'react-icons/hi';
-import { ThemeContext } from '../../contexts/ThemeContext';
+import { ThemeContext } from '../Flowbite/ThemeContext';
 
 export const DarkThemeToggle: FC = () => {
   const { mode, toggleMode } = useContext(ThemeContext);

src/hooks/useDarkMode.ts → src/lib/components/Flowbite/ThemeContext.tsx

@@ -1,8 +1,33 @@
 /* eslint-disable react-hooks/rules-of-hooks */
-import { useEffect, useState } from 'react';
-import { Mode } from '../lib/contexts/ThemeContext';
+import { FC, ReactNode, createContext, useContext, useState, useEffect } from 'react';
+import defaultTheme from '../../theme/default';
 
-export const useDarkMode = (
+export type Mode = string | undefined | 'light' | 'dark';
+
+interface ThemeContextProps {
+  theme: any;
+  mode?: Mode;
+  toggleMode?: () => void | null;
+}
+
+export const ThemeContext = createContext<ThemeContextProps>({
+  theme: defaultTheme,
+});
+
+interface ThemeProviderProps {
+  children: ReactNode;
+  value?: any;
+}
+
+export const ThemeProvider: FC<ThemeProviderProps> = ({ children, value }) => {
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+};
+
+export function useTheme(): ThemeContextProps {
+  return useContext(ThemeContext);
+}
+
+export const useThemeMode = (
   usePreferences: boolean,
 ): [Mode, React.Dispatch<React.SetStateAction<Mode>> | undefined, (() => void) | undefined] => {
   if (!usePreferences) return [undefined, undefined, undefined];
@@ -33,5 +58,3 @@ export const useDarkMode = (
 
   return [mode, setMode, toggleMode];
 };
-
-export default useDarkMode;

src/lib/components/Flowbite/index.tsx

@@ -1,18 +1,17 @@
 import { FC, HTMLAttributes, useLayoutEffect, useMemo } from 'react';
-import useDarkMode from '../../../hooks/useDarkMode';
-import { ThemeContext } from '../../contexts/ThemeContext';
+import { ThemeContext, useThemeMode } from './ThemeContext';
 import { mergeDeep } from '../../helpers/mergeDeep';
 import defaultTheme from '../../theme/default';
 
 interface FlowbiteProps extends HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
-  theme?: any;
+  theme?: object;
   dark?: boolean;
   usePreferences?: boolean;
 }
 
 export const Flowbite: FC<FlowbiteProps> = ({ children, theme: customTheme, dark, usePreferences = true }) => {
-  const [mode, setMode, toggleMode] = useDarkMode(usePreferences);
+  const [mode, setMode, toggleMode] = useThemeMode(usePreferences);
 
   const mergedTheme = mergeDeep(defaultTheme, customTheme);