Gatsby SSR colorMode Fix

packages/color-modes/src/index.tsx

@@ -109,7 +109,7 @@ const useColorModeState = (theme: Theme = {}) => {
   }, [])
 
   // when mode changes, we save it to localStorage
-  React.useEffect(() => {
+  useEffect(() => {
     if (mode && theme.useLocalStorage !== false) {
       storage.set(mode)
     }
@@ -187,6 +187,10 @@ export const ColorModeProvider: React.FC = ({ children }) => {
   const initialTheme = outer.theme || {}
   const theme = applyColorMode(initialTheme, colorMode)
 
+  const { initialColorModeName } = outer.theme
+  const [firstRender, setFirstRender] = useState(true)
+  const [firstColorMode, setFirstColorMode] = useState(initialColorModeName)
+
   if (theme.useCustomProperties !== false) {
     // TODO: This mutation is less than ideal
     // We could save custom properties to `theme.colorVars`,
@@ -198,13 +202,24 @@ export const ColorModeProvider: React.FC = ({ children }) => {
         omitModes(initialTheme.colors || {}),
         'colors'
       )
-    }, [colorMode])
+    }, [colorMode, firstRender])
   }
 
+  // SSR Fix, first colorMode is not computed properly
+  useEffect(() => {
+    const fixKey = colorMode === undefined ? undefined : initialColorModeName
+    const fixSSR = colorMode === fixKey ? initialColorModeName : colorMode
+
+    if (firstRender) {
+      setFirstColorMode(fixSSR)
+      setFirstRender(false)
+    }
+  }, [colorMode])
+
   const context = {
     ...outer,
     theme,
-    colorMode,
+    colorMode: firstRender ? firstColorMode : colorMode,
     setColorMode,
   }
 

packages/docs/src/components/layout.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { jsx, Themed, useColorMode } from 'theme-ui'
+import { jsx, Themed, useColorMode, useThemeUI } from 'theme-ui'
 import { useState, useRef } from 'react'
 import { Flex, Box } from '@theme-ui/components'
 import { AccordionNav } from '@theme-ui/sidenav'
@@ -14,35 +14,22 @@ import NavLink from './nav-link'
 import Button from './button'
 import Sidebar from '../sidebar.mdx'
 
-const modes = ['default', 'dark', 'deep', 'swiss']
-
 const sidebar = {
   wrapper: AccordionNav,
   a: NavLink,
 }
 
-const getModeName = (mode) => {
-  switch (mode) {
-    case 'dark':
-      return 'Dark'
-    case 'deep':
-      return 'Deep'
-    case 'swiss':
-      return 'Swiss'
-    case 'light':
-    case 'default':
-      return 'Light'
-    case undefined:
-      return '         '
-    default:
-      return mode
-  }
-}
-
 export default function DocsLayout(props) {
   const [menuOpen, setMenuOpen] = useState(false)
   const nav = useRef(null)
-  const [mode, setMode] = useColorMode()
+
+  const {
+    colorMode: mode,
+    setColorMode: setMode,
+    theme: { rawColors },
+  } = useThemeUI()
+
+  const modes = useRef(Object.keys(rawColors?.modes)).current
 
   const fullwidth =
     (props.pageContext.frontmatter &&
@@ -89,6 +76,14 @@ export default function DocsLayout(props) {
                 Theme UI
               </Link>
             </Flex>
+            <Flex
+              sx={{
+                bg: 'pink',
+                display: mode !== 'dark' && 'none',
+                width: 200,
+                height: 200,
+              }}
+            />
             <Flex>
               <NavLink href="https://github.com/system-ui/theme-ui">
                 GitHub
@@ -97,9 +92,10 @@ export default function DocsLayout(props) {
                 sx={{
                   ml: 2,
                   whiteSpace: 'pre',
+                  textTransform: 'capitalize',
                 }}
                 onClick={cycleMode}>
-                {getModeName(mode)}
+                {mode}
               </Button>
             </Flex>
           </Flex>
@@ -112,7 +108,7 @@ export default function DocsLayout(props) {
             height: '100%',
           }}>
           <Sidebar
-            ref={nav}
+            forwardref={nav}
             role="navigation"
             onFocus={(e) => {
               setMenuOpen(true)

packages/docs/src/gatsby-plugin-theme-ui/index.js

@@ -10,6 +10,8 @@ const tableCellStyle = {
 }
 
 const theme = {
+  initialColorModeName: 'light',
+  useLocalStorage: false,
   colors: {
     text: '#000000',
     background: '#ffffff',

packages/editor/src/index.ts

@@ -3,8 +3,10 @@ export { EditorProvider } from './EditorProvider'
 export { default as Theme } from './Theme'
 // theme.styles form
 export { default as Styles } from './Styles'
-// sx style object forms
-export * as Sx from './Sx'
-
 // extra components
 export { default as ColorPicker } from './ColorPicker'
+
+// TODO: export-from breaks docs builds
+// sx style object forms
+import * as Sx from './Sx'
+export { Sx }