Skip to main content
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. 
--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. 
--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. 
--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. 
--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. 
--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. 
--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. 
--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. 
--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): 
: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: 
/* 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: 
# 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

@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: 
// 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: 
/* 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:

​
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