feat(ui): ThemeProvider

Author: vio

packages/ui/src/app/app.jsx

@@ -5,6 +5,7 @@ import { HashRouter, NavLink, Route, Switch, useLocation } from 'react-router-do
 import { COMPONENT } from '@bundle-stats/utils';
 
 import { URLS } from '../constants';
+import { ThemeProvider } from '../context/theme';
 import { BundleAssets } from '../components/bundle-assets';
 import { BundleAssetsTotals } from '../components/bundle-assets-totals';
 import { BundleModules } from '../components/bundle-modules';
@@ -205,10 +206,12 @@ AppComponent.propTypes = {
 };
 
 export const App = (props) => (
-  <HashRouter>
-    <ScrollToTop />
-    <QueryStateProvider>
-      <AppComponent {...props} />
-    </QueryStateProvider>
-  </HashRouter>
+  <ThemeProvider>
+    <HashRouter>
+      <ScrollToTop />
+      <QueryStateProvider>
+        <AppComponent {...props} />
+      </QueryStateProvider>
+    </HashRouter>
+  </ThemeProvider>
 );

packages/ui/src/context/index.ts

@@ -0,0 +1 @@
+export * from './theme';

packages/ui/src/context/theme.tsx

@@ -0,0 +1,55 @@
+import type { ReactNode } from 'react';
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { useCookie } from 'react-use';
+
+type ThemeName = 'light' | 'dark';
+
+type ThemeContextProps = {
+  name: ThemeName;
+  update: (newTheme: ThemeName) => void;
+};
+
+const ThemeContext = createContext<ThemeContextProps>({
+  name: 'light',
+  update: () => {},
+});
+
+export const ThemeProvider = ({ children }: { children: ReactNode }) => {
+  const [cookieValue, setCookieValue] = useCookie('theme');
+  const [name, setName] = useState<ThemeName>(cookieValue === 'dark' ? 'dark' : 'light');
+
+  const updateClassList = useCallback((newTheme: ThemeName) => {
+    const htmlElm = document.querySelector('html');
+
+    if (newTheme === 'dark') {
+      htmlElm?.classList.replace('light-theme', 'dark-theme');
+    } else {
+      htmlElm?.classList.replace('dark-theme', 'light-theme');
+    }
+  }, []);
+
+  const updateTheme = useCallback((nextTheme: ThemeName) => {
+    setName(nextTheme);
+    updateClassList(nextTheme);
+    setCookieValue(nextTheme);
+  }, []);
+
+  // Sync classList
+  useEffect(() => {
+    updateClassList(name);
+  }, [name]);
+
+  const value = useMemo(
+    () => ({
+      name,
+      update: updateTheme,
+    }),
+    [name, updateTheme],
+  );
+
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+};
+
+export const useTheme = (): ThemeContextProps => {
+  return useContext(ThemeContext);
+};

packages/ui/src/index.js

@@ -1,5 +1,6 @@
 export * from './ui';
 export * from './layout';
+export * from './context';
 export * from './components';
 export * from './utils';
 export * from './app';