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', }, }, };