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, 7 insertions, 7 deletions

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index f3f374f..d5cc8cc 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -1,13 +1,17 @@
 import type { Decorator, Preview } from '@storybook/react';
-import { ThemeProvider, useTheme } from 'next-themes';
 import { useDarkMode } from 'storybook-dark-mode';
 import { FC, ReactNode, useEffect } from 'react';
 import { IntlProvider } from 'react-intl';
-import { AckeeProvider, MotionProvider } from '../src/utils/providers';
+import {
+  AckeeProvider,
+  MotionProvider,
+  ThemeProvider,
+} from '../src/utils/providers';
 import '../src/styles/globals.scss';
 import { DocsContainer } from './overrides/docs-container';
 import dark from './themes/dark';
 import light from './themes/light';
+import { useTheme } from '../src/utils/hooks';
 
 type ThemeWrapperProps = {
   children: ReactNode;
@@ -28,11 +32,7 @@ export const ThemeWrapper: FC<ThemeWrapperProps> = ({ children }) => {
 const withAllProviders: Decorator = (Story) => {
   return (
     <IntlProvider locale="en">
-      <ThemeProvider
-        defaultTheme="system"
-        enableColorScheme={true}
-        enableSystem={true}
-      >
+      <ThemeProvider attribute="theme" storageKey="theme">
         <MotionProvider attribute="reduced-motion" storageKey="reduced-motion">
           <AckeeProvider
             domainId="any"