[FEATURE]: Add More Built-in Themes

[Vishal-770]

Is your feature request related to a problem?

Overview

Currently, Deskly supports a basic binary theme mode (light, dark, system) managed via src/components/theme-provider.tsx and OKLCH color definitions in src/App.css.

This proposal suggests expanding the styling engine to support at least five built-in themes (e.g. Zinc/Default, Slate, Ocean/Nord, Rose Pine/Sunset, Emerald/Forest, Midnight OLED) by leveraging shadcn/ui's CSS variable architecture.

By defining these themes at the CSS root level using CSS variables, all UI components across both mobile and desktop viewports will automatically adapt to the active theme without any component-level hardcoded styles.

---

Current State Analysis

1. CSS Design Tokens: Defined in src/App.css using OKLCH CSS variables under :root and .dark scopes, as well as .mobile-ui scopes.
2. Theme Provider: Located in src/components/theme-provider.tsx, currently restricted to type Theme = "dark" | "light" | "system".
3. Theme Selector: Settings pages (src/pages-desktop/dashboard/settings.tsx and src/pages-mobile/dashboard/settings.tsx) currently utilize a simple toggle button (src/components/theme-toggle.tsx).

---

Proposed Solution

Proposed Solution

1. Centralized CSS Variable Sets (App.css)

Extend src/App.css to define theme class selectors containing complete color contracts:

• .theme-zinc (Default Dark/Light)
• .theme-midnight (Pure OLED Black & Deep Contrast)
• .theme-nord / .theme-ocean (Deep Slate Blue & Teal accents)
• .theme-emerald (Forest Dark & Bio Light)
• .theme-rose (Warm Sunset & Rose Pine)

Each theme selector must satisfy the full shadcn/ui token contract:

• Core: --background, --foreground, --card, --card-foreground, --popover, --popover-foreground
• Actions: --primary, --primary-foreground, --secondary, --secondary-foreground, --accent, --accent-foreground, --destructive, --destructive-foreground
• Layout: --muted, --muted-foreground, --border, --input, --ring
• Components: --sidebar-* tokens and --chart-1 through --chart-5

2. Enhanced Theme Provider (theme-provider.tsx)

Refactor src/components/theme-provider.tsx to support both color mode (light | dark | system) and preset selection (zinc | midnight | nord | emerald | rose):

• Store selections in localStorage under deskly-theme-preset and deskly-theme-mode.
• Dynamically toggle class names on document.documentElement (e.g. dark theme-nord).

3. Visual Theme Picker Component

Build a dedicated Theme Selector component for the Settings page:

• Visual preview cards displaying color swatches (Primary, Accent, Background, Card).
• Smooth persistence across sessions and app restarts.
• Responsive layout supporting both Desktop and Mobile UI drawers.

---

Technical Benefits

• Zero Hardcoded Colors: Enforces clean use of bg-background, text-foreground, bg-card, border-border, etc.
• Maintainability: Adding a new theme requires only adding a CSS class block in App.css.
• System Parity: Complete compatibility with existing shadcn/ui components and Tailwind CSS v4 tokens.
• Enhanced Personalization: Grants users control over visual aesthetics while ensuring accessibility and proper contrast ratios.

---

Implementation Plan

1. CSS Token Setup: Define OKLCH variable sets for 5 themes in src/App.css.
2. Provider Refactor: Extend ThemeProvider state and context in src/components/theme-provider.tsx to support preset themes.
3. UI Integration:
   • Create src/components/theme-picker.tsx.
   • Integrate the theme picker into Desktop Settings (src/pages-desktop/dashboard/settings.tsx) and Mobile Settings (src/pages-mobile/dashboard/settings.tsx).
4. Verification: Verify visual output across light and dark variations for all 5 themes.

---

Verification Criteria

• All 5 built-in themes correctly change the entire app palette without unstyled elements or broken text contrast.
• Theme choices persist across app reloads via local storage.
• Both Desktop and Mobile layouts render the theme picker correctly and respect the active theme.

Alternative Options Considered

No response

Target UI Mode

Both Mobile & Desktop UI

Additional Context

No response