diff --git a/memento-note/app/(main)/settings/appearance/appearance-settings-client.tsx b/memento-note/app/(main)/settings/appearance/appearance-settings-client.tsx index 1b3cba1..8163a89 100644 --- a/memento-note/app/(main)/settings/appearance/appearance-settings-client.tsx +++ b/memento-note/app/(main)/settings/appearance/appearance-settings-client.tsx @@ -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} diff --git a/memento-note/app/globals.css b/memento-note/app/globals.css index 43d0d96..b888d86 100644 --- a/memento-note/app/globals.css +++ b/memento-note/app/globals.css @@ -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 {