To AI Agent: Implement Unified Dual-Theme System (Light & Dark) for Yotrip App

1. Context & Design System Overview

We are building a robust, high-contrast, yet eye-friendly dual-theme system (Light and Dark modes) for our mobile application (yotrip.labz.io.vn).

Dark Theme Constraint: Must use the pre-configured smoky grape base (Vintage Grape & Dusty Grape) with vivid lime/aquatic accents. No pitch-black.
Light Theme Constraint: Must use the soft parchment base (Parchment) to eliminate screen glare, using deep academic blue (Yale Blue) for high-contrast readability. No pure blazing white backgrounds.

2. Comprehensive Color Token Mapping

A. LIGHT THEME PALETTE ("Classic Heritage & Soft Sand")

Parchment (#f6f0ed): Map to Global Page Backgrounds. A warm, ancient-manuscript off-white that eliminates mobile screen glare.
Yale Blue (#28536b): Map to Primary Text, Main Titles, and Primary Action Buttons. Provides dependable trust and sharp contrast.
Steel Blue (#7ea8be): Map to Active Navigation Tabs, Active Icons, and Secondary Actions.
Khaki Beige (#bbb193): Map to Borders, Dividers, and Deactivated/Muted States.
Rosy Taupe (#c2948a): Map to Special Highlight Badges, Notification Banners, or Warm Accent Elements.

B. DARK THEME PALETTE ("Vintage Velvet & Aquatic Zest")

Vintage Grape (#513b56): Map to Global Page Backgrounds.
Dusty Grape (#525174): Map to Component Surfaces (Cards, Chat Bubbles, Accordion Rows).
Lime Cream (#bce784): Map to Brand Text Highlights, Active Icons.
Bondi Blue (#348aa7): Map to Primary Action Buttons, Links.
Emerald (#5dd39e): Map to Success Utilities & "Tối ưu" badges.

3. Technical Global Configuration

Option A: Clean CSS Variables (`global.css`)

Replace or update the root variable tokens inside your main stylesheet:

/* --- THEME SÁNG (Mềm mại, Tương phản cao, Không chói) --- */
:root {
  --background: #f6f0ed;       /* Parchment */
  --surface: #ffffff;          /* Pure White for crisp card layers */
  --surface-muted: #bbb193;    /* Khaki Beige */
  
  --border: #bbb193;           /* Khaki Beige */
  
  --text-primary: #28536b;     /* Yale Blue (High contrast text) */
  --text-secondary: #7ea8be;   /* Steel Blue */
  --text-accent: #c2948a;      /* Rosy Taupe */
  
  --primary: #28536b;          /* Yale Blue for main buttons */
  --primary-hover: #1f4154;
  --secondary-active: #7ea8be; /* Steel Blue */
}

/* --- THEME TỐI (Dịu mắt, Sang trọng, Không đen kịt) --- */
:root.dark {
  --background: #513b56;       /* Vintage Grape */
  --surface: #525174;          /* Dusty Grape */
  --surface-muted: #626186;
  
  --border: #626186;
  
  --text-primary: #f8fafc;     /* Soft White */
  --text-secondary: #94a3b8;   /* Muted Slate */
  --text-brand: #bce784;       /* Lime Cream */
  
  --primary: #348aa7;          /* Bondi Blue */
  --primary-hover: #296f86;
  --success-accent: #5dd39e;   /* Emerald */
}

### Option B: Tailwind Extension Configuration (tailwind.config.js)
Expose these custom design tokens cleanly into the utility library framework:

theme: {
  extend: {
    colors: {
      yotripLight: {
        bg: '#f6f0ed',       // Parchment
        text: '#28536b',     // Yale Blue
        steel: '#7ea8be',    // Steel Blue
        khaki: '#bbb193',    // Khaki Beige
        rosy: '#c2948a',     // Rosy Taupe
      },
      yotripDark: {
        bg: '#513b56',       // Vintage Grape
        surface: '#525174',  // Dusty Grape
        lime: '#bce784',     // Lime Cream
        bondi: '#348aa7',    // Bondi Blue
        emerald: '#5dd39e',  // Emerald
      }
    }
  }
}

## 4. UI Component Application Reference
Apply these unified color classes to ensure the interface flips seamlessly:

Chat Wrapper & Itinerary Timelines: - Light Mode: Background is yotripLight-bg, General Text is yotripLight-text.

Dark Mode: Background is yotripDark-bg, General Text is #f8fafc.

Navigation Tabs Menu:

Light Mode: Inactive text is yotripLight-steel. Active tab gets a yotripLight-text highlight indicator.

Dark Mode: Inactive text is yotripDark-surface. Active tab gets a yotripDark-lime highlight indicator.

Main Action Call-To-Actions (e.g., "Thêm địa điểm"):

Light Mode: Background is yotripLight-text (Yale Blue) with clean white text.

Dark Mode: Background is yotripDark-bondi (Bondi Blue) with clean white text.

## 5. Acceptance Criteria for Verification
[ ] Ensure that toggling the .dark class on the <html> root triggers a global transition without style flashes (transition-colors duration-200).

[ ] Text legibility inside Light Mode satisfies standard WCAG accessibility contrast limits on mobile displays out in the sun.

[ ] The background of the expanded folder nodes/chat bubbles maps cleanly to their respective surface tokens across both system states.

4.9 KiB Raw Blame History