From 5936f66665669de078a4ca54503cd5fc7068ee10 Mon Sep 17 00:00:00 2001 From: Mahyar Khanbolooki Date: Tue, 12 Aug 2025 19:01:54 +0330 Subject: [PATCH] add: dark theme to a few components --- src/app/[name]/(Main)/page.tsx | 6 +- src/app/globals.css | 109 ++++++++++++------ .../bottomsheet/AnimatedBottomSheet.tsx | 6 +- src/components/button/PrimaryButton.tsx | 6 +- src/components/combobox/Combobox.tsx | 10 +- src/components/ui/switch.tsx | 4 +- .../wrapper/ClientMenuRouteWrapper.tsx | 4 +- 7 files changed, 92 insertions(+), 53 deletions(-) diff --git a/src/app/[name]/(Main)/page.tsx b/src/app/[name]/(Main)/page.tsx index dfa86a3..8ff6a21 100644 --- a/src/app/[name]/(Main)/page.tsx +++ b/src/app/[name]/(Main)/page.tsx @@ -310,16 +310,16 @@ const MenuIndex = () => { selectedId={selectedDeliveryId} onSelectionChange={changeSelectedDelivery} />
- + {tMenu('MenuFilterDrawer.PlusPoint')}
diff --git a/src/app/globals.css b/src/app/globals.css index d8246e5..eb6fb45 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -147,7 +147,14 @@ input:autofill { } -@theme inline { +@theme { + --font-irancell: var(--font-irancell); + + --radius-normal: var(--radius-normal); + --text-sm2: var(--text-sm2); + --text-xs2: var(--text-xs2); + --radius-container: var(--radius-container); + --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); @@ -179,12 +186,37 @@ input:autofill { --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); + + --color-background: var(--background); /* oklch(0.963 0.008 289.2) */ + --color-container: var(--container); /* oklch(1 0 0) */ + --color-primary: var(--primary); /* oklch(0.14 0 0) */ + --color-border: var(--border); /* oklch(0.885 0.007 248.3) */ + --color-invalid: var(--invalid); /* oklch(0.515 0.118 27.5) */ + --color-valid: var(--valid); /* oklch(0.46 0.107 132.7) */ + --color-foreground: var(--foreground); /* oklch(0.202 0 0) */ + --color-disabled: var(--disabled); /* oklch(0.91 0.004 295.2) */ + --color-disabled2: var(--disabled2); /* oklch(0.5 0 0) */ + --color-disabled3: var(--disabled3); /* oklch(0.949 0.002 277.1) */ + --color-disabled-text: var(--disabled-text); /* oklch(0.34 0.006 257.4) */ + --color-menu-header: var(--menu-header); /* oklch(0.79 0.03 237.3) */ + --color-icon-deactive: var(--icon-deactive); /* oklch(0.65 0.027 234.8) */ + --color-icon-active: var(--icon-active); /* oklch(0.12 0.002 304.5) */ } -:root { - --radius: 0.625rem; +/* unified theme */ +:root { + --font-irancell: "Irancell"; + + --radius-normal: 10px; + --text-sm2: 13px; + --text-xs2: 10px; + --radius-container: 24px; +} + +html[data-theme="light"] { + /* --radius: 0.625rem; --background: oklch(1 0 0); - --foreground: oklch(0.145 0 0); + --foreground: oklch(21% 0.006 285.885); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); @@ -193,12 +225,12 @@ input:autofill { --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); - --muted: oklch(0.97 0 0); + --muted: oklch(0.928 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); - --border: oklch(0.922 0 0); + --border: oklch(0.9219 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); @@ -213,11 +245,26 @@ input:autofill { --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); - --sidebar-ring: oklch(0.708 0 0); + --sidebar-ring: oklch(0.708 0 0); */ + + --background: oklch(0.963 0.008 289.2); /* #F4F5F9 */ + --container: oklch(1 0 0); /* #FFFFFF */ + --primary: oklch(0.14 0 0); /* #000000 */ + --border: oklch(0.885 0.007 248.3); /* #E5E5E5 */ + --invalid: oklch(0.515 0.118 27.5); /* red (#FF0000 approx) */ + --valid: oklch(0.46 0.107 132.7); /* #439C46 */ + --foreground: oklch(0.202 0 0); /* #333333 */ + --disabled: oklch(0.91 0.004 295.2); /* #E7E7E7 */ + --disabled2: oklch(0.5 0 0); /* #7F7F7F */ + --disabled3: oklch(0.949 0.002 277.1); /* #F2F2F2 */ + --disabled-text: oklch(0.34 0.006 257.4); /* #8C90A3 */ + --menu-header: oklch(0.79 0.03 237.3); /* #C3C7DD */ + --icon-deactive: oklch(0.65 0.027 234.8); /* #A8ABBF */ + --icon-active: oklch(0.12 0.002 304.5); /* #292D32 */ } -.dark { - --background: oklch(0.145 0 0); +html[data-theme="dark"] { + /* --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.205 0 0); --card-foreground: oklch(0.985 0 0); @@ -247,10 +294,25 @@ input:autofill { --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(1 0 0 / 10%); - --sidebar-ring: oklch(0.556 0 0); + --sidebar-ring: oklch(0.556 0 0); */ + + --background: oklch(23.26% 0.014 253.1); /* #F4F5F9 */ + --container: oklch(25.33% 0.016 252.42); /* #FFFFFF */ + --primary: oklch(14% 0.005 285.823); /* #000000 */ + --border: oklch(21.15% 0.012 254.09); /* #E5E5E5 */ + --invalid: oklch(0.515 0.118 27.5); /* red (#FF0000 approx) */ + --valid: oklch(0.46 0.107 132.7); /* #439C46 */ + --foreground: oklch(97.807% 0.029 256.847); /* #333333 */ + --disabled: oklch(42.866% 0.00494 286.051); /* #E7E7E7 */ + --disabled2: oklch(0.5 0 0); /* #7F7F7F */ + --disabled3: oklch(0.949 0.002 277.1); /* #F2F2F2 */ + --disabled-text: oklch(75.73% 0.01398 251.72); /* #8C90A3 */ + --menu-header: oklch(0.79 0.03 237.3); /* #C3C7DD */ + --icon-deactive: oklch(0.65 0.027 234.8); /* #A8ABBF */ + --icon-active: oklch(0.12 0.002 304.5); /* #292D32 */ } -@layer base { +/* @layer base { * { @apply border-border outline-ring/50; } @@ -258,27 +320,4 @@ input:autofill { body { @apply bg-background text-foreground; } -} - -@theme { - --font-irancell: "Irancell"; - - --color-background: #F4F5F9; - --color-container: #FFFFFF; - --color-primary: #000000; - --color-border: #E5E5E5; - --color-invalid: red; - --color-valid: #439C46; - --color-foreground: #333333; - --color-disabled: #E7E7E7; - --color-disabled2: #7F7F7F; - --color-disabled3: #F2F2F2; - --color-disabled-text: #8C90A3; - --color-menu-header: #C3C7DD; - --color-icon-deactive: #A8ABBF; - --color-icon-active: #292D32; - --radius-normal: 10px; - --text-sm2: 13px; - --text-xs2: 10px; - --radius-container: 24px; -} \ No newline at end of file +} */ diff --git a/src/components/bottomsheet/AnimatedBottomSheet.tsx b/src/components/bottomsheet/AnimatedBottomSheet.tsx index d03b015..ea2791f 100644 --- a/src/components/bottomsheet/AnimatedBottomSheet.tsx +++ b/src/components/bottomsheet/AnimatedBottomSheet.tsx @@ -53,7 +53,7 @@ const AnimatedBottomSheet = ({ blurOpacity = 64, overrideClassName = '', showTit overrideClassName ?? '', 'absolute left-0 w-full rounded-t-4xl pt-[39px] pb-6', 'bottom-0', - 'bg-container/64' + 'bg-container/64 dark:bg-container/80' )} initial="hidden" animate={props.visible ? 'visible' : 'hidden'} @@ -61,12 +61,12 @@ const AnimatedBottomSheet = ({ blurOpacity = 64, overrideClassName = '', showTit >
{showTitle && -
+
{props.title}
} {showCloseButton && -
+
} diff --git a/src/components/button/PrimaryButton.tsx b/src/components/button/PrimaryButton.tsx index c48c9f4..477f362 100644 --- a/src/components/button/PrimaryButton.tsx +++ b/src/components/button/PrimaryButton.tsx @@ -16,14 +16,14 @@ function Button({ children, className, disabled, pending, ...rest }: Props) { disabled={disabled} className={clsx( className, - disabled ? 'bg-disabled text-disabled-text' : 'bg-primary text-white hover:bg-[#222222] active:brightness-110', + disabled ? 'bg-disabled text-disabled-text' : 'bg-primary text-background dark:text-foreground hover:bg-primary/60 active:brightness-110', pending && 'bg-transparent! text-transparent! cursor-auto!', 'relative transition-all duration-200 cursor-pointer w-full rounded-normal p-3 font-normal text-sm overflow-clip' )} {...rest} > @@ -33,7 +33,7 @@ function Button({ children, className, disabled, pending, ...rest }: Props) { whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }} className='-translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2 absolute'> - + {children} diff --git a/src/components/combobox/Combobox.tsx b/src/components/combobox/Combobox.tsx index 554a521..96fd69b 100644 --- a/src/components/combobox/Combobox.tsx +++ b/src/components/combobox/Combobox.tsx @@ -97,7 +97,7 @@ function Combobox({ title, options, placeholder, icon: Icon, expanded, selectedI {...props} >
- + {title} @@ -137,7 +137,7 @@ function Combobox({ title, options, placeholder, icon: Icon, expanded, selectedI e.stopPropagation()} @@ -147,7 +147,7 @@ function Combobox({ title, options, placeholder, icon: Icon, expanded, selectedI > {searchable && -
+
setSelection(e, i)} key={v.id} data-selected={v.id === selectedId} - className="flex gap-3 items-center justify-end px-2 py-1 cursor-pointer hover:bg-gray-50 rounded-md last:rounded-b-xl" + className="flex gap-3 items-center justify-end px-2 py-1 cursor-pointer hover:bg-current/10 rounded-md last:rounded-b-xl" tabIndex={0} role="option" aria-selected diff --git a/src/components/ui/switch.tsx b/src/components/ui/switch.tsx index 2e072c7..325df7a 100644 --- a/src/components/ui/switch.tsx +++ b/src/components/ui/switch.tsx @@ -14,7 +14,7 @@ function Switch({ dir="ltr" data-slot="switch" className={cn( - "cursor-pointer peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-6 w-12 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50", + "cursor-pointer peer dark:data-[state=unchecked]:bg-neutral-600 dark:data-[state=checked]:bg-primary/80 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 inline-flex h-6 w-12 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50", className )} {...props} @@ -22,7 +22,7 @@ function Switch({ diff --git a/src/components/wrapper/ClientMenuRouteWrapper.tsx b/src/components/wrapper/ClientMenuRouteWrapper.tsx index b6c059d..112a619 100644 --- a/src/components/wrapper/ClientMenuRouteWrapper.tsx +++ b/src/components/wrapper/ClientMenuRouteWrapper.tsx @@ -42,14 +42,14 @@ function ClientMenuRouteWrapper({ children }: Props) { }, [location]) useEffect(() => { - const theme = nightMode || window.matchMedia("(prefers-color-scheme: dark)").matches; + const theme = nightMode// || window.matchMedia("(prefers-color-scheme: dark)").matches; document.documentElement.setAttribute("data-theme", theme ? "dark" : "light"); }, [nightMode]); return (
-
+