chore: dark config

src/hooks/use-overlay-scroller.ts

@@ -1,3 +1,5 @@
+import { userSettingsHelperAtom } from '@/atoms/settings';
+import { useAtom } from 'jotai';
 import { throttle } from 'lodash';
 import {
   UseOverlayScrollbarsParams,
@@ -28,6 +30,7 @@ export default function useOverlayScroller(data?: {
   events?: any;
   defer?: boolean;
 }) {
+  const [useSettings] = useAtom(userSettingsHelperAtom);
   const { options, events, defer = true } = data || {};
   const scrollEventElement = React.useRef<any>(null);
   const instanceRef = React.useRef<any>(null);
@@ -44,7 +47,10 @@ export default function useOverlayScroller(data?: {
         x: 'hidden'
       },
       scrollbars: {
-        theme: options?.theme || 'os-theme-dark',
+        theme:
+          options?.theme || useSettings.theme === 'light'
+            ? 'os-theme-dark'
+            : 'os-theme-light',
         autoHide: 'scroll',
         autoHideDelay: 600,
         clickScroll: 'instant'

src/hooks/use-user-settings.ts

@@ -0,0 +1,46 @@
+import { userSettingsHelperAtom } from '@/atoms/settings';
+import themeConfig from '@/config/theme';
+import { useAtom } from 'jotai';
+import { useEffect, useMemo } from 'react';
+
+type Theme = 'light' | 'realDark';
+
+export default function useUserSettings() {
+  const { light, dark } = themeConfig;
+  const [userSettings, setUserSettings] = useAtom(userSettingsHelperAtom);
+
+  const setHtmlThemeAttr = (theme: string) => {
+    const html = document.querySelector('html');
+    if (html) {
+      html.setAttribute('data-theme', theme);
+    }
+  };
+
+  const themeData = useMemo(() => {
+    return {
+      ...(userSettings.theme === 'realDark' ? dark : light)
+    };
+  }, [userSettings.theme]);
+
+  const isDarkTheme = useMemo(() => {
+    return userSettings.theme === 'realDark';
+  }, [userSettings.theme]);
+
+  const setTheme = (theme: Theme) => {
+    setHtmlThemeAttr(theme);
+    setUserSettings({ ...userSettings, theme: theme });
+  };
+
+  useEffect(() => {
+    setHtmlThemeAttr(userSettings.theme);
+  }, [userSettings.theme]);
+
+  return {
+    userSettings,
+    setUserSettings,
+    setTheme,
+    isDarkTheme,
+    themeData,
+    componentSize: 'large'
+  };
+}