feat: light/dark mode control

Author: laine-hallot

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,6 +47,7 @@ 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'}}>