Handle invalid color scheme names (#1286)

* Apply default scheme when colorScheme is undefined

* Test ThemeProvider default color scheme

* Create nervous-eagles-cover.md

Author: colebemis

.changeset/nervous-eagles-cover.md

@@ -0,0 +1,5 @@
+---
+"@primer/components": patch
+---
+
+`ThemeProvider` now uses the first defined color scheme if passed an invalid color scheme name

src/ThemeProvider.tsx

@@ -154,7 +154,10 @@ function applyColorScheme(theme: Theme, colorScheme: string) {
   if (!theme.colorSchemes[colorScheme]) {
     // eslint-disable-next-line no-console
     console.error(`\`${colorScheme}\` scheme not defined in \`theme.colorSchemes\``)
-    return theme
+
+    // Apply the first defined color scheme
+    const defaultColorScheme = Object.keys(theme.colorSchemes)[0]
+    return deepmerge(theme, theme.colorSchemes[defaultColorScheme])
   }
 
   return deepmerge(theme, theme.colorSchemes[colorScheme])

src/__tests__/ThemeProvider.tsx

@@ -106,6 +106,16 @@ it('defaults to dark color scheme in night mode', () => {
   expect(screen.getByText('Hello')).toHaveStyleRule('color', 'white')
 })
 
+it('defaults to first color scheme when passed an invalid color scheme name', () => {
+  render(
+    <ThemeProvider theme={exampleTheme} dayScheme="foo">
+      <Text color="text">Hello</Text>
+    </ThemeProvider>
+  )
+
+  expect(screen.getByText('Hello')).toHaveStyleRule('color', 'black')
+})
+
 it('respects nightScheme prop', () => {
   render(
     <ThemeProvider theme={exampleTheme} colorMode="night" nightScheme="dark_dimmed">