Color schemes
Akira uses a single color scheme group in Theme Settings that every section on the store draws from. Instead of picking individual colors inside each section, you define a set of named schemes once, then apply the scheme you want per section from a dropdown.
How the scheme group works
In Theme Settings you'll find one setting, Color schemes, which holds a list of named schemes (Scheme 1, Scheme 2, Scheme 3, and so on). Each scheme in the list defines its own set of colors:
| Role | What it controls |
|---|---|
| Background | The section's solid background color, applied behind all content in that section. |
| Background gradient | Optional gradient that overrides the solid background color when set. |
| Text | The default color for headings, body copy, and other text inside the section. |
| Surface | Background color for cards, panels, and other raised elements sitting on top of the section background. |
| Border | Color used for dividers, input borders, and other outlines. |
| Accent | Used for highlights, links, and secondary UI elements that need to stand out from the main text color. |
| Accent 2 | A second accent color for schemes that need two complementary highlight colors. |
| Button | Background color for primary (solid) buttons. |
| Button label | Text color for primary buttons. |
| Secondary button | Background color for secondary/outline buttons. |
| Secondary button label | Text color for secondary/outline buttons. |
| Secondary button border | Border color for secondary/outline buttons. |
| Primary button border | Border color for primary buttons, useful when the button background is close in tone to the section background. |
| Badge | Background color for product badges (New, Sale, Low stock, etc.) using the default badge style. |
| Success | Color for success states, such as "In stock" indicators and confirmation messages. |
| Warning | Color for warning states, such as "Low stock" indicators. |
| Error | Color for error states, such as form validation messages. |
You can add as many schemes as you need, and rename each one so it's clear what it's for, for example "Light", "Dark", or "Accent block".
Applying a scheme to a section
Every section that supports color (which is nearly all of them) includes a Color scheme dropdown in its own settings panel. This dropdown lists every scheme you've defined in Theme Settings. Choosing a scheme there applies that scheme's full set of colors, background, text, surface, border, accent, button, and status colors, to that section only, without affecting any other section on the page.
The practical workflow
Because schemes are defined once and reused everywhere, the recommended workflow is:
- Set up your full palette in Theme Settings first, before building out pages, so you're not guessing colors section by section.
- Keep the number of schemes small (three to five is usually enough) so the store stays visually consistent and each scheme has a clear purpose.
- Apply schemes per section from the dropdown as you build, rather than customizing individual colors inside a section.
- If you need to restyle the whole store, for example for a seasonal promotion, update the colors inside a scheme once and every section using it updates automatically.
Tip: Use the color scheme notes field to record what each scheme is for, such as "Scheme 2 = dark sections only" or "Scheme 4 = sale banners". This saves time once a store has many sections using different schemes.