Add keyboard shortcut to preview live code examples in dark mode

Author: colebemis

docs/src/@primer/gatsby-theme-doctocat/components/live-preview-wrapper.js

@@ -1,13 +1,41 @@
 import {BaseStyles, Box} from '@primer/components'
+import {theme as darkTheme} from '@primer/components/theme-dark-preval'
+import {theme as lightTheme} from '@primer/components/theme-preval'
 import React from 'react'
+import {ThemeProvider} from 'styled-components'
+
+// This is a temporary way to allow us to preview components in dark mode.
+// We'll replace this component when @primer/components has a first-class
+// API for theme switching.
+function ThemeSwitcher({children}) {
+  const [theme, setTheme] = React.useState('light')
+
+  React.useEffect(() => {
+    function handleKeyDown(event) {
+      // Use `ctrl + cmd + t` to toggle between light and dark mode
+      if (event.key === 't' && event.ctrlKey && event.metaKey) {
+        setTheme(theme === 'light' ? 'dark' : 'light')
+      }
+    }
+    document.addEventListener('keydown', handleKeyDown)
+
+    return function cleanup() {
+      document.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [theme])
+
+  return <ThemeProvider theme={theme === 'light' ? lightTheme : darkTheme}>{children}</ThemeProvider>
+}
 
 // Users can shadow this file to wrap live previews.
 // This is useful for applying global styles.
 function LivePreviewWrapper({children}) {
   return (
-    <Box width="100%" p={3}>
-      <BaseStyles>{children}</BaseStyles>
-    </Box>
+    <ThemeSwitcher>
+      <Box width="100%" p={3} bg="bg.canvas" sx={{borderTopLeftRadius: 2, borderTopRightRadius: 2}}>
+        <BaseStyles>{children}</BaseStyles>
+      </Box>
+    </ThemeSwitcher>
   )
 }
 

src/theme-dark-preval.js

@@ -0,0 +1,28 @@
+// @preval
+// This file needs to be a JavaScript file using CommonJS to be compatiable with preval.
+
+// This is a temporary theme file used to allow us to preview components in dark mode
+// on the docs site. We'll remove this file when we have a more robust way to create themes.
+
+const {theme: lightTheme} = require('./theme-preval')
+const {default: primitives} = require('@primer/primitives')
+const deepmerge = require('deepmerge')
+const {filterObject, isShadowValue, isColorValue} = require('./utils/theme')
+
+const {scale: _excludeScaleColors, ...functionalColors} = filterObject(primitives.colors.dark, value =>
+  isColorValue(value)
+)
+const {scale: _excludeScaleShadows, ...functionalShadows} = filterObject(primitives.colors.dark, value =>
+  isShadowValue(value)
+)
+
+const mergedColors = deepmerge(lightTheme.colors, functionalColors)
+const mergedShadows = deepmerge(lightTheme.shadows, functionalShadows)
+
+const theme = {
+  ...lightTheme,
+  colors: mergedColors,
+  shadows: mergedShadows
+}
+
+module.exports = {theme}