danak/dmenu-plus-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve: dark theme

Browse Source
This commit is contained in:
Mahyar Khanbolooki
2025-08-12 21:44:04 +03:30
parent aa9414193e
commit 7b2eae1a21
7 changed files with 58 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
next.config.ts
+1
View File
@@ -54,6 +54,7 @@ const withPWANextConfig = withPWA({
register: true, register: true,
skipWaiting: true, skipWaiting: true,
disable: process.env.NODE_ENV === 'development', disable: process.env.NODE_ENV === 'development',
maximumFileSizeToCacheInBytes: 5 * 1024 * 1024, // 5 MB
})(nextConfig); })(nextConfig);
export default withPWANextConfig; export default withPWANextConfig;
public/sw.js
+1 -1
View File
File diff suppressed because one or more lines are too long
src/app/[name]/layout.tsx
+16
View File
@@ -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
src/app/layout.tsx
+2 -1
View File
@@ -34,7 +34,8 @@ export default async function RootLayout({
<html <html
lang='fa' lang='fa'
dir='rtl' dir='rtl'
className="h-svh overflow-hidden"> className="h-svh overflow-hidden"
data-theme="light" >
<body <body
className={`antialiased bg-background h-svh overflow-hidden`} className={`antialiased bg-background h-svh overflow-hidden`}
src/components/menu/SideMenu.tsx
+4 -4
View File
@@ -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]"> <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=''> <div className=''>
<header className="px-5 pt-6 mt-3 md:px-6 xl:px-12"> <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> </header>
<nav aria-label={tMenu('NavAriaLabel')}> <nav aria-label={tMenu('NavAriaLabel')}>
@@ -111,7 +111,7 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
<Icon <Icon
variant={isActive ? 'Bold' : 'Linear'} variant={isActive ? 'Bold' : 'Linear'}
className={clsx( 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} /> size={20} width={20} height={20} />
} }
@@ -135,7 +135,7 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
<SideMenuItem <SideMenuItem
key={index} key={index}
href={href ?? ''} 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={ onClick={
typeof item.href === 'string' typeof item.href === 'string'
? hrefOnClicks.find((i) => i.href === item.href)?.handler ? hrefOnClicks.find((i) => i.href === item.href)?.handler
@@ -146,7 +146,7 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
<Icon <Icon
variant={isActive ? 'Bold' : 'Linear'} variant={isActive ? 'Bold' : 'Linear'}
className={clsx( 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} /> size={20} width={20} height={20} />
src/components/wrapper/ClientMenuRouteWrapper.tsx
-5
View File
@@ -41,11 +41,6 @@ function ClientMenuRouteWrapper({ children }: Props) {
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [location]) }, [location])
useEffect(() => {
const theme = nightMode// || window.matchMedia("(prefers-color-scheme: dark)").matches;
document.documentElement.setAttribute("data-theme", theme ? "dark" : "light");
}, [nightMode]);
return ( return (
<div className="h-svh overflow-hidden pt-10 flex flex-col pb-4 xl:pt-12"> <div className="h-svh overflow-hidden pt-10 flex flex-col pb-4 xl:pt-12">
src/components/wrapper/PreferenceWrapper.tsx
+25
View File
@@ -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