feat(component): theme support to darkthemetoggle (#199)

* feat(component): theme support to darkthemetoggle * refactor(component): clean up code
themesberg · Jun 6, 2022 · 1ab7160 · 1ab7160
1 parent 957ea45
commit 1ab7160
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 7 deletions.
diff --git a/src/lib/components/DarkThemeToggle/index.tsx b/src/lib/components/DarkThemeToggle/index.tsx
@@ -1,23 +1,29 @@
-import type { FC } from 'react';
+import type { ComponentProps, FC } from 'react';
 import { useContext } from 'react';
 import { HiMoon, HiSun } from 'react-icons/hi';
-import { ThemeContext } from '../Flowbite/ThemeContext';
+import { excludeClassName } from '../../helpers/exclude';
+import { ThemeContext, useTheme } from '../Flowbite/ThemeContext';
 
-export const DarkThemeToggle: FC = () => {
+export type DarkThemeToggleProps = Omit<ComponentProps<'button'>, 'className'>;
+
+export const DarkThemeToggle: FC<DarkThemeToggleProps> = (props) => {
+  const theirProps = excludeClassName(props);
+  const theme = useTheme().theme.darkThemeToggle;
   const { mode, toggleMode } = useContext(ThemeContext);
 
   return (
     <button
-      className="rounded-lg p-2.5 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
+      className={theme.base}
       data-testid="dark-theme-toggle"
       onClick={toggleMode}
       type="button"
+      aria-label="Toggle dark mode"
+      {...theirProps}
     >
-      <span className="sr-only">Toggle dark mode</span>
       {mode === 'dark' ? (
-        <HiSun className="h-5 w-5" data-testid="dark-theme-toggle-disabled" />
+        <HiSun aria-hidden className={theme.icon} data-testid="dark-theme-toggle-disabled" />
       ) : (
-        <HiMoon className="h-5 w-5" data-testid="dark-theme-toggle-enabled" />
+        <HiMoon aria-hidden className={theme.icon} data-testid="dark-theme-toggle-enabled" />
       )}
     </button>
   );

diff --git a/src/lib/components/Flowbite/FlowbiteTheme.ts b/src/lib/components/Flowbite/FlowbiteTheme.ts
@@ -143,6 +143,10 @@ export interface FlowbiteTheme {
       snap: string;
     };
   };
+  darkThemeToggle: {
+    base: string;
+    icon: string;
+  };
   modal: {
     base: string;
     show: FlowbiteBoolean;

diff --git a/src/lib/theme/default.ts b/src/lib/theme/default.ts
@@ -259,6 +259,10 @@ export default {
       snap: 'snap-x',
     },
   },
+  darkThemeToggle: {
+    base: 'rounded-lg p-2.5 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-700',
+    icon: 'h-5 w-5',
+  },
   modal: {
     base: 'fixed top-0 right-0 left-0 z-50 h-modal overflow-y-auto overflow-x-hidden md:inset-0 md:h-full',
     show: {