fix: changed theme component to provide better support for SSR

The Theme provider uses window and causes issues if SRR. This should now fail safe. And separate
options are available to use the themes server side.

fix #249

Author: stuarthendren

src/components/ThemeProvider/ThemeController.tsx

@@ -71,7 +71,7 @@ export const ThemeController: React.FC<ThemeControllerProps> = ({
   )
 
   const setMode = (mode: ThemeChoice) => {
-    window.localStorage.setItem('themeChoice', mode)
+    window?.localStorage.setItem('themeChoice', mode)
     setThemeValues(mode)
   }
 
@@ -97,13 +97,15 @@ export const ThemeController: React.FC<ThemeControllerProps> = ({
 
   // paints the app before it renders elements
   useLayoutEffect(() => {
-    const localTheme = window.localStorage.getItem('themeChoice') as ThemeChoice
+    const localTheme = window?.localStorage.getItem(
+      'themeChoice'
+    ) as ThemeChoice
 
     if (localTheme) {
       setThemeValues(localTheme)
     } else if (
-      window.matchMedia &&
-      window.matchMedia('(prefers-color-scheme: dark)').matches
+      window?.matchMedia &&
+      window?.matchMedia('(prefers-color-scheme: dark)').matches
     ) {
       setThemeValues('dark')
     } else {

src/components/ThemeSwitch/ThemeSwitch.stories.tsx

@@ -1,11 +1,11 @@
 import React from 'react'
 import { Story, Meta } from '@storybook/react'
-import { ThemeSwitch } from '.'
+import { ControlledThemeSwitch, ThemeSwitch } from '.'
 import { AppBar, AppBarActions, AppBarHeading } from '../AppBar'
 import { Container } from '../Container'
 import { Heading } from '../Heading'
 import { Paper } from '../Paper'
-import { ThemeProvider } from '../ThemeProvider'
+import { ThemeProvider, useThemeController } from '../ThemeProvider'
 import { lightTheme } from '../../stitches.config'
 
 export default {
@@ -14,7 +14,7 @@ export default {
 } as Meta
 
 export const Default: Story = (args) => (
-  <ThemeProvider light={lightTheme}>
+  <ThemeProvider local>
     <AppBar>
       <AppBarHeading>Example</AppBarHeading>
       <AppBarActions>
@@ -49,3 +49,29 @@ Default.parameters = {
     },
   },
 }
+
+/**
+ * A controllable version of the theme switch is provided which only has the UI.
+ *
+ * This an be used in situations where you need a different mechanism for theme switching such as Server Side Rendering.
+ *
+ * Here we just reuse the `useThemeController` hook as an example.
+ */
+export const SSR: Story = () => {
+  const [choice, toggle] = useThemeController()
+  return (
+    <ThemeProvider local choice={choice}>
+      <AppBar>
+        <AppBarHeading>Example</AppBarHeading>
+        <AppBarActions>
+          <ControlledThemeSwitch choice={choice} toggle={toggle} />
+        </AppBarActions>
+      </AppBar>
+      <Paper>
+        <Container css={{ height: '200px' }}>
+          <Heading variant="h4">Theme switch</Heading>
+        </Container>
+      </Paper>
+    </ThemeProvider>
+  )
+}

src/components/ThemeSwitch/ThemeSwitch.tsx

@@ -2,6 +2,7 @@ import React, { ComponentProps, ElementRef, forwardRef } from 'react'
 import { IconButton } from '../IconButton'
 import { DarkMode, LightMode } from '../Icons'
 import { useThemeController } from '../ThemeProvider'
+import { ThemeChoice } from '../ThemeProvider/ThemeController'
 
 type ThemeSwitchProps = ComponentProps<typeof IconButton> & {
   /**
@@ -16,27 +17,31 @@ type ThemeSwitchProps = ComponentProps<typeof IconButton> & {
   darkColor?: string
 }
 
+type ControlledThemeSwitchProps = ThemeSwitchProps & {
+  choice: ThemeChoice
+  toggle: () => void
+}
+
 const THEME_SWITCH_CLASS_NAME = 'c-theme-switch'
+
 /**
- * The theme switch component can be used to switch from light to dark mode explicitly.
- *
- * Use the underlying hook `useThemeController` to create your own theme switch.
+ * This theme switch component is UI only and can be used to make a theme switch in a SSR setting.
  */
-export const ThemeSwitch = forwardRef<
+export const ControlledThemeSwitch = forwardRef<
   ElementRef<typeof IconButton>,
-  ThemeSwitchProps
+  ControlledThemeSwitchProps
 >(
   (
     {
       lightColor = '$brandContrast',
       darkColor = '$brandContrast',
       className,
+      choice,
+      toggle,
       ...props
     },
     forwardedRef
   ) => {
-    const [choice, toggle] = useThemeController()
-
     const isLight = choice === 'light'
     const title = isLight ? 'Use dark theme' : 'Use light theme'
     const icon = isLight ? <LightMode /> : <DarkMode />
@@ -57,4 +62,25 @@ export const ThemeSwitch = forwardRef<
     )
   }
 )
+ControlledThemeSwitch.toString = () => `.${THEME_SWITCH_CLASS_NAME}`
+
+/**
+ * The theme switch component can be used to switch from light to dark mode explicitly.
+ *
+ * Use the underlying hook `useThemeController` to create your own theme switch.
+ */
+export const ThemeSwitch = forwardRef<
+  ElementRef<typeof ControlledThemeSwitch>,
+  ThemeSwitchProps
+>((props, forwardedRef) => {
+  const [choice, toggle] = useThemeController()
+  return (
+    <ControlledThemeSwitch
+      {...props}
+      ref={forwardedRef}
+      choice={choice}
+      toggle={toggle}
+    />
+  )
+})
 ThemeSwitch.toString = () => `.${THEME_SWITCH_CLASS_NAME}`