> ## Documentation Index
> Fetch the complete documentation index at: https://docs.nexus.hurterdesignstudio.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Color Schemes

> Choose from 8 pre-built color schemes or create custom ones to match your brand

Nexus Theme comes with 8 beautifully designed color schemes that work perfectly for different types of stores and brands. You can also create custom color schemes to match your exact brand colors.

## Pre-built Color Schemes

Nexus Theme includes 8 professionally designed color schemes:

### 💧 Light Blue

Perfect for modern, clean brands with a professional feel.

```css theme={null}
--color-primary: #007AFF;
--color-secondary: #5856D6;
--color-accent: #FF3B30;
--color-background: #FFFFFF;
--color-surface: #F8F9FA;
--color-text-primary: #1A1A1A;
--color-text-secondary: #6E6E73;
```

### 🌊 Dark Blue

Ideal for premium brands and luxury products.

```css theme={null}
--color-primary: #0A84FF;
--color-secondary: #5E5CE6;
--color-accent: #FF453A;
--color-background: #1C1C1E;
--color-surface: #2C2C2E;
--color-text-primary: #FFFFFF;
--color-text-secondary: #EBEBF5;
```

### 🌹 Light Red

Great for fashion, beauty, and lifestyle brands.

```css theme={null}
--color-primary: #FF3B30;
--color-secondary: #FF6B6B;
--color-accent: #007AFF;
--color-background: #FFFFFF;
--color-surface: #FFF5F5;
--color-text-primary: #1A1A1A;
--color-text-secondary: #6E6E73;
```

### 🔥 Dark Red

Perfect for bold, energetic brands.

```css theme={null}
--color-primary: #FF453A;
--color-secondary: #FF6B6B;
--color-accent: #0A84FF;
--color-background: #1C1C1E;
--color-surface: #2C2C2E;
--color-text-primary: #FFFFFF;
--color-text-secondary: #EBEBF5;
```

### 🍀 Light Green

Ideal for eco-friendly, organic, and natural brands.

```css theme={null}
--color-primary: #34C759;
--color-secondary: #30D158;
--color-accent: #FF3B30;
--color-background: #FFFFFF;
--color-surface: #F0FFF4;
--color-text-primary: #1A1A1A;
--color-text-secondary: #6E6E73;
```

### 🌿 Dark Green

Perfect for outdoor, adventure, and sustainable brands.

```css theme={null}
--color-primary: #30D158;
--color-secondary: #32D74B;
--color-accent: #FF453A;
--color-background: #1C1C1E;
--color-surface: #2C2C2E;
--color-text-primary: #FFFFFF;
--color-text-secondary: #EBEBF5;
```

### 🍊 Light Orange

Great for creative, energetic, and youthful brands.

```css theme={null}
--color-primary: #FF9500;
--color-secondary: #FF9F0A;
--color-accent: #007AFF;
--color-background: #FFFFFF;
--color-surface: #FFF8F0;
--color-text-primary: #1A1A1A;
--color-text-secondary: #6E6E73;
```

### 🎃 Dark Orange

Ideal for bold, creative, and innovative brands.

```css theme={null}
--color-primary: #FF9F0A;
--color-secondary: #FFB340;
--color-accent: #0A84FF;
--color-background: #1C1C1E;
--color-surface: #2C2C2E;
--color-text-primary: #FFFFFF;
--color-text-secondary: #EBEBF5;
```

## Custom Color Schemes

Create your own color scheme to perfectly match your brand identity.

### Setting Up Custom Colors

1. Go to **Online Store → Themes → Customize**
2. Navigate to **Theme Settings → Color Schemes**
3. Select **Custom** from the color scheme dropdown
4. Configure your brand colors:

#### Primary Color

Your main brand color used for:

* Primary buttons
* Links
* Active states
* Brand elements

#### Secondary Color

Your secondary brand color used for:

* Secondary buttons
* Accent elements
* Hover states
* Supporting elements

#### Accent Color

Your accent color used for:

* Call-to-action buttons
* Important highlights
* Sale badges
* Attention-grabbing elements

#### Background Colors

* **Background**: Main page background color
* **Surface**: Card and section background colors

#### Text Colors

* **Primary Text**: Main text color for headings and body text
* **Secondary Text**: Muted text color for captions and descriptions

### Color Scheme Implementation

The color schemes are implemented using CSS custom properties (variables):

```css theme={null}
:root {
  /* Primary Colors */
  --color-primary: #007AFF;
  --color-primary-light: #4DA3FF;
  --color-primary-dark: #0056CC;
  
  /* Secondary Colors */
  --color-secondary: #5856D6;
  --color-secondary-light: #7B7AE6;
  --color-secondary-dark: #3D3BB3;
  
  /* Accent Colors */
  --color-accent: #FF3B30;
  --color-accent-light: #FF6B6B;
  --color-accent-dark: #CC2E26;
  
  /* Background Colors */
  --color-background: #FFFFFF;
  --color-surface: #F8F9FA;
  --color-surface-hover: #F1F3F4;
  
  /* Text Colors */
  --color-text-primary: #1A1A1A;
  --color-text-secondary: #6E6E73;
  --color-text-muted: #8E8E93;
  
  /* Border Colors */
  --color-border: #E5E5EA;
  --color-border-light: #F2F2F7;
  
  /* Status Colors */
  --color-success: #34C759;
  --color-warning: #FF9500;
  --color-error: #FF3B30;
  --color-info: #007AFF;
}
```

### Using Color Variables

Throughout the theme, colors are applied using these CSS variables:

```css theme={null}
/* Buttons */
.btn--primary {
  background-color: var(--color-primary);
  color: white;
}

.btn--primary:hover {
  background-color: var(--color-primary-dark);
}

.btn--secondary {
  background-color: var(--color-secondary);
  color: white;
}

/* Text */
.heading {
  color: var(--color-text-primary);
}

.body-text {
  color: var(--color-text-secondary);
}

/* Backgrounds */
.card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
}

.card:hover {
  background-color: var(--color-surface-hover);
}

/* Links */
a {
  color: var(--color-primary);
}

a:hover {
  color: var(--color-primary-dark);
}
```

## Color Accessibility

All color schemes in Nexus Theme are designed with accessibility in mind:

### Contrast Ratios

* **Primary Text**: Minimum 4.5:1 contrast ratio
* **Secondary Text**: Minimum 3:1 contrast ratio
* **Interactive Elements**: Minimum 3:1 contrast ratio

### Color Blindness Support

* Colors are distinguishable for users with color vision deficiencies
* Information is not conveyed by color alone
* Sufficient contrast between adjacent colors

### Testing Your Colors

Use these tools to test your color scheme:

```bash theme={null}
# Check contrast ratios
npx @axe-core/cli https://your-store.myshopify.com

# Test color blindness simulation
# Use browser dev tools or online tools like:
# - https://www.toptal.com/designers/colorfilter
# - https://www.color-blindness.com/coblis-color-blindness-simulator/
```

## Color Psychology

Choose your color scheme based on your brand personality:

### Blue (Trust & Professionalism)

* **Best for**: Technology, finance, healthcare, professional services
* **Emotions**: Trust, reliability, stability, professionalism
* **Examples**: Banks, tech companies, consulting firms

### Red (Energy & Passion)

* **Best for**: Food, fashion, entertainment, sports
* **Emotions**: Energy, passion, excitement, urgency
* **Examples**: Restaurants, fashion brands, entertainment

### Green (Growth & Nature)

* **Best for**: Eco-friendly, organic, outdoor, wellness
* **Emotions**: Growth, nature, health, sustainability
* **Examples**: Organic food, outdoor gear, wellness products

### Orange (Creativity & Fun)

* **Best for**: Creative, youthful, energetic brands
* **Emotions**: Creativity, enthusiasm, adventure, fun
* **Examples**: Creative agencies, youth brands, adventure gear

## Dark Mode Support

Nexus Theme includes built-in dark mode support with appropriate color schemes:

### Dark Mode Colors

```css theme={null}
@media (prefers-color-scheme: dark) {
  :root {
    --color-background: #1C1C1E;
    --color-surface: #2C2C2E;
    --color-surface-hover: #3A3A3C;
    --color-text-primary: #FFFFFF;
    --color-text-secondary: #EBEBF5;
    --color-text-muted: #8E8E93;
    --color-border: #38383A;
    --color-border-light: #48484A;
  }
}
```

### Manual Dark Mode Toggle

Users can also manually toggle dark mode:

```javascript theme={null}
// Toggle dark mode
function toggleDarkMode() {
  document.documentElement.classList.toggle('dark-mode');
  localStorage.setItem('darkMode', document.documentElement.classList.contains('dark-mode'));
}

// Check for saved preference
if (localStorage.getItem('darkMode') === 'true') {
  document.documentElement.classList.add('dark-mode');
}
```

## Color Scheme Best Practices

### Brand Consistency

1. **Use Your Brand Colors**: Ensure your color scheme matches your brand identity
2. **Consistent Application**: Apply colors consistently across all elements
3. **Limited Palette**: Use 3-5 main colors to avoid overwhelming users

### User Experience

1. **Readability**: Ensure sufficient contrast for text readability
2. **Hierarchy**: Use color to create visual hierarchy
3. **Accessibility**: Test with accessibility tools and users

### Performance

1. **CSS Variables**: Use CSS custom properties for easy updates
2. **Minimal Overrides**: Avoid excessive color overrides
3. **Optimized Assets**: Use optimized color formats (WebP, SVG)

## Custom Color Implementation

### Advanced Customization

For advanced color customization, you can modify the theme's CSS:

```css theme={null}
/* Custom color overrides */
:root {
  --color-primary: #YOUR_PRIMARY_COLOR;
  --color-secondary: #YOUR_SECONDARY_COLOR;
  --color-accent: #YOUR_ACCENT_COLOR;
}

/* Custom component colors */
.custom-component {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: white;
}

/* Custom hover effects */
.custom-button:hover {
  background-color: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
}
```

### Color Palette Generator

Use these tools to generate cohesive color palettes:

* **Adobe Color**: [https://color.adobe.com/](https://color.adobe.com/)
* **Coolors**: [https://coolors.co/](https://coolors.co/)
* **Paletton**: [https://paletton.com/](https://paletton.com/)
* **Color Hunt**: [https://colorhunt.co/](https://colorhunt.co/)

## Troubleshooting

### Common Issues

1. **Colors Not Updating**: Clear browser cache and refresh
2. **Poor Contrast**: Use contrast checking tools to verify ratios
3. **Inconsistent Colors**: Ensure CSS variables are properly applied

### Performance Issues

1. **Slow Loading**: Optimize CSS and reduce color overrides
2. **Layout Shift**: Ensure color changes don't affect layout
3. **Memory Usage**: Use efficient color formats and minimal overrides

## Related Customization

* [Typography](/customization/typography) - Customize fonts and text styling
* [Layouts](/customization/layouts) - Configure page layouts and spacing
* [Animations](/customization/animations) - Add motion and transitions

<Button href="/customization/typography" size="lg">
  Next: Typography
</Button>