feat(/lib/components/flowbite): remove usePreferences (#582)

* fix(flowbite themeprops): fix bug with user preferences overriding dark = false

Found an issue where userpreferences when set to true overrides dark = false in theme props which is
a confusing developer experience

fix #581

* fix(theme): removed usePreferences

Fixes bug with dark = false not working. Removed usePreferences because of potential legal issues
due to GDPR

BREAKING CHANGE: ThemeProps no longer includes usePreferences

fix #565, fix #581

* refactor(theme): refactor useThemeMode

Refactored useThemeMode to fetch context state

* refactor(theme): improve readability

improve readability and fix merge conflicts. Update documentation for ThemePage

#565

* refactor(theme): remove === check for false to set light mode

Since we're no longer using localStorage no need to hard check for false

Author: haron68

src/docs/pages/ThemePage.tsx

@@ -246,7 +246,7 @@ const ReadTheThemeSection: FC = () => {
           {`const theme = useTheme().theme.button; // -> { base: "..", color: { ... }, ... }`}
         </SyntaxHighlighter>
         <SyntaxHighlighter language="tsx" style={dracula}>
-          {`const [mode, setMode, toggleMode] = useThemeMode(usePreferences); // -> ["light", ..]`}
+          {`const [mode, setMode, toggleMode] = useThemeMode(); // -> ["light", ..]`}
         </SyntaxHighlighter>
       </Card>
     </section>

src/lib/components/DarkThemeToggle/DarkThemeToggle.spec.tsx

@@ -19,22 +19,4 @@ describe('Dark theme toggle', () => {
     expect(screen.queryByLabelText('Currently light mode')).not.toBeInTheDocument();
     expect(screen.queryByLabelText('Currently dark mode')).toBeInTheDocument();
   });
-
-  it('should toggle the theme with `usePreferences` is false', async () => {
-    const user = userEvent.setup();
-    render(
-      <Flowbite theme={{ usePreferences: false }}>
-        <DarkThemeToggle />
-      </Flowbite>,
-    );
-
-    expect(screen.queryByLabelText('Currently light mode')).toBeInTheDocument();
-    expect(screen.queryByLabelText('Currently dark mode')).not.toBeInTheDocument();
-
-    await user.tab();
-    await user.keyboard('[Space]');
-
-    expect(screen.queryByLabelText('Currently light mode')).not.toBeInTheDocument();
-    expect(screen.queryByLabelText('Currently dark mode')).toBeInTheDocument();
-  });
 });

src/lib/components/Flowbite/Flowbite.spec.tsx

@@ -1,14 +1,10 @@
 import { act, render } from '@testing-library/react';
-import { afterEach, describe, expect, it } from 'vitest';
+import { describe, expect, it } from 'vitest';
 import { mergeDeep } from '../../helpers/mergeDeep';
 import defaultTheme from '../../theme/default';
 import { Flowbite, useTheme } from '../Flowbite';
 import type { ThemeContextProps } from './ThemeContext';
 
-afterEach(() => {
-  localStorage.removeItem('theme');
-});
-
 describe('Components / Flowbite', () => {
   describe('hook / useTheme', () => {
     it('should return default values', () => {
@@ -49,19 +45,6 @@ describe('Components / Flowbite', () => {
       expect(theme).toEqual(mergedTheme);
     });
 
-    it('should return darkmode', () => {
-      render(
-        <Flowbite theme={{ dark: true }}>
-          <TestComponent />
-        </Flowbite>,
-      );
-
-      const { mode } = context;
-
-      expect(mode).toBe('dark');
-      expect(documentEl()).toHaveClass('dark');
-    });
-
     it('should toggle mode', () => {
       render(
         <Flowbite>
@@ -83,6 +66,19 @@ describe('Components / Flowbite', () => {
       expect(mode2).toBe('dark');
       expect(documentEl()).toHaveClass('dark');
     });
+
+    it('should return darkmode', () => {
+      render(
+        <Flowbite theme={{ dark: true }}>
+          <TestComponent />
+        </Flowbite>,
+      );
+
+      const { mode } = context;
+
+      expect(mode).toBe('dark');
+      expect(documentEl()).toHaveClass('dark');
+    });
   });
 });
 

src/lib/components/Flowbite/Flowbite.tsx

@@ -10,7 +10,6 @@ import { ThemeContext, useTheme, useThemeMode } from './ThemeContext';
 export interface ThemeProps {
   dark?: boolean;
   theme?: DeepPartial<FlowbiteTheme>;
-  usePreferences?: boolean;
 }
 
 interface FlowbiteProps extends HTMLAttributes<HTMLDivElement> {
@@ -19,8 +18,8 @@ interface FlowbiteProps extends HTMLAttributes<HTMLDivElement> {
 }
 
 export const Flowbite: FC<FlowbiteProps> = ({ children, theme = {} }) => {
-  const { theme: customTheme = {}, dark, usePreferences = true } = theme;
-  const [mode, setMode, toggleMode] = useThemeMode(usePreferences);
+  const { theme: customTheme = {}, dark } = theme;
+  const [mode, setMode, toggleMode] = useThemeMode();
 
   const mergedTheme = mergeDeep(defaultTheme, customTheme);
 
@@ -33,6 +32,14 @@ export const Flowbite: FC<FlowbiteProps> = ({ children, theme = {} }) => {
       if (windowExists()) {
         document.documentElement.classList.add('dark');
       }
+    } else {
+      if (setMode != null) {
+        setMode('light');
+      }
+
+      if (windowExists()) {
+        document.documentElement.classList.remove('dark');
+      }
     }
   }, [dark, setMode]);
 

src/lib/components/Flowbite/ThemeContext.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/rules-of-hooks */
 import type { FC, ReactNode } from 'react';
 import { createContext, useCallback, useContext, useEffect, useState } from 'react';
 import windowExists from '../../helpers/window-exists';
@@ -29,20 +30,17 @@ export function useTheme(): ThemeContextProps {
   return useContext(ThemeContext);
 }
 
-export const useThemeMode = (
-  usePreferences: boolean,
-): [Mode, React.Dispatch<React.SetStateAction<Mode>>, () => void] => {
-  const [mode, setModeState] = useState<Mode>('light');
-
-  const savePreference = (mode: Mode) => localStorage.setItem('theme', mode);
+export const useThemeMode = (): [Mode, React.Dispatch<React.SetStateAction<Mode>>, () => void] => {
   const userPreferenceIsDark = () => window.matchMedia?.('(prefers-color-scheme: dark)').matches;
-  const toggleMode = () => {
+  const getPrefersColorScheme = (): Mode => (userPreferenceIsDark() ? 'dark' : 'light');
+  const onToggleMode = () => {
     const newMode = mode === 'dark' ? 'light' : 'dark';
     setMode(newMode);
     setModeState(newMode);
   };
+  const { mode: contextMode, toggleMode = onToggleMode } = useContext(ThemeContext);
+  const [mode, setModeState] = useState<Mode>(contextMode ? contextMode : getPrefersColorScheme());
   const setMode = useCallback((mode: Mode) => {
-    savePreference(mode);
     if (!windowExists()) {
       return;
     }
@@ -56,19 +54,11 @@ export const useThemeMode = (
   }, []);
 
   useEffect(() => {
-    if (usePreferences) {
-      const getPreference = (): Mode => (localStorage.getItem('theme') as Mode) || getPrefersColorScheme();
-      const getPrefersColorScheme = (): Mode => (userPreferenceIsDark() ? 'dark' : 'light');
-
-      setModeState(getPreference());
-    }
-  }, [usePreferences]);
-
-  useEffect(() => {
-    if (usePreferences) {
-      setMode(mode);
+    if (contextMode) {
+      setMode(contextMode);
+      setModeState(contextMode);
     }
-  }, [mode, setMode, usePreferences]);
+  }, [contextMode, setMode, setModeState]);
 
   return [mode, setModeState, toggleMode];
 };