Themes and Colors

Overview

The Themes and Colors system in NEXUS provides comprehensive visual customization through a sophisticated theming architecture. Each theme is carefully designed to maintain WCAG 2.1 AA accessibility standards while offering distinct visual personalities inspired by popular design systems and brands.

Key Features

• 9 Curated Themes - Professionally designed color schemes
• Instant Application - Themes apply immediately without page refresh
• Accessibility Compliant - WCAG 2.1 AA contrast standards
• Cross-Device Sync - Themes sync across browser instances
• Visual Previews - See colors before applying
• Professional Inspiration - Based on popular design systems

Available Themes

Appearance settings panel showing all 9 accent colors and typography theme options

Blue Theme (Default)

Inspiration: Professional and trustworthy

• Primary Color: #3b82f6 (Professional Blue)
• Personality: Trustworthy, professional, neutral
• Best For: Business use, productivity, general purpose
• Design System: Classic corporate blue

Purple Theme

Inspiration: Linear and Raycast - Creative and modern

• Primary Color: #8b5cf6 (Vibrant Purple)
• Personality: Creative, modern, innovative
• Best For: Creative work, design, development
• Design System: Modern productivity tools

Green Theme

Inspiration: Vercel - Success and growth focused

• Primary Color: #10b981 (Emerald Green)
• Personality: Success, growth, positive
• Best For: Goal tracking, productivity, health apps
• Design System: Success-oriented interfaces

Orange Theme

Inspiration: Framer - Energy and creativity focused

• Primary Color: #f59e0b (Amber Orange)
• Personality: Energetic, warm, creative
• Best For: Creative projects, brainstorming, energy
• Design System: Creative and design tools

Pink Theme

Inspiration: Stripe - Playful and approachable

• Primary Color: #ec4899 (Hot Pink)
• Personality: Playful, engaging, approachable
• Best For: Personal projects, social apps, fun activities
• Design System: Modern fintech and social platforms

Red Theme

Inspiration: YouTube and Netflix - Bold and attention-grabbing

• Primary Color: #ef4444 (Bright Red)
• Personality: Bold, impactful, urgent
• Best For: Important tasks, deadlines, high-priority work
• Design System: Media and entertainment platforms

Cyan Theme

Inspiration: Tailwind CSS - Fresh and modern

• Primary Color: #06b6d4 (Bright Cyan)
• Personality: Fresh, modern, technical
• Best For: Development, technical work, modern interfaces
• Design System: Developer tools and frameworks

Yellow Theme

Inspiration: Notion - Bright and optimistic

• Primary Color: #eab308 (Golden Yellow)
• Personality: Optimistic, energetic, bright
• Best For: Note-taking, learning, positive activities
• Design System: Knowledge management tools

Indigo Theme

Inspiration: Deep and sophisticated

• Primary Color: #6366f1 (Rich Indigo)
• Personality: Sophisticated, deep, professional
• Best For: Focus work, premium applications, elegance
• Design System: Premium and luxury interfaces

Changing Themes

Using Settings Panel

1. Open Settings

   Press S or click the gear icon to open the settings panel

2. Navigate to Appearance

   Click on the "Appearance" tab in the settings panel

3. Select Color Theme

   Click on any color theme preview to apply it instantly

4. See Immediate Results

   The theme applies instantly without requiring a page refresh

Visual Theme Selection

The theme selection interface provides:

• Color Previews - Small circles showing the primary color
• Theme Names - Clear labels for each theme
• Active Indication - Visual highlight of current theme
• Instant Application - No confirmation needed

Technical Implementation

CSS Custom Properties

Themes are implemented using CSS custom properties (variables):

:root[data-theme="purple"] {
    --accent: #8b5cf6;           /* Primary theme color */
    --accent-hover: #7c3aed;     /* Hover state color */
    --accent-rgb: 139, 92, 246;  /* RGB values for transparency */
}

Theme Architecture

• Primary Colors - Main accent color for interactive elements
• Hover States - Darker variants for hover interactions
• RGB Values - Separate RGB values for alpha transparency usage
• Consistent Base - All themes share the same dark background system

Instant Theme Loading

NEXUS uses advanced theme initialization to prevent visual flash:

1. Immediate Application

   Theme loads before CSS parsing to prevent flash

2. Storage Sync

   Themes sync across browser instances using chrome.storage

3. Fallback System

   localStorage backup ensures themes work even without extension storage

4. Performance Optimization

   Critical path optimization for zero visual delay

Color Psychology

Choosing the Right Theme

Different colors can affect mood and productivity:

For Productivity and Focus

• Blue - Enhances focus and mental clarity
• Green - Reduces eye strain and promotes balance
• Indigo - Encourages deep thinking and concentration

For Creativity and Energy

• Purple - Stimulates creativity and imagination
• Orange - Boosts energy and enthusiasm
• Yellow - Promotes optimism and mental stimulation

For Specific Moods

• Pink - Creates a friendly, approachable atmosphere
• Red - Increases urgency and attention
• Cyan - Provides a fresh, modern feeling

Accessibility Features

WCAG 2.1 AA Compliance

All themes meet accessibility standards:

• Contrast Ratios - Minimum 4.5:1 for normal text
• Large Text - Minimum 3:1 for large text elements
• Interactive Elements - Clear focus indicators
• Color Independence - Information not conveyed by color alone

Visual Accessibility

• High Contrast - Works with browser high contrast modes
• Color Blindness - Themes tested for color vision deficiencies
• Reduced Motion - Respects prefers-reduced-motion settings
• Screen Readers - Proper ARIA labels for theme selection

Theme Persistence

Cross-Device Synchronization

Your theme preferences are automatically synchronized:

• Chrome Storage Sync - Syncs across signed-in Chrome instances
• Local Backup - localStorage fallback for reliability
• Instant Loading - Themes load immediately on new tabs
• Consistent Experience - Same theme across all browser windows

Storage Architecture

• Primary Storage - chrome.storage.sync for cross-device sync
• Backup Storage - localStorage for local persistence
• Immediate Cache - In-memory storage for instant access
• Fallback System - Graceful degradation when storage unavailable

Integration with Other Features

Typography Themes

Color themes work seamlessly with typography themes:

• Coordinated Design - Colors and fonts designed to work together
• Independent Selection - Choose colors and fonts separately
• Professional Combinations - All combinations tested for readability
• Consistent Branding - Maintains visual coherence

Feature Integration

Themes affect all NEXUS features:

• Quick Shortcuts - Command palette uses theme colors
• Focus Timer - Progress indicators match theme
• Todo List - Task interface adopts theme colors
• Settings Panel - All UI elements use theme colors

Customization Tips

Workflow-Based Selection

• Morning Energy - Use bright themes like Orange or Yellow
• Deep Focus - Choose calming themes like Blue or Green
• Creative Work - Try Purple or Pink for inspiration
• Evening Wind-down - Use softer themes like Indigo or Cyan

Environment Considerations

• Bright Environments - Higher contrast themes work better
• Dark Environments - Softer themes reduce eye strain
• Multiple Monitors - Consistent themes across all screens
• Shared Spaces - Professional themes for office environments

Troubleshooting

Theme Not Applying

• Refresh the page to reload theme settings
• Check browser permissions for the NEXUS extension
• Ensure you're not in incognito mode (themes may not sync)
• Try selecting the theme again in settings

Theme Not Syncing

• Ensure you're signed into Chrome for sync functionality
• Check Chrome sync settings include "Extensions"
• Wait a few moments for sync to propagate
• Try manually selecting the theme on each device

Next Steps

Now that you understand Themes and Colors, explore these related customization options:

• Typography - Customize fonts to complement your color theme
• Advanced Settings - Fine-tune visual effects and animations
• Quick Start Guide - Apply your new theme to daily workflows
• Quick Shortcuts - See how themes affect the command palette