Skip to content

Commit 0383f1a

Browse files
authored
feat(ThemeProvider): add dark, light alias for ThemeProvider (#2259)
* feat(ThemeProvider): add dark, light alias for ThemeProvider * Create cyan-singers-invite.md * test(ThemeProvider): add alias tests for colorMode * Update .changeset/cyan-singers-invite.md
1 parent 88b8c0e commit 0383f1a

File tree

3 files changed

+28
-1
lines changed

3 files changed

+28
-1
lines changed

.changeset/cyan-singers-invite.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@primer/react": minor
3+
---
4+
5+
Add support for `'dark'` and `'light'` in `colorMode` for ThemeProvider

src/ThemeProvider.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const defaultNightScheme = 'dark'
99

1010
// eslint-disable-next-line @typescript-eslint/no-explicit-any
1111
export type Theme = {[key: string]: any}
12-
type ColorMode = 'day' | 'night'
12+
type ColorMode = 'day' | 'night' | 'light' | 'dark'
1313
type ColorModeWithAuto = ColorMode | 'auto'
1414

1515
export type ThemeProviderProps = {
@@ -202,7 +202,9 @@ function resolveColorMode(colorMode: ColorModeWithAuto, systemColorMode: ColorMo
202202
function chooseColorScheme(colorMode: ColorMode, dayScheme: string, nightScheme: string) {
203203
switch (colorMode) {
204204
case 'day':
205+
case 'light':
205206
return dayScheme
207+
case 'dark':
206208
case 'night':
207209
return nightScheme
208210
}

src/__tests__/ThemeProvider.test.tsx

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,16 @@ it('respects nightScheme prop', () => {
126126
expect(screen.getByText('Hello')).toHaveStyleRule('color', 'gray')
127127
})
128128

129+
it('respects nightScheme prop with colorMode="dark"', () => {
130+
render(
131+
<ThemeProvider theme={exampleTheme} colorMode="dark" nightScheme="dark_dimmed">
132+
<Text color="text">Hello</Text>
133+
</ThemeProvider>
134+
)
135+
136+
expect(screen.getByText('Hello')).toHaveStyleRule('color', 'gray')
137+
})
138+
129139
it('respects dayScheme prop', () => {
130140
render(
131141
<ThemeProvider theme={exampleTheme} colorMode="day" dayScheme="dark" nightScheme="dark_dimmed">
@@ -136,6 +146,16 @@ it('respects dayScheme prop', () => {
136146
expect(screen.getByText('Hello')).toHaveStyleRule('color', 'white')
137147
})
138148

149+
it('respects dayScheme prop with colorMode="light"', () => {
150+
render(
151+
<ThemeProvider theme={exampleTheme} colorMode="light" dayScheme="dark" nightScheme="dark_dimmed">
152+
<Text color="text">Hello</Text>
153+
</ThemeProvider>
154+
)
155+
156+
expect(screen.getByText('Hello')).toHaveStyleRule('color', 'white')
157+
})
158+
139159
it('works in auto mode', () => {
140160
render(
141161
<ThemeProvider theme={exampleTheme} colorMode="auto">

0 commit comments

Comments
 (0)