Skip to content

Color Customization

Jump to bottom
Alee Javed edited this page Mar 1, 2026 · 1 revision

Color Customization

The theme uses CSS variables for complete color scheme customization, allowing you to change every aspect of your site's appearance through the WordPress Customizer.

🎨 Color Variables

Core Color System

The theme uses CSS variables for consistent theming:

:root {
  --accent: #ff6b35;      /* Links, buttons, highlights */
  --bg: #ffffff;          /* Main background */
  --text: #1a1a1a;        /* Main text color */
  --muted: #666666;       /* Secondary text */
  --border: #e0e0e0;      /* Borders and dividers */
}

Variable Usage

  • --accent - Links, buttons, hero name, timeline elements
  • --bg - Page backgrounds, content areas
  • --text - Headings, paragraphs, main content
  • --muted - Subtitles, metadata, dates, email
  • --border - Card borders, input fields, dividers

🎛 Customization Interface

Access Colors

Go to Appearance → Customize → Colors

Color Controls

Setting Description Default Affects
Accent Color Links, buttons, highlights #ff6b35 (Orange) Navigation, hero name, buttons, timeline
Background Color Main site background #ffffff (White) Page backgrounds, content areas
Text Color Main text content #1a1a1a (Dark) Headings, paragraphs, hero text
Muted Text Secondary text #666666 (Gray) Subtitles, metadata, dates, email
Border Color Borders and dividers #e0e0e0 (Light gray) Card borders, input fields

🎨 Popular Color Schemes

Dark Theme

:root {
  --accent: #ff6b35;      /* Orange accent */
  --bg: #1a1a1a;          /* Dark background */
  --text: #ffffff;          /* White text */
  --muted: #cccccc;       /* Light gray text */
  --border: #444444;      /* Dark borders */
}

Blue Theme

:root {
  --accent: #0073aa;      /* Blue accent */
  --bg: #f8f9fa;          /* Light blue background */
  --text: #003366;          /* Dark blue text */
  --muted: #666699;       /* Medium blue text */
  --border: #336699;      /* Blue borders */
}

Green Theme

:root {
  --accent: #28a745;      /* Green accent */
  --bg: #f8fff8;          /* Light green background */
  --text: #2d5016;          /* Dark green text */
  --muted: #5a7a3a;       /* Medium green text */
  --border: #8fb06a;      /* Green borders */
}

Purple Theme

:root {
  --accent: #6f42c1;      /* Purple accent */
  --bg: #faf5ff;          /* Light purple background */
  --text: #4a2352;          /* Dark purple text */
  --muted: #8b5cf6;       /* Medium purple text */
  --border: #d2b3de;      /* Purple borders */
}

🔧 Advanced Customization

Custom CSS Variables

Add custom CSS in Appearance → Customize → Additional CSS:

:root {
  --accent: #ff6b35;
  --bg: #ffffff;
  --text: #1a1a1a;
  --muted: #666666;
  --border: #e0e0e0;
  
  /* Custom variables */
  --card-bg: #f8f9fa;
  --button-hover: #e9ecef;
  --shadow: rgba(0,0,0,0.1);
}

Color Mixing

Use color-mix() for dynamic colors:

.button:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.card {
  border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}

Gradient Backgrounds

.hero {
  background: linear-gradient(135deg, var(--bg) 0%, color-mix(in srgb, var(--accent) 5%, var(--bg)) 100%);
}

.timeline-card {
  background: linear-gradient(to bottom, var(--card-bg), var(--bg));
}

🎯 Element-Specific Customization

Navigation Colors

.main-nav a {
  color: var(--text);
  border-bottom: 2px solid transparent;
}

.main-nav a:hover {
  border-bottom-color: var(--accent);
}

.main-nav .current-menu-item > a {
  border-bottom-color: var(--accent);
}

Hero Section Colors

.hero-brand {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

.hero-kicker {
  color: var(--muted);
}

.hero-subtitle {
  color: var(--muted);
}

Button Colors

.hero-btn {
  border: 1px solid var(--border);
  color: var(--text);
}

.hero-btn:hover {
  border-color: var(--accent);
}

Card Colors

.timeline-card {
  background: var(--bg);
  border: 1px solid var(--border);
}

.timeline-blog:hover {
  border-color: var(--accent);
}

📱 Responsive Color Adaptation

Dark Mode Support

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1a1a;
    --text: #ffffff;
    --muted: #cccccc;
    --border: #444444;
  }
}

High Contrast

@media (prefers-contrast: high) {
  :root {
    --accent: #ff6600;      /* Higher contrast orange */
    --text: #000000;          /* Pure black */
    --muted: #333333;       /* Darker gray */
    --border: #000000;      /* Pure black */
  }
}

🔍 Troubleshooting

Colors Not Applying

  1. Clear cache - Browser and WordPress cache
  2. Check variables - Ensure CSS variables are loading
  3. Verify Customizer - Check if settings are saved
  4. Test different browsers - Try Chrome, Firefox, Safari

Contrast Issues

  1. Check ratios - Ensure proper contrast for accessibility
  2. Test tools - Use browser developer tools
  3. Verify colors - Check color combinations
  4. Test responsive - Check different screen sizes

CSS Conflicts

  1. Check plugins - Look for CSS conflicts
  2. Verify theme - Ensure theme CSS is loading
  3. Test custom CSS - Check Additional CSS section
  4. Debug variables - Use browser dev tools

📚 Related Documentation

Clone this wiki locally