feat(theme): save the current theme in the local storage

src/pages/_document.jsx

@@ -1,7 +1,7 @@
 import React, { Children } from 'react';
 import NextDocument, { Head, Html, Main, NextScript } from 'next/document';
 import { ServerStyleSheets } from '@mui/styles';
-import { dark as theme } from '@/theme/theme';
+import { darkTheme as theme } from '@/theme/theme';
 
 export default class Document extends NextDocument {
   static async getInitialProps(context) {

src/theme/ThemeContext.tsx

@@ -2,44 +2,60 @@ import React, {
   FunctionComponent,
   ReactChild,
   createContext,
+  useEffect,
   useMemo,
   useState,
 } from 'react';
 import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
-import { base, dark, light } from '@/theme/theme';
+import { THEME_STORAGE_KEY, Theme } from '@/theme/constants';
+import { baseTheme, darkTheme, lightTheme } from '@/theme/theme';
 
 type Toggle = () => void;
 
 interface ThemeState {
-  isDark: boolean;
+  isDark: boolean | null;
   toggle: Toggle;
 }
 
-const initialThemeState: ThemeState = {
-  isDark: true,
+const initialState: ThemeState = {
+  isDark: null,
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   toggle: () => {},
 };
 
-export const ThemeContext = createContext<ThemeState>(initialThemeState);
+export const ThemeContext = createContext<ThemeState>(initialState);
 
 interface Props {
   children: ReactChild | ReactChild[];
 }
 
 export const ThemeProvider: FunctionComponent<Props> = ({ children }) => {
-  const [isDark, setIsDark] = useState<boolean>(initialThemeState.isDark);
+  const [isDark, setIsDark] = useState<boolean | null>(null);
 
   const toggle: Toggle = () => {
     setIsDark((previous) => !previous);
   };
 
   const value: ThemeState = useMemo(() => ({ isDark, toggle }), [isDark]);
 
+  useEffect(() => {
+    if (isDark !== null) {
+      const value: Theme = isDark ? Theme.DARK : Theme.LIGHT;
+      window.localStorage.setItem(THEME_STORAGE_KEY, value);
+    }
+  }, [isDark]);
+
+  useEffect(() => {
+    const value = window.localStorage.getItem(THEME_STORAGE_KEY);
+    setIsDark(value !== Theme.LIGHT);
+  }, []);
+
+  if (isDark === null) return null;
+
   return (
     <ThemeContext.Provider value={value}>
-      <MuiThemeProvider theme={isDark ? dark : light}>
-        <MuiThemeProvider theme={base}>{children}</MuiThemeProvider>
+      <MuiThemeProvider theme={isDark ? darkTheme : lightTheme}>
+        <MuiThemeProvider theme={baseTheme}>{children}</MuiThemeProvider>
       </MuiThemeProvider>
     </ThemeContext.Provider>
   );

src/theme/constants.ts

@@ -0,0 +1,6 @@
+export const THEME_STORAGE_KEY = 'ddftwiki:theme';
+
+export enum Theme {
+  DARK = 'dark',
+  LIGHT = 'light',
+}

src/theme/theme.ts

@@ -34,7 +34,7 @@ declare module '@mui/styles' {
   interface DefaultTheme extends Theme {}
 }
 
-export const base: (theme: Theme) => Theme = (theme) => {
+export const baseTheme: (theme: Theme) => Theme = (theme) => {
   const { breakpoints, palette, spacing, typography } = theme;
   const { mode } = palette;
   return createTheme({
@@ -136,7 +136,7 @@ export const base: (theme: Theme) => Theme = (theme) => {
   });
 };
 
-export const dark: Theme = createTheme({
+export const darkTheme: Theme = createTheme({
   palette: {
     background: { default: '#121212', paper: grey[900] },
     mode: 'dark',
@@ -145,7 +145,7 @@ export const dark: Theme = createTheme({
   },
 } as ThemeOptions);
 
-export const light: Theme = createTheme({
+export const lightTheme: Theme = createTheme({
   palette: {
     background: { default: grey[100] },
     mode: 'light',