From 60c49f18389ff625177a57277ef8f292a31097bf Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Sat, 28 Oct 2023 17:12:58 +0200 Subject: refactor(providers,hooks): rewrite PrismThemeProvider & usePrismTheme * reuse Theme provider logic * move DOM mutation from provider to hook * add a script to init theme before page load --- src/utils/providers/theme-provider/theme-provider.tsx | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) (limited to 'src/utils/providers/theme-provider/theme-provider.tsx') diff --git a/src/utils/providers/theme-provider/theme-provider.tsx b/src/utils/providers/theme-provider/theme-provider.tsx index b743a7f..f09f74d 100644 --- a/src/utils/providers/theme-provider/theme-provider.tsx +++ b/src/utils/providers/theme-provider/theme-provider.tsx @@ -7,13 +7,14 @@ import { useMemo, useEffect, } from 'react'; -import { getDataAttributeFrom, getThemeFromSystem } from '../../helpers'; +import type { Theme } from '../../../types'; +import { + getDataAttributeFrom, + getThemeFromSystem, + themeValidator, +} from '../../helpers'; import { useLocalStorage, useSystemColorScheme } from '../../hooks'; -const validThemes = ['dark', 'light', 'system'] as const; - -type Theme = (typeof validThemes)[number]; - type ThemeContextProps = { resolvedTheme: Exclude; setTheme: Dispatch>; @@ -26,10 +27,6 @@ export const ThemeContext = createContext({ theme: 'system', }); -const validator = (value: unknown): value is Theme => - typeof value === 'string' && - (validThemes as readonly string[]).includes(value); - export type ThemeProviderProps = { /** * The attribute name to append to document root. @@ -60,7 +57,7 @@ export const ThemeProvider: FC = ({ const [theme, setTheme] = useLocalStorage( storageKey, defaultTheme, - validator + themeValidator ); const userColorScheme = useSystemColorScheme(); const resolvedTheme: Exclude = -- cgit v1.2.3