diff --git a/core/store/src/state/context/store.tsx b/core/store/src/state/context/store.tsx index 82349c5e3..fc18c2d1b 100644 --- a/core/store/src/state/context/store.tsx +++ b/core/store/src/state/context/store.tsx @@ -5,12 +5,7 @@ import React, { useState, useEffect, } from 'react'; -import { - Store, - defaultStore, - PackageInfo, - RunConfiguration, -} from '@component-controls/core'; +import { Store, defaultStore, PackageInfo } from '@component-controls/core'; interface StoreContextProps { store: Store; @@ -104,7 +99,7 @@ export const useThemeState = (): [ return [ config.theme, theme => { - setConfig({ ...config, theme: theme || {} }); + setConfig({ ...config, theme: theme || config.theme }); }, ]; }; diff --git a/examples/stories/src/tutorial/getting-started/ui-customization.mdx b/examples/stories/src/tutorial/getting-started/ui-customization.mdx index 5b56082b1..1cfad8789 100644 --- a/examples/stories/src/tutorial/getting-started/ui-customization.mdx +++ b/examples/stories/src/tutorial/getting-started/ui-customization.mdx @@ -9,10 +9,10 @@ tags: - configuration - theme --- -import { useEffect } from 'react'; +import { useEffect, useState } from 'react'; import * as themes from '@theme-ui/presets'; import { ControlTypes } from '@component-controls/core'; -import { useThemeState } from '@component-controls/store'; +import { useStore, useThemeState } from '@component-controls/store'; import { Source } from '@component-controls/components'; import { Playground, Story, PropsTable } from '@component-controls/blocks'; @@ -25,13 +25,14 @@ You can use any [theme-ui](https://theme-ui.com) theme as a starting point for c {({ theme: themeName }) => { - const [, setTheme] = useThemeState(); - + const store = useStore(); + const [globalTheme, setGlobalTheme] = useThemeState(); + const theme = themes[themeName] || store.config.theme; useEffect(() => { - console.log(themeName); - setTheme(themes[themeName]) - }, [themeName]); - const theme = themes[themeName]; + if (globalTheme !== theme) { + setGlobalTheme(theme) + } + }, [theme]); return ( {`${themeName !== 'none' ? `import { ${themeName} } from '@theme-ui/presets';` : ''} diff --git a/ui/blocks/src/ThemeProvider/ThemeProvider.tsx b/ui/blocks/src/ThemeProvider/ThemeProvider.tsx index bdaec96a2..61fcfe890 100644 --- a/ui/blocks/src/ThemeProvider/ThemeProvider.tsx +++ b/ui/blocks/src/ThemeProvider/ThemeProvider.tsx @@ -7,6 +7,5 @@ import { useTheme } from '@component-controls/store'; export const ThemeProvider: FC> = props => { const theme = useTheme(); - console.log(theme); return ; };