improve: dark theme

2025-08-12 21:44:04 +03:30
parent aa9414193e
commit 7b2eae1a21
7 changed files with 58 additions and 20 deletions
@@ -6,15 +6,15 @@ const nextConfig: NextConfig = {
  poweredByHeader: false,
  images: {
    remotePatterns: [
-    {
-      protocol: 'https',
-      hostname: '**',
-    },
-    {
-      protocol: 'http',
-      hostname: '**',
-    },
-  ]
+      {
+        protocol: 'https',
+        hostname: '**',
+      },
+      {
+        protocol: 'http',
+        hostname: '**',
+      },
+    ]
  },
  headers: async () => [
    {
@@ -54,6 +54,7 @@ const withPWANextConfig = withPWA({
  register: true,
  skipWaiting: true,
  disable: process.env.NODE_ENV === 'development',
+  maximumFileSizeToCacheInBytes: 5 * 1024 * 1024, // 5 MB
 })(nextConfig);

 export default withPWANextConfig;
@@ -0,0 +1,16 @@
+import PreferenceWrapper from '@/components/wrapper/PreferenceWrapper';
+import React from 'react'
+
+type Props = {
+    children: React.ReactElement
+}
+
+function layout({ children }: Props) {
+    return (
+        <PreferenceWrapper>
+            {children}
+        </PreferenceWrapper>
+    )
+}
+
+export default layout
@@ -34,7 +34,8 @@ export default async function RootLayout({
    <html
      lang='fa'
      dir='rtl'
-      className="h-svh overflow-hidden">
+      className="h-svh overflow-hidden"
+      data-theme="light" >
      <body

        className={`antialiased bg-background h-svh overflow-hidden`}
@@ -86,7 +86,7 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
            <section className="flex-1 overflow-y-scroll noscrollbar pt-20 pb-10 flex flex-col justify-between md:w-[160px] xl:w-[285px]">
                <div className=''>
                    <header className="px-5 pt-6 mt-3 md:px-6 xl:px-12">
-                        <h6 className="text-start font-bold text-sm text-menu-header mt-2 mb-[19px]">منو</h6>
+                        <h6 className="text-start font-bold text-sm text-menu-header mt-2 mb-[19px] dark:text-neutral-400">منو</h6>
                    </header>

                    <nav aria-label={tMenu('NavAriaLabel')}>
@@ -111,7 +111,7 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
                                                    <Icon
                                                        variant={isActive ? 'Bold' : 'Linear'}
                                                        className={clsx(
-                                                            isActive ? 'text-primary fill-primary dark:text-neutral-200 dark:fill-neutral-200' : 'stroke-icon-deactive text-icon-deactive'
+                                                            isActive ? 'text-primary fill-primary dark:text-neutral-200 dark:fill-neutral-200' : 'stroke-neutral-400 text-neutral-400'
                                                        )}
                                                        size={20} width={20} height={20} />
                                                }
@@ -135,7 +135,7 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
                                        <SideMenuItem
                                            key={index}
                                            href={href ?? ''}
-                                            className={clsx(isActive && 'text-primary! border-primary!', 'border-r-4!')}
+                                            className={clsx(isActive && 'text-primary! border-primary! dark:text-neutral-200! dark:border-neutral-200!', 'border-r-4!')}
                                            onClick={
                                                typeof item.href === 'string'
                                                    ? hrefOnClicks.find((i) => i.href === item.href)?.handler
@@ -146,7 +146,7 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
                                                <Icon
                                                    variant={isActive ? 'Bold' : 'Linear'}
                                                    className={clsx(
-                                                        isActive ? 'text-primary fill-primary ' : 'stroke-icon-deactive text-icon-deactive'
+                                                        isActive ? 'text-primary fill-primary dark:text-neutral-200 dark:fill-neutral-200' : 'stroke-neutral-400 text-neutral-400'
                                                    )}
                                                    size={20} width={20} height={20} />

@@ -41,11 +41,6 @@ function ClientMenuRouteWrapper({ children }: Props) {
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [location])

-  useEffect(() => {
-    const theme = nightMode// || window.matchMedia("(prefers-color-scheme: dark)").matches;
-    document.documentElement.setAttribute("data-theme", theme ? "dark" : "light");
-  }, [nightMode]);
-
  return (
    <div className="h-svh overflow-hidden pt-10 flex flex-col pb-4 xl:pt-12">

@@ -0,0 +1,25 @@
+'use client';
+
+import usePreference from '@/hooks/helpers/usePreference';
+import React, { useEffect } from 'react'
+
+type Props = {
+    children: React.ReactNode
+}
+
+function PreferenceWrapper({ children }: Props) {
+    const { state: nightMode } = usePreference('night-mode', false);
+
+    useEffect(() => {
+        const theme = nightMode //|| window.matchMedia("(prefers-color-scheme: dark)").matches;
+        document.documentElement.setAttribute("data-theme", theme ? "dark" : "light");
+    }, [nightMode]);
+
+    return (
+        <>
+            {children}
+        </>
+    )
+}
+
+export default PreferenceWrapper