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

.changeset/cyan-singers-invite.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Add support for `'dark'` and `'light'` in `colorMode` for ThemeProvider

src/ThemeProvider.tsx

@@ -9,7 +9,7 @@ const defaultNightScheme = 'dark'
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type Theme = {[key: string]: any}
-type ColorMode = 'day' | 'night'
+type ColorMode = 'day' | 'night' | 'light' | 'dark'
 type ColorModeWithAuto = ColorMode | 'auto'
 
 export type ThemeProviderProps = {
@@ -202,7 +202,9 @@ function resolveColorMode(colorMode: ColorModeWithAuto, systemColorMode: ColorMo
 function chooseColorScheme(colorMode: ColorMode, dayScheme: string, nightScheme: string) {
   switch (colorMode) {
     case 'day':
+    case 'light':
       return dayScheme
+    case 'dark':
     case 'night':
       return nightScheme
   }

src/__tests__/ThemeProvider.test.tsx

@@ -126,6 +126,16 @@ it('respects nightScheme prop', () => {
   expect(screen.getByText('Hello')).toHaveStyleRule('color', 'gray')
 })
 
+it('respects nightScheme prop with colorMode="dark"', () => {
+  render(
+    <ThemeProvider theme={exampleTheme} colorMode="dark" nightScheme="dark_dimmed">
+      <Text color="text">Hello</Text>
+    </ThemeProvider>
+  )
+
+  expect(screen.getByText('Hello')).toHaveStyleRule('color', 'gray')
+})
+
 it('respects dayScheme prop', () => {
   render(
     <ThemeProvider theme={exampleTheme} colorMode="day" dayScheme="dark" nightScheme="dark_dimmed">
@@ -136,6 +146,16 @@ it('respects dayScheme prop', () => {
   expect(screen.getByText('Hello')).toHaveStyleRule('color', 'white')
 })
 
+it('respects dayScheme prop with colorMode="light"', () => {
+  render(
+    <ThemeProvider theme={exampleTheme} colorMode="light" dayScheme="dark" nightScheme="dark_dimmed">
+      <Text color="text">Hello</Text>
+    </ThemeProvider>
+  )
+
+  expect(screen.getByText('Hello')).toHaveStyleRule('color', 'white')
+})
+
 it('works in auto mode', () => {
   render(
     <ThemeProvider theme={exampleTheme} colorMode="auto">