# Main Theme Color

The main theme color is the primary color that defines your brand's visual identity throughout the Plain Jane theme. This color appears in key elements like buttons, links, accents, and interactive components.

## 🌈 Understanding Theme Colors

### What the Main Color Controls

Your main theme color influences:

* **Primary buttons** (Add to Cart, Buy Now, Submit)
* **Link colors** throughout the site
* **Active menu states** and navigation highlights
* **Form focus states** and input highlights
* **Loading indicators** and progress bars
* **Icon accents** and decorative elements
* **Hover effects** on interactive elements

### Color Psychology in E-commerce

Choose colors that align with your brand personality:

#### Trust & Reliability

* **Blue tones** (#2563EB, #1E40AF): Professional, trustworthy
* **Green tones** (#059669, #047857): Growth, stability, money

#### Energy & Urgency

* **Red tones** (#DC2626, #B91C1C): Excitement, urgency, power
* **Orange tones** (#EA580C, #C2410C): Enthusiasm, warmth, call-to-action

#### Luxury & Sophistication

* **Purple tones** (#7C3AED, #5B21B6): Premium, creative, luxury
* **Black/Charcoal** (#1F2937, #111827): Elegant, sophisticated, modern

#### Natural & Organic

* **Earth tones** (#A3A3A3, #78716C): Natural, sustainable, authentic
* **Soft greens** (#10B981, #059669): Eco-friendly, health, nature

## 🛠️ Setting Your Main Color

### Step 1: Access Theme Settings

1. **Navigate to Theme Customizer**
   * Go to **Online Store → Themes**
   * Click **Customize** on your Plain Jane theme
2. **Find Theme Settings**
   * Scroll down to **Theme settings** section
   * Look for **Colors** or **Main theme color**

### Step 2: Choose Your Color

#### Using the Color Picker

* **Click the color box** to open the picker
* **Drag the circle** to select hue
* **Adjust brightness** with the vertical slider
* **Fine-tune with hex codes** for precise colors

#### Hex Color Input

Enter colors directly using hex codes:

```
#FF6B6B  // Coral Red
#4ECDC4  // Turquoise
#45B7D1  // Sky Blue
#96CEB4  // Mint Green
#FFEAA7  // Warm Yellow
#DDA0DD  // Plum Purple
```

### Step 3: Preview Changes

* **Use preview mode** to see changes in real-time
* **Test on different pages** (homepage, product, collection)
* **Check mobile appearance** for consistency
* **Verify readability** of text over colored elements

## 🎯 Best Practices

### Accessibility Considerations

Ensure your color choices meet accessibility standards:

#### Contrast Ratios

* **Normal text**: Minimum 4.5:1 contrast ratio
* **Large text** (18pt+): Minimum 3:1 contrast ratio
* **Interactive elements**: Clear visual distinction

### Brand Consistency

* **Match existing brand colors** from your logo and marketing materials
* **Consider seasonal variations** for special campaigns
* **Maintain consistency** across all touchpoints
* **Document your color choices** for team reference

### Conversion Optimization

* **High-contrast CTAs**: Make buttons stand out clearly
* **Trust signals**: Blues and greens often perform well
* **Urgency elements**: Reds and oranges for time-sensitive offers
* **A/B testing**: Try different colors to optimize conversions

## 📱 Mobile Considerations

### Touch Target Colors

* **Ensure sufficient contrast** for touch elements
* **Test on actual devices** under different lighting
* **Consider larger touch areas** with colored backgrounds
* **Verify visibility** in bright sunlight

### Performance Impact

* **CSS optimization**: Modern themes use efficient color rendering
* **Avoid complex gradients** that might impact performance
* **Test loading times** especially on slower devices

## 🐛 Troubleshooting

### Common Issues

#### Color Not Appearing

* **Clear browser cache** and reload the page
* **Check theme settings** are saved properly
* **Verify color format** (hex codes should include #)

#### Poor Contrast

* **Use darker colors** for better text readability
* **Test with accessibility tools** to verify contrast
* **Consider outlined buttons** instead of filled ones

#### Inconsistent Display

* **Check across different pages** for consistency
* **Test on various devices** and screen types
* **Verify CSS isn't being overridden** by custom code

### Performance Issues

* **Simplify color schemes** if experiencing slowdowns
* **Avoid animated color transitions** on low-end devices
* **Use system colors** when possible for better performance


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.openspaces.design/readme-1/theme-settings/main-theme-color.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.