Colour Schemes

Uisce gives you four colour schemes per preset. Think of a scheme as a coordinated set of colours — background, text, buttons, and accents that all work together. You assign a scheme to each section on your site, which makes it easy to create visual variety without hand-picking every colour.

The four schemes

Scheme	Typical use	Example
Scheme 1	Default / light	White background, dark text
Scheme 2	Dark	Dark background, light text
Scheme 3	Accent	Tinted background, complementary colours
Scheme 4	Bold	Vivid background, high contrast

Editing a colour scheme

Open Theme settings > Colors, then click the scheme you want to edit. You'll see fields for each colour in the set.

←Scheme 1 — Light

Color scheme

Background

#ffffff

Background gradient

transparent

Optional second colour for a gradient background. Leave blank for a solid background.

Text

#1e293b

Primary button

#2563eb

Button label

#ffffff

Secondary button

#f1f5f9

Background colour of secondary (non-primary) buttons.

Secondary button label

#1e293b

Text colour of secondary buttons.

Outline button

#2563eb

Border colour of outline-style buttons.

Accent

#2563eb

Links, icons, and highlights.

Shadow

#0f172a

Used for subtle drop shadows on cards.

Scheme 1 — Light

Light section

Most of your pages will use this scheme. It's clean and easy to read.

Primary button

Here's the same section using the dark scheme:

Scheme 2 — Dark

Dark section

Use this for sections you want to stand out — like a call to action or footer.

Primary button

Assigning a scheme to a section

Every section in Uisce has a Colour scheme setting. To change it:

1. Click on the section in the theme editor.
2. Look for the Colour scheme setting (usually near the top).
3. Click a dot to switch between Scheme 1, 2, 3, or 4.

That section immediately updates to use the new colours.

Creating contrast on your homepage

A good homepage alternates between light and dark schemes. For example:

• Banner → Scheme 4 (bold, eye-catching)
• Featured collection → Scheme 1 (light, easy to browse)
• Testimonials → Scheme 2 (dark, stands out)
• Newsletter → Scheme 3 (accent, draws the eye)

This rhythm keeps the page interesting without you having to pick individual colours for each section.

Tips for good colour contrast

• Text must be readable. If you pick a dark background, use light text. The theme handles this automatically with the built-in schemes, but double-check after custom edits.
• Test with real content. A colour combination that looks good with placeholder text can feel different once your actual product photos and descriptions are in place.
• Don't use all four schemes on one page. Two or three is usually enough. Too many colour changes can feel disjointed.
• Start with the preset colours. They're designed to work together. Adjust individual values only after you've lived with the defaults for a while.