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

1 files changed, 7 insertions, 10 deletions

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<Theme, 'system'>;
   setTheme: Dispatch<SetStateAction<Theme>>;
@@ -26,10 +27,6 @@ export const ThemeContext = createContext<ThemeContextProps>({
   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<ThemeProviderProps> = ({
   const [theme, setTheme] = useLocalStorage(
     storageKey,
     defaultTheme,
-    validator
+    themeValidator
   );
   const userColorScheme = useSystemColorScheme();
   const resolvedTheme: Exclude<Theme, 'system'> =