Feature: Dark mode

src/components/color-preference-picker.js

@@ -0,0 +1,32 @@
+import React, {useCallback} from 'react'
+import {SegmentedControl} from '@primer/react'
+import {DeviceDesktopIcon, MoonIcon, SunIcon} from '@primer/octicons-react'
+
+const MODE_ICONS = [
+  {id: 'auto', name: 'System', icon: DeviceDesktopIcon},
+  {id: 'day', name: 'Day', icon: SunIcon},
+  {id: 'night', name: 'Night', icon: MoonIcon},
+]
+
+export const ColorPreferencePicker = ({preferredColorMode, setColorPreference}) => {
+  const handleColorModeChange = useCallback(
+    modeIndex => {
+      const mode = MODE_ICONS[modeIndex].id
+      setColorPreference(mode)
+    },
+    [setColorPreference],
+  )
+
+  return (
+    <SegmentedControl onChange={handleColorModeChange} aria-label="Color mode">
+      {MODE_ICONS.map((mode, index) => (
+        <SegmentedControl.IconButton
+          icon={mode.icon}
+          aria-label={mode.name}
+          key={index}
+          selected={mode.id === preferredColorMode}
+        ></SegmentedControl.IconButton>
+      ))}
+    </SegmentedControl>
+  )
+}

src/components/header.js

@@ -9,13 +9,17 @@ import {HEADER_HEIGHT, HEADER_BAR} from '../constants'
 import headerNavItems from '../../content/header-nav.yml'
 import {DarkTheme} from '../theme'
 import SiteTitle from './site-title'
+import {ColorPreferencePicker} from './color-preference-picker'
+import {useColorPreference} from '../hooks/use-color-preference'
 
 const NpmHeaderBar = styled(Box)`
   height: ${HEADER_BAR}px;
   background-image: linear-gradient(139deg, #fb8817, #ff4b01, #c12127, #e02aff);
 `
 
 function Header() {
+  const {preferredColorMode, setColorPreference} = useColorPreference()
+
   const search = useSearch()
 
   return (
@@ -43,14 +47,15 @@ function Header() {
           </Box>
         </Box>
         <Box sx={{display: 'flex'}}>
+          <ColorPreferencePicker preferredColorMode={preferredColorMode} setColorPreference={setColorPreference} />
           <Box sx={{display: ['none', null, null, 'flex'], alignItems: 'center'}}>
             {headerNavItems.map((item, index) => (
               <Link key={index} href={item.url} sx={{display: 'block', ml: 4, color: 'fg.default'}}>
                 {item.title}
               </Link>
             ))}
           </Box>
-          <Box sx={{display: ['flex', null, null, 'none']}}>
+          <Box sx={{display: ['flex', null, null, 'none'], ml: [4, null, null, 'unset']}}>
             <Search.Mobile {...search} />
             <NavDrawer />
           </Box>

src/hooks/use-color-preference.js

@@ -0,0 +1,20 @@
+import {useCallback, useMemo} from 'react'
+import {useTheme} from '@primer/react'
+
+export const useColorPreference = (themeContextId = 'root') => {
+  const {colorMode, setColorMode} = useTheme()
+  const setColorPreference = useCallback(
+    mode => {
+      localStorage.setItem(`${themeContextId}-color-mode`, mode)
+      setColorMode(mode)
+    },
+    [setColorMode, themeContextId],
+  )
+
+  const preferredColorMode = useMemo(
+    () => colorMode ?? localStorage.getItem(`${themeContextId}-color-mode`) ?? 'auto',
+    [colorMode, themeContextId],
+  )
+
+  return {preferredColorMode, setColorPreference}
+}

src/hooks/use-prism-theme.js

@@ -0,0 +1,17 @@
+import {useTheme} from '@primer/react'
+import {themes} from 'prism-react-renderer'
+import {useMemo} from 'react'
+
+const colorModeToThemeMap = {
+  light: themes.github,
+  dark: themes.vsDark,
+  day: themes.github,
+  night: themes.vsDark,
+}
+
+export const usePrismTheme = () => {
+  const {resolvedColorMode} = useTheme()
+
+  const theme = useMemo(() => colorModeToThemeMap[resolvedColorMode ?? 'day'], [resolvedColorMode])
+  return {theme}
+}

src/mdx/code.js

@@ -1,11 +1,12 @@
 import React from 'react'
 import {Box, Text, Button, themeGet} from '@primer/react'
 import {Octicon} from '@primer/react/deprecated'
-import {Highlight, themes, Prism} from 'prism-react-renderer'
+import {Highlight, Prism} from 'prism-react-renderer'
 import styled from 'styled-components'
 import {CheckIcon, CopyIcon} from '@primer/octicons-react'
 import copyToClipboard from 'copy-to-clipboard'
 import {announce} from '../util/aria-live'
+import {usePrismTheme} from '../hooks/use-prism-theme'
 ;(typeof global !== 'undefined' ? global : window).Prism = Prism
 require('prismjs/components/prism-bash')
 
@@ -99,9 +100,10 @@ const CodeBlock = ({children, code, className, style}) => (
 )
 
 function Code({className = '', prompt, children}) {
+  const {theme: codeTheme} = usePrismTheme()
   if (prompt) {
     return (
-      <CodeBlock style={themes.github.plain}>
+      <CodeBlock style={codeTheme.plain}>
         <MonoText>{children}</MonoText>
       </CodeBlock>
     )
@@ -115,7 +117,7 @@ function Code({className = '', prompt, children}) {
   }
 
   return (
-    <Highlight code={code} language={className.replace(/language-/, '') || 'bash'} theme={themes.github}>
+    <Highlight code={code} language={className.replace(/language-/, '') || 'bash'} theme={codeTheme}>
       {({className: highlightClassName, style, tokens, getLineProps, getTokenProps}) => (
         <CodeBlock className={highlightClassName} style={style} code={code}>
           {tokens.map((line, i) => (

src/theme.js

@@ -4,6 +4,8 @@ import deepmerge from 'deepmerge'
 
 export const NPM_RED = '#cb3837'
 
+const colorModePreference = (typeof window !== `undefined` ? localStorage.getItem('root-color-mode') : null) ?? 'auto'
+
 export const npmTheme = deepmerge(theme, {
   colors: {
     logoBg: NPM_RED,
@@ -37,7 +39,7 @@ export const npmTheme = deepmerge(theme, {
   },
 })
 
-export const ThemeProvider = props => <Provider theme={npmTheme} {...props} />
+export const ThemeProvider = props => <Provider theme={npmTheme} colorMode={colorModePreference} {...props} />
 
 export const Theme = React.forwardRef(function Theme({theme: colorMode, as = Box, ...props}, ref) {
   return (