Theme Raed uses a dynamic color system with CSS custom properties for flexible theming.
Color architecture
Colors are defined in three layers:
- CSS custom properties - Set in master layout based on merchant settings
- SCSS variables - Reference CSS custom properties
- Tailwind utilities - Extended with custom color classes
Primary colors
CSS custom properties
Set dynamically in master.twig based on theme configuration:
<style>
:root {
--font-main: '{{theme.font.name}}';
--color-primary: {{ theme.color.primary }};
--color-primary-dark: {{ theme.color.darker(0.15) }};
--color-primary-light: {{ theme.color.lighter(0.15) }};
--color-primary-reverse: {{ theme.color.reverse_text }};
}
</style>
Global variables
Defined in global.scss:
:root {
--infinte-color: #c9c9c9;
--main-text-color: #231f1e;
--main-text-color-dark: #2b2d34;
/* Primary palette */
--color-primary: #414042;
--color-primary-d: #272628;
--color-primary-l: #676668;
--color-primary-reverse: #ff6767;
/* Text and backgrounds */
--color-text: #7c8082;
--bg-gray: #c6c7ce1a;
--color-grey: #f5f7f9;
--color-light-grey: #eeeeee;
}
SCSS variable references
$main-color: var(--color-primary);
$infinte-color: var(--infinte-color);
$main-text-color: var(--main-text-color);
Tailwind color extensions
Extended colors
Added to Tailwind’s color palette:
Dark gray for text and backgrounds
Darker shade for contrast
Error and destructive actions
References var(--color-primary-dark) for dynamic theming
Usage examples
Text colors
Background colors
Border colors
<p class="text-primary">Primary color text</p>
<p class="text-primary-dark">Darker primary text</p>
<p class="text-dark">Dark gray text</p>
<p class="text-danger">Error message</p>
<div class="bg-primary">Primary background</div>
<div class="bg-primary-dark">Darker background</div>
<div class="bg-dark">Dark background</div>
<div class="bg-danger">Danger background</div>
<div class="border border-primary">Primary border</div>
<div class="border border-dark">Dark border</div>
<div class="border border-danger">Danger border</div>
Semantic colors
Text colors
--main-text-color: #231f1e; /* Primary text */
--main-text-color-dark: #2b2d34; /* Headings */
--color-text: #7c8082; /* Secondary text */
.product-description {
color: var(--main-text-color);
}
.product-subtitle {
color: var(--color-text);
}
Background colors
--bg-gray: #c6c7ce1a; /* Light gray backgrounds */
--color-grey: #f5f7f9; /* Card backgrounds */
--color-light-grey: #eeeeee; /* Subtle backgrounds */
<div class="bg-[var(--bg-gray)]">
<!-- Light background -->
</div>
Dynamic color functions
Theme Raed provides Twig functions for dynamic color manipulation:
Color darker
{{ theme.color.darker(0.15) }}
{# Returns darker version of primary color #}
{{ theme.color.darker(0.25, '#ff6767') }}
{# Returns darker version of specific color #}
Darkness factor from 0.0 to 1.0
Optional hex color. Defaults to theme.color.primary
Color lighter
{{ theme.color.lighter(0.15) }}
{# Returns lighter version of primary color #}
{{ theme.color.lighter(0.3, '#414042') }}
{# Returns lighter version of specific color #}
Lightness factor from 0.0 to 1.0
Optional hex color. Defaults to theme.color.primary
Product colors
Sale prices
.s-product-card-sale-price h4 {
@apply text-red-800 #{!important};
}
<h4 class="text-red-800 font-bold">{{ product.sale_price|money }}</h4>
<span class="text-gray-500 line-through">{{ product.regular_price|money }}</span>
.s-product-card-promotion-title {
@apply bg-red-800 text-white;
}
Wishlist icons
.s-product-card-wishlist-added i {
@apply text-red-500;
}
State colors
Success states
<input class="form-input has-success">
<button class="text-green-600">Saved</button>
<div class="border-green-500">Success message</div>
Error states
<input class="form-input has-error">
<span class="text-red-700">Error message</span>
<div class="border-red-400">Warning</div>
Info states
<div class="text-blue-700">
<a href="#">Learn more</a>
</div>
Interactive colors
Hover states
Consistent hover opacity:
.btn {
@apply hover:opacity-80;
}
.link--primary {
@apply text-primary hover:text-primary-d;
}
Focus states
Form inputs use primary color for focus:
.form-input {
@apply focus:border-primary focus:ring-transparent;
}
Gray scale
Tailwind’s default gray scale is used throughout:
| Class | Hex | Usage |
|---|
gray-100 | #f7fafc | Light backgrounds |
gray-200 | #edf2f7 | Borders, dividers |
gray-300 | #e2e8f0 | Disabled states |
gray-400 | #cbd5e0 | Placeholders |
gray-500 | #a0aec0 | Secondary text |
gray-600 | #718096 | Body text |
gray-700 | #4a5568 | Headings |
gray-800 | #2d3748 | Primary text |
gray-900 | #1a202c | Emphasis |
Opacity utilities
Custom opacity scale:
backgroundOpacity: {
'05': '0.05',
}
<div class="bg-gray-200 bg-opacity-05">
<!-- Very subtle background -->
</div>
Color best practices
Always use CSS custom properties for primary colors to support dynamic theming.
Use semantic colors
<!-- Good: Semantic meaning -->
<button class="bg-primary text-primary-reverse">Submit</button>
<span class="text-danger">Error</span>
<!-- Avoid: Hard-coded colors -->
<button class="bg-[#414042] text-white">Submit</button>
Respect color contrast
The theme automatically handles text color for backgrounds:
{{ theme.color.text }}
{# Returns #000000 or #FFFFFF based on primary color brightness #}
{{ theme.color.reverse_text }}
{# Returns opposite of theme.color.text #}
Use grayscale consistently
<!-- Consistent gray usage -->
<p class="text-gray-500">Secondary text</p>
<div class="border-gray-200">Border</div>
<input class="bg-gray-100" disabled>
Dark mode colors
Dark mode uses the dark: prefix:
<div class="bg-white dark:bg-gray-800">
<p class="text-gray-800 dark:text-gray-100">
Adapts to dark mode
</p>
</div>
Enable dark mode by adding the dark class to the <body> or <html> element.
Accessing colors in JavaScript
Read CSS custom properties:
const primaryColor = getComputedStyle(document.documentElement)
.getPropertyValue('--color-primary');
console.log(primaryColor); // '#414042'
document.documentElement.style
.setProperty('--color-primary', '#5cd5c4');