Color Schemes - Nexus Theme Documentation

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

Go to Online Store → Themes → Customize
Navigate to Theme Settings → Color Schemes
Select Custom from the color scheme dropdown
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

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

User Experience

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

Performance

CSS Variables: Use CSS custom properties for easy updates
Minimal Overrides: Avoid excessive color overrides
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:

Adobe Color: https://color.adobe.com/
Coolors: https://coolors.co/
Paletton: https://paletton.com/
Color Hunt: https://colorhunt.co/

Troubleshooting

Common Issues

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

Performance Issues

Slow Loading: Optimize CSS and reduce color overrides
Layout Shift: Ensure color changes don’t affect layout
Memory Usage: Use efficient color formats and minimal overrides

Typography - Customize fonts and text styling
Layouts - Configure page layouts and spacing
Animations - Add motion and transitions

​Pre-built Color Schemes

​💧 Light Blue

​🌊 Dark Blue

​🌹 Light Red

​🔥 Dark Red

​🍀 Light Green

​🌿 Dark Green

​🍊 Light Orange

​🎃 Dark Orange

​Custom Color Schemes

​Setting Up Custom Colors

​Primary Color

​Secondary Color

​Accent Color

​Background Colors

​Text Colors

​Color Scheme Implementation

​Using Color Variables

​Color Accessibility

​Contrast Ratios

​Color Blindness Support

​Testing Your Colors

​Color Psychology

​Blue (Trust & Professionalism)

​Red (Energy & Passion)

​Green (Growth & Nature)

​Orange (Creativity & Fun)

​Dark Mode Support

​Dark Mode Colors

​Manual Dark Mode Toggle

​Color Scheme Best Practices

​Brand Consistency

​User Experience

​Performance

​Custom Color Implementation

​Advanced Customization

​Color Palette Generator

​Troubleshooting

​Common Issues

​Performance Issues

​Related Customization