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, 16 insertions, 13 deletions

diff --git a/tests/utils/index.tsx b/tests/utils/index.tsx
index 2457285..0570f12 100644
--- a/tests/utils/index.tsx
+++ b/tests/utils/index.tsx
@@ -7,6 +7,7 @@ import { IntlProvider } from 'react-intl';
 import {
   AckeeProvider,
   MotionProvider,
+  PrismThemeProvider,
   ThemeProvider,
 } from '../../src/utils/providers';
 
@@ -28,20 +29,22 @@ type CustomRenderOptions = {
 const AllTheProviders: FC<ProvidersConfig> = ({ children, locale = 'en' }) => (
   <IntlProvider locale={locale}>
     <ThemeProvider attribute="theme" storageKey="theme">
-      <AckeeProvider
-        domainId="any-id"
-        server="https://example.test"
-        storageKey="ackee"
-        tracking="full"
-      >
-        <MotionProvider
-          attribute="reduced-motion"
-          hasReducedMotion={false}
-          storageKey="reduced-motion"
+      <PrismThemeProvider attribute="prism-theme" storageKey="prism-theme">
+        <AckeeProvider
+          domainId="any-id"
+          server="https://example.test"
+          storageKey="ackee"
+          tracking="full"
         >
-          {children}
-        </MotionProvider>
-      </AckeeProvider>
+          <MotionProvider
+            attribute="reduced-motion"
+            hasReducedMotion={false}
+            storageKey="reduced-motion"
+          >
+            {children}
+          </MotionProvider>
+        </AckeeProvider>
+      </PrismThemeProvider>
     </ThemeProvider>
   </IntlProvider>
 );