-
|
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.
-
|
Thanks for taking the time to help me out! |
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-uiis made fromColorModeProvider,RootStylesandCoreProvider.I'd create my own
ColorModeProviderbased on the one in Theme UI, but replace all localStorage related code with cookies.Then you create your own top level provider like this ⬇️