Colors
The Elemento theme includes a flexible color system built around color schemes. Each color scheme contains grouped color roles used throughout various components of your store. You can create multiple color schemes and apply them to different sections or blocks.
What Is a Color Scheme?
A color scheme is a named set of colors you define once and reuse throughout your theme. Instead of setting colors manually for each section, you assign a color scheme, which controls the section’s background, text, buttons, and other elements.
How to Edit a Color Scheme
Go to Online Store → Themes, and click Customize on the Elemento theme.
In the Theme Editor, go to Theme Settings → Colors.
Select an existing color scheme or create a new one.
Adjust the color values under each category.
Color Roles in Each Scheme
Each color scheme includes the following groups and values:
Main
Primary — Used for key UI highlights
Secondary — Supporting accent color
Tertiary — Supporting accent color
Background
Primary — Main background for sections
Secondary — Used for layered surfaces or elements
Background Gradient — Optional gradient overlay
Text Content
Primary Text — Default body text and headings
Secondary — For subtext or supporting content
Tertiary — For de-emphasized or less important labels
Buttons
Background — Default button fill
Text — Button label color
Scroll Bars
Thumb — The draggable scroll indicator
Track — The background of the scrollbar
State Colors
Used to convey system states like success or error:
Disabled — For inactive elements
Success — For positive state messages or icons
Warning — For alerts or cautions
Error — For error messages or indicators
Rating
Primary — Active star/fill color
Secondary — Inactive or background rating color
Placeholders
Outline — Used for placeholder content outlines
Background — Used for placeholder content backgrounds
Backdrops
Modal — Overlay background behind modals
Section — Optional backdrop behind certain sections or overlays
Tips
Keep contrast in mind for accessibility (e.g., text over background).
Use consistent Primary/Secondary logic across schemes to reduce visual clutter.
Use the Preview pane in the Theme Editor to test your changes in context.
Last updated