11import React from 'react'
22import ReactDOM from 'react-dom'
3- import { ThemeProvider as SCThemeProvider } from 'styled-components'
43import defaultTheme from './theme'
54import deepmerge from 'deepmerge'
65import { useId } from './hooks'
@@ -16,7 +15,6 @@ type ColorMode = 'day' | 'night' | 'light' | 'dark'
1615export type ColorModeWithAuto = ColorMode | 'auto'
1716
1817export type ThemeProviderProps = {
19- theme ?: Theme
2018 colorMode ?: ColorModeWithAuto
2119 dayScheme ?: string
2220 nightScheme ?: string
@@ -61,7 +59,7 @@ export const ThemeProvider: React.FC<React.PropsWithChildren<ThemeProviderProps>
6159 } = useTheme ( )
6260
6361 // Initialize state
64- const theme = props . theme ?? fallbackTheme ?? defaultTheme
62+ const theme = fallbackTheme ?? defaultTheme
6563
6664 const uniqueDataId = useId ( )
6765 const { resolvedServerColorMode} = getServerHandoff ( uniqueDataId )
@@ -120,7 +118,11 @@ export const ThemeProvider: React.FC<React.PropsWithChildren<ThemeProviderProps>
120118 setNightScheme,
121119 } }
122120 >
123- < SCThemeProvider theme = { resolvedTheme } >
121+ < div
122+ data-color-mode = { colorMode === 'auto' ? 'auto' : colorScheme . includes ( 'dark' ) ? 'dark' : 'light' }
123+ data-light-theme = { dayScheme }
124+ data-dark-theme = { nightScheme }
125+ >
124126 { children }
125127 { props . preventSSRMismatch ? (
126128 < script
@@ -129,7 +131,7 @@ export const ThemeProvider: React.FC<React.PropsWithChildren<ThemeProviderProps>
129131 dangerouslySetInnerHTML = { { __html : JSON . stringify ( { resolvedServerColorMode : resolvedColorMode } ) } }
130132 />
131133 ) : null }
132- </ SCThemeProvider >
134+ </ div >
133135 </ ThemeContext . Provider >
134136 )
135137}
0 commit comments