Properly handle theme with next-themes

Author: HriBB

demo/components/content/code.tsx

@@ -1,5 +1,4 @@
-import { useAppContext } from 'components/context';
-import { CodeBlock, anOldHope, hybrid } from 'react-code-blocks';
+import { CopyBlock, anOldHope } from 'react-code-blocks';
 
 // https://github.com/rajinwonderland/react-code-blocks
 
@@ -16,16 +15,14 @@ export const Code = ({
   showLineNumbers = true,
   wrapLongLines = true,
 }: Props) => {
-  const [state] = useAppContext();
   return (
     <div className="text-sm font-fira">
-      <CodeBlock
+      <CopyBlock
         text={text}
         language={language}
         showLineNumbers={showLineNumbers}
         wrapLongLines={wrapLongLines}
-        theme={state.theme === 'light' ? hybrid : anOldHope}
-        //theme={tomorrowNight}
+        theme={anOldHope}
       />
     </div>
   );

demo/components/context.tsx

@@ -2,13 +2,11 @@ import { createContext, useContext, useReducer } from 'react';
 
 type State = {
   drawerOpen: boolean;
-  theme: 'light' | 'dark';
 };
 
 type Action =
   | { type: 'setDrawerOpen'; open: boolean }
-  | { type: 'toggleDrawer' }
-  | { type: 'toggleTheme' };
+  | { type: 'toggleDrawer' };
 
 type Reducer = React.Reducer<State, Action>;
 type Dispatch = React.Dispatch<Action>;
@@ -22,9 +20,6 @@ const reducer = (state: State, action: Action): State => {
     case 'toggleDrawer': {
       return { ...state, drawerOpen: !state.drawerOpen };
     }
-    case 'toggleTheme': {
-      return { ...state, theme: state.theme === 'light' ? 'dark' : 'light' };
-    }
     default: {
       return state;
     }
@@ -33,7 +28,6 @@ const reducer = (state: State, action: Action): State => {
 
 const initialState: State = {
   drawerOpen: false,
-  theme: 'dark',
 };
 
 export const AppContext = createContext<Value>(undefined!);

demo/components/header/theme-button.tsx

@@ -1,21 +1,26 @@
-import { useAppContext } from 'components/context';
-import { useCallback } from 'react';
+import { useCallback, useEffect, useState } from 'react';
+import { useTheme } from 'next-themes';
 import { Button } from 'react-daisyui';
 import { ButtonProps } from 'react-daisyui/dist/Button';
 
 type Props = ButtonProps;
 
 export const ThemeButton = (props: Props) => {
-  const [state, dispatch] = useAppContext();
+  const [mounted, setMounted] = useState(false);
+  const { theme, setTheme } = useTheme();
 
   const handleClick = useCallback(
-    () => dispatch({ type: 'toggleTheme' }),
-    [dispatch]
+    () => setTheme(theme === 'dark' ? 'light' : 'dark'),
+    [theme, setTheme]
   );
 
+  useEffect(() => setMounted(true), []);
+
+  if (!mounted || !theme) return null;
+
   return (
     <Button {...props} shape="square" color="ghost" onClick={handleClick}>
-      {state.theme === 'light' ? <SunnyIcon /> : <MoonIcon />}
+      {theme === 'dark' ? <MoonIcon /> : <SunnyIcon />}
     </Button>
   );
 };

demo/components/layout.tsx

@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
-import { Drawer, Menu, Theme } from 'react-daisyui';
-import { MenuItem, TitleButton } from './header';
 import { useAppContext } from './context';
+import { Drawer, Menu } from 'react-daisyui';
+import { MenuItem, TitleButton } from './header';
 
 const menuItems = [
   { name: 'Editor', url: '/editor' },
@@ -29,28 +29,26 @@ export const Layout = ({ children }: Props) => {
   );
 
   return (
-    <Theme dataTheme={state.theme}>
-      <Drawer
-        mobile
-        open={state.drawerOpen}
-        onClickOverlay={toggleDrawer}
-        side={
-          <aside className="flex flex-1 flex-col w-80 bg-base-100">
-            <div className="navbar">
-              <TitleButton />
-            </div>
-            <Menu className="flex-1 p-2 overflow-y-auto w-80">
-              {menuItems.map((item) => (
-                <MenuItem key={item.url} href={item.url} onClick={toggleDrawer}>
-                  {item.name}
-                </MenuItem>
-              ))}
-            </Menu>
-          </aside>
-        }
-      >
-        {children}
-      </Drawer>
-    </Theme>
+    <Drawer
+      mobile
+      open={state.drawerOpen}
+      onClickOverlay={toggleDrawer}
+      side={
+        <aside className="flex flex-1 flex-col w-80 bg-base-100">
+          <div className="navbar">
+            <TitleButton />
+          </div>
+          <Menu className="flex-1 p-2 overflow-y-auto w-80">
+            {menuItems.map((item) => (
+              <MenuItem key={item.url} href={item.url} onClick={toggleDrawer}>
+                {item.name}
+              </MenuItem>
+            ))}
+          </Menu>
+        </aside>
+      }
+    >
+      {children}
+    </Drawer>
   );
 };

demo/package-lock.json

@@ -16,6 +16,7 @@
     "daisyui": "^2.22.0",
     "immutability-helper": "^3.1.1",
     "next": "^12.2.4",
+    "next-themes": "^0.2.0",
     "paper": "^0.12.15",
     "react": "^18.2.0",
     "react-code-blocks": "^0.0.9-0",

demo/package.json

@@ -1,23 +1,26 @@
 import '../styles/globals.css';
-import type { AppProps } from 'next/app';
 import Head from 'next/head';
+import type { AppProps } from 'next/app';
+import { ThemeProvider } from 'next-themes';
 import { Layout } from 'components/layout';
 import { AppProvider } from 'components/context';
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
-    <AppProvider>
-      <Head>
-        <title>react-paper-bindings</title>
-        <meta
-          name="description"
-          content="Examples for react-paper-bindings library."
-        />
-      </Head>
-      <Layout>
-        <Component {...pageProps} />
-      </Layout>
-    </AppProvider>
+    <ThemeProvider>
+      <AppProvider>
+        <Head>
+          <title>react-paper-bindings</title>
+          <meta
+            name="description"
+            content="Examples for react-paper-bindings library."
+          />
+        </Head>
+        <Layout>
+          <Component {...pageProps} />
+        </Layout>
+      </AppProvider>
+    </ThemeProvider>
   );
 }