Color Scheme: Themes & Customization

Our app offers multiple color themes that can be selected from your profile settings. Each theme maintains consistency across both light and dark modes while providing its own unique aesthetic.

Available Themes

1. Default

   • Primary: Blue
   • Secondary: Gray
   • Accent: White
   • Classic professional look with high contrast

2. Ocean

   • Primary: Azure
   • Secondary: Steel
   • Accent: Sky
   • Calming blues inspired by the sea

3. Emerald

   • Primary: Teal
   • Secondary: Sage
   • Accent: Mint
   • Fresh, natural green tones

4. Rose

   • Primary: Pink
   • Secondary: Mauve
   • Accent: Blush
   • Warm, welcoming pink hues

5. Violet

   • Primary: Purple
   • Secondary: Lilac
   • Accent: Lavender
   • Rich, elegant purple shades

Customization

You can change your theme anytime by:

1. Opening your Profile
2. Selecting Settings
3. Choosing "Color Theme"
4. Picking your preferred color scheme

Each theme automatically adjusts for light and dark mode preferences while maintaining its distinct color palette.

Light Mode

• Text: #15191F
  Provides clear, legible text.
• Background: #fff6ec
  Offers a warm, comfortable backdrop for viewing.
• Card Background: #FFFFFF
  Helps cards stand out clearly against the background.
• Primary: #739DFF
  Main accent color for interactive elements.
• Secondary: #868687
  Supports the primary color for supplementary UI components.
• Error: #FC7575
  Highlights errors or critical alerts.
• Success: #23868C
  Indicates successful operations.
• White Text: #FFFFFF
  Used for text on darker surfaces (e.g., buttons).
• Button Disabled: #8E8E93
  Represents inactive or unavailable button states.

Dark Mode

• Text: #FFFFFF
  Maintains readability against dark backgrounds.
• Background: #15191F
  Creates a sleek, visually comfortable interface for low-light settings.
• Card Background: #1C1C1E
  Differentiates card elements from the main background.
• Primary: #739DFF
  Consistent accent color across both themes.
• Secondary: #868687
  Complements the primary color for additional UI elements.
• Error: #FC7575
  Draws attention to errors or important alerts.
• Success: #23868C
  Signals completed tasks or achievements.
• White Text: #FFFFFF
  Ensures contrast for text on darker surfaces.
• Button Disabled: #8E8E93
  Reflects buttons that cannot be interacted with.

<div style="clear: both;"></div>

Automatic Theme Detection

When users switch their device's display settings, our app automatically detects and applies the corresponding theme. This ensures a smooth transition between light and dark modes, offering optimal readability and comfort in any environment.

Implementation

javascript

export const Colors = { default: { light: { text: '#15191F', background: '#fff6ec', cardBackground: '#FFFFFF', primary: '#739DFF', secondary: '#868687', error: '#FC7575', success: '#23868C', whitetext: '#FFFFFF', buttonDisabled: '#8E8E93', }, dark: { text: '#FFFFFF', background: '#15191F', cardBackground: '#1C1C1E', primary: '#739DFF', secondary: '#868687', error: '#FC7575', success: '#23868C', whitetext: '#FFFFFF', buttonDisabled: '#8E8E93', }, }, };