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

add: dark theme to a few components

Browse Source
This commit is contained in:
Mahyar Khanbolooki
2025-08-12 19:01:54 +03:30
parent e92c33963d
commit 5936f66665
7 changed files with 92 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/[name]/(Main)/page.tsx
+3 -3
View File
@@ -310,16 +310,16 @@ const MenuIndex = () => {
selectedId={selectedDeliveryId}
onSelectionChange={changeSelectedDelivery} />
<div
className="flex w-full mt-[23px] h-11 items-center justify-between gap-2 px-3 py-4 relative bg-white/29 rounded-xl border border-solid border-neutral-200 cursor-pointer focus:outline-none focus:ring-2 focus:ring-black"
className="flex w-full mt-[23px] h-11 items-center justify-between gap-2 px-3 py-4 relative bg-container/29 rounded-xl border border-solid border-border cursor-pointer focus:outline-none focus:ring-2 focus:ring-black"
>
<span className="inline-flex items-center gap-2.5 text-sm2">
<MedalStar size="16" color="#333333" />
<MedalStar size="16" className="stroke-foreground" />
{tMenu('MenuFilterDrawer.PlusPoint')}
</span>
<Switch className="w-12 h-6" />
</div>
<div
className="flex w-full mt-[23px] h-11 items-center justify-between gap-2 px-3 py-4 relative bg-white/29 rounded-xl border border-solid border-neutral-200 cursor-pointer focus:outline-none focus:ring-2 focus:ring-black"
className="flex w-full mt-[23px] h-11 items-center justify-between gap-2 px-3 py-4 relative bg-container/29 rounded-xl border border-solid border-border cursor-pointer focus:outline-none focus:ring-2 focus:ring-black"
>
<span className="inline-flex items-center gap-2.5 text-sm2">
<TicketPercentIcon size={16} />
src/app/globals.css
+74 -35
View File
@@ -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;
}
} */