sepehr/Momento
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add 6 pastel color themes (Rose, Green, Lavender, Sand, Ocean, Sunset)
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 45s
Details

Browse Source 
Each theme includes light and dark mode variants with carefully tuned
oklch colors for foreground, card, borders, sidebar, and all UI elements.
Total: 10 named themes + dark mode + auto (system preference).

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Sepehr Ramezani
2026-05-01 16:38:43 +02:00
parent fcb5932d33
commit 427e32e813
2 changed files with 358 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
memento-note/app/(main)/settings/appearance/appearance-settings-client.tsx
View File

@@ -108,6 +108,12 @@ export function AppearanceSettingsClient({ initialFontSize, initialTheme, initia
{ value: 'dark', label: t('settings.themeDark') },
{ value: 'sepia', label: 'Sepia' },
{ value: 'midnight', label: 'Midnight' },
{ value: 'rose', label: 'Rose' },
{ value: 'green', label: 'Green' },
{ value: 'lavender', label: 'Lavender' },
{ value: 'sand', label: 'Sand' },
{ value: 'ocean', label: 'Ocean' },
{ value: 'sunset', label: 'Sunset' },
{ value: 'auto', label: t('settings.themeSystem') },
]}
onChange={handleThemeChange}

352
memento-note/app/globals.css
View File

@@ -408,6 +408,358 @@
--sidebar-ring: oklch(0.58 0.02 45);
}
/* ──────────────────────────────────────────────
PASTEL THEMES — 6 additional color themes
────────────────────────────────────────────── */
/* Rose — soft pink tones */
[data-theme='rose'] {
--background: oklch(0.97 0.01 350);
--foreground: oklch(0.22 0.02 350);
--card: oklch(0.99 0.005 350);
--card-foreground: oklch(0.22 0.02 350);
--popover: oklch(0.99 0.005 350);
--popover-foreground: oklch(0.22 0.02 350);
--primary: oklch(0.55 0.15 350);
--primary-foreground: oklch(0.99 0 0);
--secondary: oklch(0.93 0.02 350);
--secondary-foreground: oklch(0.22 0.02 350);
--muted: oklch(0.92 0.015 350);
--muted-foreground: oklch(0.55 0.015 350);
--accent: oklch(0.92 0.02 350);
--accent-foreground: oklch(0.22 0.02 350);
--destructive: oklch(0.6 0.18 25);
--border: oklch(0.85 0.02 350);
--input: oklch(0.85 0.02 350);
--ring: oklch(0.55 0.15 350);
--sidebar: oklch(0.95 0.015 350);
--sidebar-foreground: oklch(0.22 0.02 350);
--sidebar-primary: oklch(0.55 0.15 350);
--sidebar-primary-foreground: oklch(0.99 0 0);
--sidebar-accent: oklch(0.92 0.02 350);
--sidebar-accent-foreground: oklch(0.22 0.02 350);
--sidebar-border: oklch(0.88 0.02 350);
--sidebar-ring: oklch(0.6 0.015 350);
}
[data-theme='rose'].dark {
--background: oklch(0.14 0.01 350);
--foreground: oklch(0.95 0.01 350);
--card: oklch(0.18 0.015 350);
--card-foreground: oklch(0.95 0.01 350);
--popover: oklch(0.18 0.015 350);
--popover-foreground: oklch(0.95 0.01 350);
--primary: oklch(0.6 0.12 350);
--primary-foreground: oklch(0.1 0 0);
--secondary: oklch(0.24 0.02 350);
--secondary-foreground: oklch(0.95 0.01 350);
--muted: oklch(0.22 0.015 350);
--muted-foreground: oklch(0.55 0.02 350);
--accent: oklch(0.26 0.025 350);
--accent-foreground: oklch(0.95 0.01 350);
--destructive: oklch(0.65 0.18 25);
--border: oklch(0.33 0.02 350);
--input: oklch(0.33 0.02 350);
--ring: oklch(0.6 0.02 350);
--sidebar: oklch(0.12 0.01 350);
--sidebar-foreground: oklch(0.95 0.01 350);
--sidebar-primary: oklch(0.6 0.12 350);
--sidebar-primary-foreground: oklch(0.1 0 0);
--sidebar-accent: oklch(0.26 0.025 350);
--sidebar-accent-foreground: oklch(0.95 0.01 350);
--sidebar-border: oklch(0.33 0.02 350);
--sidebar-ring: oklch(0.6 0.02 350);
}
/* Green — soft sage/mint tones */
[data-theme='green'] {
--background: oklch(0.97 0.01 155);
--foreground: oklch(0.22 0.03 155);
--card: oklch(0.99 0.005 155);
--card-foreground: oklch(0.22 0.03 155);
--popover: oklch(0.99 0.005 155);
--popover-foreground: oklch(0.22 0.03 155);
--primary: oklch(0.5 0.12 155);
--primary-foreground: oklch(0.99 0 0);
--secondary: oklch(0.93 0.02 155);
--secondary-foreground: oklch(0.22 0.03 155);
--muted: oklch(0.92 0.015 155);
--muted-foreground: oklch(0.55 0.02 155);
--accent: oklch(0.92 0.02 155);
--accent-foreground: oklch(0.22 0.03 155);
--destructive: oklch(0.6 0.18 25);
--border: oklch(0.85 0.02 155);
--input: oklch(0.85 0.02 155);
--ring: oklch(0.5 0.12 155);
--sidebar: oklch(0.95 0.015 155);
--sidebar-foreground: oklch(0.22 0.03 155);
--sidebar-primary: oklch(0.5 0.12 155);
--sidebar-primary-foreground: oklch(0.99 0 0);
--sidebar-accent: oklch(0.92 0.02 155);
--sidebar-accent-foreground: oklch(0.22 0.03 155);
--sidebar-border: oklch(0.88 0.02 155);
--sidebar-ring: oklch(0.6 0.015 155);
}
[data-theme='green'].dark {
--background: oklch(0.14 0.01 155);
--foreground: oklch(0.95 0.01 155);
--card: oklch(0.18 0.015 155);
--card-foreground: oklch(0.95 0.01 155);
--popover: oklch(0.18 0.015 155);
--popover-foreground: oklch(0.95 0.01 155);
--primary: oklch(0.6 0.1 155);
--primary-foreground: oklch(0.1 0 0);
--secondary: oklch(0.24 0.02 155);
--secondary-foreground: oklch(0.95 0.01 155);
--muted: oklch(0.22 0.015 155);
--muted-foreground: oklch(0.55 0.02 155);
--accent: oklch(0.26 0.02 155);
--accent-foreground: oklch(0.95 0.01 155);
--destructive: oklch(0.65 0.18 25);
--border: oklch(0.33 0.02 155);
--input: oklch(0.33 0.02 155);
--ring: oklch(0.6 0.02 155);
--sidebar: oklch(0.12 0.01 155);
--sidebar-foreground: oklch(0.95 0.01 155);
--sidebar-primary: oklch(0.6 0.1 155);
--sidebar-primary-foreground: oklch(0.1 0 0);
--sidebar-accent: oklch(0.26 0.02 155);
--sidebar-accent-foreground: oklch(0.95 0.01 155);
--sidebar-border: oklch(0.33 0.02 155);
--sidebar-ring: oklch(0.6 0.02 155);
}
/* Lavender — soft purple tones */
[data-theme='lavender'] {
--background: oklch(0.97 0.01 290);
--foreground: oklch(0.22 0.02 290);
--card: oklch(0.99 0.005 290);
--card-foreground: oklch(0.22 0.02 290);
--popover: oklch(0.99 0.005 290);
--popover-foreground: oklch(0.22 0.02 290);
--primary: oklch(0.52 0.14 290);
--primary-foreground: oklch(0.99 0 0);
--secondary: oklch(0.93 0.02 290);
--secondary-foreground: oklch(0.22 0.02 290);
--muted: oklch(0.92 0.015 290);
--muted-foreground: oklch(0.55 0.02 290);
--accent: oklch(0.92 0.02 290);
--accent-foreground: oklch(0.22 0.02 290);
--destructive: oklch(0.6 0.18 25);
--border: oklch(0.85 0.02 290);
--input: oklch(0.85 0.02 290);
--ring: oklch(0.52 0.14 290);
--sidebar: oklch(0.95 0.015 290);
--sidebar-foreground: oklch(0.22 0.02 290);
--sidebar-primary: oklch(0.52 0.14 290);
--sidebar-primary-foreground: oklch(0.99 0 0);
--sidebar-accent: oklch(0.92 0.02 290);
--sidebar-accent-foreground: oklch(0.22 0.02 290);
--sidebar-border: oklch(0.88 0.02 290);
--sidebar-ring: oklch(0.6 0.015 290);
}
[data-theme='lavender'].dark {
--background: oklch(0.14 0.01 290);
--foreground: oklch(0.95 0.01 290);
--card: oklch(0.18 0.015 290);
--card-foreground: oklch(0.95 0.01 290);
--popover: oklch(0.18 0.015 290);
--popover-foreground: oklch(0.95 0.01 290);
--primary: oklch(0.6 0.12 290);
--primary-foreground: oklch(0.1 0 0);
--secondary: oklch(0.24 0.02 290);
--secondary-foreground: oklch(0.95 0.01 290);
--muted: oklch(0.22 0.015 290);
--muted-foreground: oklch(0.55 0.02 290);
--accent: oklch(0.26 0.025 290);
--accent-foreground: oklch(0.95 0.01 290);
--destructive: oklch(0.65 0.18 25);
--border: oklch(0.33 0.02 290);
--input: oklch(0.33 0.02 290);
--ring: oklch(0.6 0.02 290);
--sidebar: oklch(0.12 0.01 290);
--sidebar-foreground: oklch(0.95 0.01 290);
--sidebar-primary: oklch(0.6 0.12 290);
--sidebar-primary-foreground: oklch(0.1 0 0);
--sidebar-accent: oklch(0.26 0.025 290);
--sidebar-accent-foreground: oklch(0.95 0.01 290);
--sidebar-border: oklch(0.33 0.02 290);
--sidebar-ring: oklch(0.6 0.02 290);
}
/* Sand — warm beige/cream tones */
[data-theme='sand'] {
--background: oklch(0.97 0.01 70);
--foreground: oklch(0.25 0.02 60);
--card: oklch(0.99 0.005 70);
--card-foreground: oklch(0.25 0.02 60);
--popover: oklch(0.99 0.005 70);
--popover-foreground: oklch(0.25 0.02 60);
--primary: oklch(0.5 0.1 55);
--primary-foreground: oklch(0.99 0 0);
--secondary: oklch(0.93 0.015 70);
--secondary-foreground: oklch(0.25 0.02 60);
--muted: oklch(0.92 0.012 70);
--muted-foreground: oklch(0.55 0.015 60);
--accent: oklch(0.92 0.015 70);
--accent-foreground: oklch(0.25 0.02 60);
--destructive: oklch(0.6 0.18 25);
--border: oklch(0.85 0.015 70);
--input: oklch(0.85 0.015 70);
--ring: oklch(0.5 0.1 55);
--sidebar: oklch(0.95 0.012 70);
--sidebar-foreground: oklch(0.25 0.02 60);
--sidebar-primary: oklch(0.5 0.1 55);
--sidebar-primary-foreground: oklch(0.99 0 0);
--sidebar-accent: oklch(0.92 0.015 70);
--sidebar-accent-foreground: oklch(0.25 0.02 60);
--sidebar-border: oklch(0.88 0.015 70);
--sidebar-ring: oklch(0.6 0.015 60);
}
[data-theme='sand'].dark {
--background: oklch(0.15 0.01 60);
--foreground: oklch(0.95 0.01 60);
--card: oklch(0.19 0.015 60);
--card-foreground: oklch(0.95 0.01 60);
--popover: oklch(0.19 0.015 60);
--popover-foreground: oklch(0.95 0.01 60);
--primary: oklch(0.6 0.1 55);
--primary-foreground: oklch(0.1 0 0);
--secondary: oklch(0.24 0.015 60);
--secondary-foreground: oklch(0.95 0.01 60);
--muted: oklch(0.22 0.012 60);
--muted-foreground: oklch(0.55 0.02 60);
--accent: oklch(0.26 0.02 60);
--accent-foreground: oklch(0.95 0.01 60);
--destructive: oklch(0.65 0.18 25);
--border: oklch(0.33 0.015 60);
--input: oklch(0.33 0.015 60);
--ring: oklch(0.6 0.02 55);
--sidebar: oklch(0.12 0.01 60);
--sidebar-foreground: oklch(0.95 0.01 60);
--sidebar-primary: oklch(0.6 0.1 55);
--sidebar-primary-foreground: oklch(0.1 0 0);
--sidebar-accent: oklch(0.26 0.02 60);
--sidebar-accent-foreground: oklch(0.95 0.01 60);
--sidebar-border: oklch(0.33 0.015 60);
--sidebar-ring: oklch(0.6 0.02 55);
}
/* Ocean — soft teal/cyan tones */
[data-theme='ocean'] {
--background: oklch(0.97 0.01 195);
--foreground: oklch(0.22 0.02 195);
--card: oklch(0.99 0.005 195);
--card-foreground: oklch(0.22 0.02 195);
--popover: oklch(0.99 0.005 195);
--popover-foreground: oklch(0.22 0.02 195);
--primary: oklch(0.5 0.12 195);
--primary-foreground: oklch(0.99 0 0);
--secondary: oklch(0.93 0.015 195);
--secondary-foreground: oklch(0.22 0.02 195);
--muted: oklch(0.92 0.012 195);
--muted-foreground: oklch(0.55 0.02 195);
--accent: oklch(0.92 0.015 195);
--accent-foreground: oklch(0.22 0.02 195);
--destructive: oklch(0.6 0.18 25);
--border: oklch(0.85 0.015 195);
--input: oklch(0.85 0.015 195);
--ring: oklch(0.5 0.12 195);
--sidebar: oklch(0.95 0.012 195);
--sidebar-foreground: oklch(0.22 0.02 195);
--sidebar-primary: oklch(0.5 0.12 195);
--sidebar-primary-foreground: oklch(0.99 0 0);
--sidebar-accent: oklch(0.92 0.015 195);
--sidebar-accent-foreground: oklch(0.22 0.02 195);
--sidebar-border: oklch(0.88 0.015 195);
--sidebar-ring: oklch(0.6 0.015 195);
}
[data-theme='ocean'].dark {
--background: oklch(0.14 0.01 195);
--foreground: oklch(0.95 0.01 195);
--card: oklch(0.18 0.015 195);
--card-foreground: oklch(0.95 0.01 195);
--popover: oklch(0.18 0.015 195);
--popover-foreground: oklch(0.95 0.01 195);
--primary: oklch(0.6 0.1 195);
--primary-foreground: oklch(0.1 0 0);
--secondary: oklch(0.24 0.02 195);
--secondary-foreground: oklch(0.95 0.01 195);
--muted: oklch(0.22 0.015 195);
--muted-foreground: oklch(0.55 0.02 195);
--accent: oklch(0.26 0.02 195);
--accent-foreground: oklch(0.95 0.01 195);
--destructive: oklch(0.65 0.18 25);
--border: oklch(0.33 0.02 195);
--input: oklch(0.33 0.02 195);
--ring: oklch(0.6 0.02 195);
--sidebar: oklch(0.12 0.01 195);
--sidebar-foreground: oklch(0.95 0.01 195);
--sidebar-primary: oklch(0.6 0.1 195);
--sidebar-primary-foreground: oklch(0.1 0 0);
--sidebar-accent: oklch(0.26 0.02 195);
--sidebar-accent-foreground: oklch(0.95 0.01 195);
--sidebar-border: oklch(0.33 0.02 195);
--sidebar-ring: oklch(0.6 0.02 195);
}
/* Sunset — warm coral/peach tones */
[data-theme='sunset'] {
--background: oklch(0.97 0.012 40);
--foreground: oklch(0.22 0.03 35);
--card: oklch(0.99 0.005 40);
--card-foreground: oklch(0.22 0.03 35);
--popover: oklch(0.99 0.005 40);
--popover-foreground: oklch(0.22 0.03 35);
--primary: oklch(0.55 0.15 30);
--primary-foreground: oklch(0.99 0 0);
--secondary: oklch(0.93 0.02 40);
--secondary-foreground: oklch(0.22 0.03 35);
--muted: oklch(0.92 0.015 40);
--muted-foreground: oklch(0.55 0.02 35);
--accent: oklch(0.92 0.02 40);
--accent-foreground: oklch(0.22 0.03 35);
--destructive: oklch(0.6 0.18 25);
--border: oklch(0.85 0.02 40);
--input: oklch(0.85 0.02 40);
--ring: oklch(0.55 0.15 30);
--sidebar: oklch(0.95 0.015 40);
--sidebar-foreground: oklch(0.22 0.03 35);
--sidebar-primary: oklch(0.55 0.15 30);
--sidebar-primary-foreground: oklch(0.99 0 0);
--sidebar-accent: oklch(0.92 0.02 40);
--sidebar-accent-foreground: oklch(0.22 0.03 35);
--sidebar-border: oklch(0.88 0.02 40);
--sidebar-ring: oklch(0.6 0.02 35);
}
[data-theme='sunset'].dark {
--background: oklch(0.15 0.012 35);
--foreground: oklch(0.95 0.01 35);
--card: oklch(0.19 0.015 35);
--card-foreground: oklch(0.95 0.01 35);
--popover: oklch(0.19 0.015 35);
--popover-foreground: oklch(0.95 0.01 35);
--primary: oklch(0.6 0.12 30);
--primary-foreground: oklch(0.1 0 0);
--secondary: oklch(0.24 0.02 35);
--secondary-foreground: oklch(0.95 0.01 35);
--muted: oklch(0.22 0.015 35);
--muted-foreground: oklch(0.55 0.02 35);
--accent: oklch(0.26 0.025 35);
--accent-foreground: oklch(0.95 0.01 35);
--destructive: oklch(0.65 0.18 25);
--border: oklch(0.33 0.02 35);
--input: oklch(0.33 0.02 35);
--ring: oklch(0.6 0.02 30);
--sidebar: oklch(0.12 0.01 35);
--sidebar-foreground: oklch(0.95 0.01 35);
--sidebar-primary: oklch(0.6 0.12 30);
--sidebar-primary-foreground: oklch(0.1 0 0);
--sidebar-accent: oklch(0.26 0.025 35);
--sidebar-accent-foreground: oklch(0.95 0.01 35);
--sidebar-border: oklch(0.33 0.02 35);
--sidebar-ring: oklch(0.6 0.02 30);
}
/* System font mode — override Inter with native OS fonts.
Must be outside @layer base to win over next/font's generated class. */
html.font-system {