using css vars provider (#163)

canoypa · Feb 19, 2024 · 2cc8e8f · 2cc8e8f
1 parent 7bbe5e0
commit 2cc8e8f
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 57 deletions.
diff --git a/src/components/providers/theme-provider.tsx b/src/components/providers/theme-provider.tsx
@@ -1,63 +1,17 @@
-import {
-  CssBaseline,
-  PaletteMode,
-  ThemeProvider as MuiThemeProvider,
-  useMediaQuery,
-} from '@mui/material'
-import { createContext, ReactNode, useMemo, VFC } from 'react'
+import { CssBaseline, Experimental_CssVarsProvider } from '@mui/material'
+import { ReactNode, VFC } from 'react'
 import { createTheme } from '../../core/theme'
 
-type ConfiguredModeType = PaletteMode | 'system'
-
-type Theme = {
-  /** 全てのテーマ名 */
-  modes: string[]
-  /** 現在のテーマ名 */
-  mode: string
-  /** "system" を含む保存されたテーマ設定 */
-  configuredMode: string
-  /** テーマを更新 */
-  // setTheme: (theme: string) => void;
-}
-const ThemeContext = createContext<Theme>({
-  modes: [],
-  mode: '',
-  configuredMode: '',
-})
-
-/**
- * 保存されたテーマ設定を取得して返す
- */
-const getConfiguredMode = (): ConfiguredModeType => {
-  // サーバサイドでは "system" で処理
-  if (typeof window === 'undefined') return 'system'
-
-  // 設定値を読み込んで返す
-  // 現在は "system" のみ
-  return 'system'
-}
-const configuredMode = getConfiguredMode()
-
 type Props = {
   children: ReactNode
 }
 export const ThemeProvider: VFC<Props> = ({ children }) => {
-  const isDark = useMediaQuery('(prefers-color-scheme:dark)')
-  const resolvedMode = useMemo(() => (isDark ? 'dark' : 'light'), [isDark])
-  const themeData = useMemo(() => createTheme(resolvedMode), [resolvedMode])
-
-  const themeValue: Theme = {
-    modes: ['light', 'dark'],
-    mode: resolvedMode,
-    configuredMode: configuredMode,
-  }
+  const theme = createTheme()
 
   return (
-    <ThemeContext.Provider value={themeValue}>
-      <MuiThemeProvider theme={themeData}>
-        <CssBaseline />
-        {children}
-      </MuiThemeProvider>
-    </ThemeContext.Provider>
+    <Experimental_CssVarsProvider theme={theme} defaultMode="system">
+      <CssBaseline />
+      {children}
+    </Experimental_CssVarsProvider>
   )
 }
diff --git a/src/core/theme/index.ts b/src/core/theme/index.ts
@@ -1,9 +1,12 @@
-import { createTheme as createMuiTheme, PaletteMode } from '@mui/material'
+import { experimental_extendTheme as extendTheme } from '@mui/material'
 import { DarkPalette, LightPalette } from './palette'
 
-export const createTheme = (mode: PaletteMode) =>
-  createMuiTheme({
-    palette: mode === 'dark' ? DarkPalette : LightPalette,
+export const createTheme = () =>
+  extendTheme({
+    colorSchemes: {
+      light: { palette: LightPalette },
+      dark: { palette: DarkPalette },
+    },
 
     typography: {
       button: {

diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -1,5 +1,6 @@
 import createEmotionCache from '@emotion/cache'
 import createEmotionServer from '@emotion/server/create-instance'
+import { getInitColorSchemeScript } from '@mui/material'
 import Document, { Head, Html, Main, NextScript } from 'next/document'
 import { Children } from 'react'
 
@@ -9,6 +10,7 @@ export default class MyDocument extends Document {
       <Html lang="ja">
         <Head />
         <body>
+          {getInitColorSchemeScript()}
           <Main />
           <NextScript />
         </body>