feat: replace next-themes with a custom ThemeProvider

To be honest, next-themes was working fine. However since I use a theme
provider for Prism code blocks, some code is duplicated between this
app and the library. So I prefer to use a custom Provider without the
options I don't need.

1 files changed, 4 insertions, 11 deletions

diff --git a/src/components/organisms/forms/theme-toggle/theme-toggle.tsx b/src/components/organisms/forms/theme-toggle/theme-toggle.tsx
index 6026e1c..88f3c75 100644
--- a/src/components/organisms/forms/theme-toggle/theme-toggle.tsx
+++ b/src/components/organisms/forms/theme-toggle/theme-toggle.tsx
@@ -1,5 +1,4 @@
-import { useTheme } from 'next-themes';
-import { useCallback, type ChangeEvent, type FC } from 'react';
+import type { FC } from 'react';
 import { useIntl } from 'react-intl';
 import { Icon, Legend } from '../../../atoms';
 import {
@@ -7,6 +6,7 @@ import {
   type SwitchOption,
   type SwitchProps,
 } from '../../../molecules';
+import { useTheme } from 'src/utils/hooks';
 
 export type ThemeToggleProps = Omit<
   SwitchProps,
@@ -20,16 +20,9 @@ export type ThemeToggleProps = Omit<
  */
 export const ThemeToggle: FC<ThemeToggleProps> = (props) => {
   const intl = useIntl();
-  const { resolvedTheme, setTheme } = useTheme();
+  const { resolvedTheme, toggleTheme } = useTheme();
   const isDarkTheme = resolvedTheme === 'dark';
 
-  const updateTheme = useCallback(
-    (e: ChangeEvent<HTMLInputElement>) => {
-      setTheme(e.target.value === 'light' ? 'light' : 'dark');
-    },
-    [setTheme]
-  );
-
   const themeLabel = intl.formatMessage({
     defaultMessage: 'Theme:',
     description: 'ThemeToggle: theme label',
@@ -76,7 +69,7 @@ export const ThemeToggle: FC<ThemeToggleProps> = (props) => {
       items={options}
       legend={<Legend>{themeLabel}</Legend>}
       name="theme"
-      onSwitch={updateTheme}
+      onSwitch={toggleTheme}
       value={isDarkTheme ? 'dark' : 'light'}
     />
   );