Skip to content

Commit fb3edfa

Browse files
primer/react: Remove StyledComponentsThemeProvider from ThemeProvider (#7001)
Co-authored-by: Marie Lucca <40550942+francinelucca@users.noreply.github.com> Co-authored-by: Marie Lucca <francinelucca@github.com>
1 parent 18c44d3 commit fb3edfa

File tree

5 files changed

+803
-210
lines changed

5 files changed

+803
-210
lines changed

.changeset/yellow-pens-kiss.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@primer/react": major
3+
---
4+
5+
ThemeProvider: Remove styled-components ThemeProvider

packages/react/src/ThemeProvider.tsx

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React from 'react'
22
import ReactDOM from 'react-dom'
3-
import {ThemeProvider as SCThemeProvider} from 'styled-components'
43
import defaultTheme from './theme'
54
import deepmerge from 'deepmerge'
65
import {useId} from './hooks'
@@ -16,7 +15,6 @@ type ColorMode = 'day' | 'night' | 'light' | 'dark'
1615
export type ColorModeWithAuto = ColorMode | 'auto'
1716

1817
export 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

Comments
 (0)