Refactor theme providers to a single file

Author: lukekarrys

src/components/header.js

@@ -1,31 +1,25 @@
 import React from 'react'
-import {Box, ThemeProvider} from '@primer/react'
+import {Box} from '@primer/react'
 import styled from 'styled-components'
 import MobileSearch from './mobile-search'
 import NavDrawer from './nav-drawer'
 import Search from './search'
 import Link from './link'
 import useSearch from '../hooks/use-search'
-import {HEADER_HEIGHT, HEADER_BAR, NPM_RED} from '../constants'
+import {HEADER_HEIGHT, HEADER_BAR} from '../constants'
 import useSiteMetadata from '../hooks/use-site-metadata'
 import headerNavItems from '../../content/header-nav.yml'
+import {DarkTheme} from '../theme'
 
 const NpmHeaderBar = styled(Box)`
   height: ${HEADER_BAR}px;
   background-image: linear-gradient(139deg, #fb8817, #ff4b01, #c12127, #e02aff);
 `
 
-const NpmLogo = ({size, ...props}) => (
-  <Box {...props} role="banner">
-    <svg
-      height={size}
-      width={size}
-      viewBox="0 0 700 700"
-      fill="currentColor"
-      style={{color: NPM_RED}}
-      aria-hidden="true"
-    >
-      <polygon fill={NPM_RED} points="0,700 700,700 700,0 0,0" />
+const NpmLogo = ({size, sx}) => (
+  <Box sx={{...sx, color: 'logoBg'}} role="banner">
+    <svg height={size} width={size} viewBox="0 0 700 700" fill="currentColor" aria-hidden="true">
+      <polygon fill="currentColor" points="0,700 700,700 700,0 0,0" />
       <polygon fill="#ffffff" points="150,550 350,550 350,250 450,250 450,550 550,550 550,150 150,150 " />
     </svg>
   </Box>
@@ -36,7 +30,7 @@ function Header() {
   const search = useSearch()
 
   return (
-    <ThemeProvider colorMode="night" nightScheme="dark_dimmed">
+    <DarkTheme>
       <Box sx={{top: 0, position: 'sticky', zIndex: 1}}>
         <NpmHeaderBar />
         <Box
@@ -87,7 +81,7 @@ function Header() {
           </Box>
         </Box>
       </Box>
-    </ThemeProvider>
+    </DarkTheme>
   )
 }
 

src/components/mobile-search.js

@@ -1,12 +1,13 @@
 import React from 'react'
-import {Button, Box, ThemeProvider} from '@primer/react'
+import {Button, Box} from '@primer/react'
 import {XIcon, SearchIcon} from '@primer/octicons-react'
 import {AnimatePresence, motion} from 'framer-motion'
 import {FocusOn} from 'react-focus-on'
 import TextInput from './text-input'
 import SearchResults from './search-results'
 import useSiteMetadata from '../hooks/use-site-metadata'
 import {HEADER_BAR, HEADER_HEIGHT} from '../constants'
+import {LightTheme} from '../theme'
 
 function MobileSearch({onDismiss, ...props}) {
   const siteMetadata = useSiteMetadata()
@@ -81,7 +82,7 @@ function MobileSearch({onDismiss, ...props}) {
               <XIcon />
             </Button>
           </Box>
-          <ThemeProvider colorMode="light">
+          <LightTheme>
             <Box
               sx={{
                 display: 'flex',
@@ -98,7 +99,7 @@ function MobileSearch({onDismiss, ...props}) {
             >
               {isOpen ? <SearchResults {...{results, getItemProps, highlightedIndex}} /> : null}
             </Box>
-          </ThemeProvider>
+          </LightTheme>
         </Box>
       </Box>
     </FocusOn>

src/components/nav-drawer.js

@@ -1,11 +1,12 @@
 import React from 'react'
-import {Button, Box, ThemeProvider} from '@primer/react'
+import {Button, Box} from '@primer/react'
 import {XIcon, ThreeBarsIcon} from '@primer/octicons-react'
 import Link from './link'
 import Drawer from './drawer'
 import NavItems from './nav-items'
 import useSiteMetadata from '../hooks/use-site-metadata'
 import {useIsMobile} from '../hooks/use-breakpoint'
+import {DarkTheme, LightTheme} from '../theme'
 
 const useDrawerIsOpen = () => {
   const isMobile = useIsMobile()
@@ -31,7 +32,7 @@ function NavDrawer() {
       <Button aria-label="Menu" aria-expanded={isOpen} onClick={setOpen} sx={{ml: 3}}>
         <ThreeBarsIcon />
       </Button>
-      <ThemeProvider colorMode="light">
+      <LightTheme>
         <Drawer isOpen={isOpen} onDismiss={setClose}>
           <Box
             sx={{
@@ -52,7 +53,7 @@ function NavDrawer() {
                 bg: 'canvas.default',
               }}
             >
-              <ThemeProvider colorMode="night" nightScheme="dark_dimmed">
+              <DarkTheme>
                 <Box
                   sx={{
                     borderWidth: 0,
@@ -82,14 +83,14 @@ function NavDrawer() {
                     </Button>
                   </Box>
                 </Box>
-              </ThemeProvider>
+              </DarkTheme>
               <Box sx={{display: 'flex', flexDirection: 'column'}}>
                 <NavItems />
               </Box>
             </Box>
           </Box>
         </Drawer>
-      </ThemeProvider>
+      </LightTheme>
     </>
   )
 }

src/components/search.js

@@ -1,8 +1,9 @@
 import React from 'react'
-import {Box, ThemeProvider} from '@primer/react'
+import {Box} from '@primer/react'
 import TextInput from './text-input'
 import SearchResults from './search-results'
 import useSiteMetadata from '../hooks/use-site-metadata'
+import {LightTheme} from '../theme'
 
 function Search(props) {
   const siteMetadata = useSiteMetadata()
@@ -18,7 +19,7 @@ function Search(props) {
       />
       <Box sx={{position: 'absolute', left: 0, right: 0, pt: 2}} {...getMenuProps()}>
         {isOpen ? (
-          <ThemeProvider colorMode="light">
+          <LightTheme>
             <Box
               sx={{
                 overflow: 'auto',
@@ -35,7 +36,7 @@ function Search(props) {
             >
               <SearchResults {...{results, getItemProps, highlightedIndex}} />
             </Box>
-          </ThemeProvider>
+          </LightTheme>
         ) : null}
       </Box>
     </Box>

src/constants.js

@@ -5,5 +5,3 @@ export const HEADER_BAR = 10
 export const FULL_HEADER_HEIGHT = HEADER_HEIGHT + HEADER_BAR
 
 export const SKIP_NAV = {id: 'skip-nav', as: 'main'}
-
-export const NPM_RED = '#cb0000'

src/layout.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import {Box, Heading, Text, ThemeProvider} from '@primer/react'
+import {Box, Heading, Text} from '@primer/react'
 import {H1} from './mdx'
 import PageFooter from './components/page-footer'
 import * as TableOfContents from './components/table-of-contents'
@@ -9,13 +9,14 @@ import Container from './components/container'
 import {SKIP_NAV} from './constants'
 import useSiteMetadata from './hooks/use-site-metadata'
 import usePage from './hooks/use-page'
+import {DarkTheme} from './theme'
 
 const HeroLayout = ({children}) => {
   const {title, description} = useSiteMetadata()
 
   return (
     <Box sx={{width: '100%'}} {...SKIP_NAV}>
-      <ThemeProvider colorMode="night" nightScheme="dark_dimmed">
+      <DarkTheme>
         <Box sx={{bg: 'canvas.inset', py: 6}}>
           <Container>
             <Heading as="h1" sx={{color: 'fg.default', fontSize: 7, m: 0}}>
@@ -26,7 +27,7 @@ const HeroLayout = ({children}) => {
             </Text>
           </Container>
         </Box>
-      </ThemeProvider>
+      </DarkTheme>
       <Container>{children}</Container>
     </Box>
   )

src/root.js

@@ -1,38 +1,7 @@
 import React from 'react'
 import {MDXProvider} from '@mdx-js/react'
-import {ThemeProvider, theme} from '@primer/react'
-import deepmerge from 'deepmerge'
+import {ThemeProvider} from './theme'
 import * as Components from './mdx'
-import {NPM_RED} from './constants'
-
-const npmTheme = deepmerge(theme, {
-  colorSchemes: {
-    light: {
-      colors: {
-        accent: {
-          fg: NPM_RED,
-        },
-      },
-    },
-    dark_dimmed: {
-      colors: {
-        canvas: {
-          default: '#333333',
-        },
-        fg: {
-          default: '#E1E4E8',
-        },
-        btn: {
-          text: '#E1E4E8',
-          bg: 'transparent',
-          border: '#444D56',
-          hoverBorder: '#444D56',
-          hoverBg: NPM_RED,
-        },
-      },
-    },
-  },
-})
 
 const components = {
   a: Components.Link,
@@ -62,7 +31,7 @@ const components = {
 
 const RootElement = ({element}) => (
   <MDXProvider components={components}>
-    <ThemeProvider theme={npmTheme}>{element}</ThemeProvider>
+    <ThemeProvider>{element}</ThemeProvider>
   </MDXProvider>
 )
 

src/theme.js

@@ -0,0 +1,41 @@
+import React from 'react'
+import {ThemeProvider as PrimerThemeProvider, theme as primerTheme} from '@primer/react'
+import deepmerge from 'deepmerge'
+
+export const NPM_RED = '#cb0000'
+
+export const theme = deepmerge(primerTheme, {
+  colors: {
+    logoBg: NPM_RED,
+  },
+  colorSchemes: {
+    light: {
+      colors: {
+        accent: {
+          fg: NPM_RED,
+        },
+      },
+    },
+    dark_dimmed: {
+      colors: {
+        canvas: {
+          default: '#333333',
+        },
+        fg: {
+          default: '#E1E4E8',
+        },
+        btn: {
+          text: '#E1E4E8',
+          bg: 'transparent',
+          border: '#444D56',
+          hoverBorder: '#444D56',
+          hoverBg: NPM_RED,
+        },
+      },
+    },
+  },
+})
+
+export const ThemeProvider = props => <PrimerThemeProvider theme={theme} {...props} />
+export const LightTheme = props => <ThemeProvider colorMode="light" {...props} />
+export const DarkTheme = props => <ThemeProvider colorMode="dark" nightScheme="dark_dimmed" {...props} />