-
Is it possible to use cookies for storing the colorMode instead of localStorage? If a solution is not already present, what do you think is the best way to use cookies instead? |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
There's no supported way to do this, but it should be quite doable in userspace. Well, maybe a bit too much effort for a landing page, but if you're building a shared component library for your company, that seems fair enough. So, Theme UI's ThemeProvider exported from I'd create my own Then you create your own top level provider like this ⬇️ import React from 'react'
import {
jsx,
useThemeUI,
ThemeProvider as CoreProvider,
ThemeProviderProps as CoreThemeProviderProps,
__themeUiDefaultContextValue,
} from '@theme-ui/core'
import { css, Theme } from '@theme-ui/css'
import { ColorModeProvider } from '@theme-ui/color-modes'
import { Global } from '@emotion/react'
const RootStyles = () =>
jsx(Global, {
styles: (emotionTheme: unknown) => {
const theme = emotionTheme as Theme
return css({
'*': { boxSizing: 'border-box' },
html: {
variant: 'styles.root',
},
body: {
margin: 0,
},
})(theme)
},
})
interface MyDesignSystemProviderProps extends Pick<CoreThemeProviderProps, 'theme'> {
children?: React.ReactNode
}
export const MyDesignSystemProvider = ({
theme,
children,
}: MyDesignSystemProviderProps) => {
const outer = useThemeUI()
const isTopLevel = outer === __themeUiDefaultContextValue
return (
<CoreProvider theme={theme}>
<ColorModeProvider>
{isTopLevel && <RootStyles />}
{children}
</ColorModeProvider>
</CoreProvider>
)
} |
Beta Was this translation helpful? Give feedback.
There's no supported way to do this, but it should be quite doable in userspace. Well, maybe a bit too much effort for a landing page, but if you're building a shared component library for your company, that seems fair enough.
So, Theme UI's ThemeProvider exported from
theme-ui
is made fromColorModeProvider
,RootStyles
andCoreProvider
.I'd create my own
ColorModeProvider
based on the one in Theme UI, but replace all localStorage related code with cookies.Then you create your own top level provider like this ⬇️