Theme & Appearance

VIDEO WALKTHROUGH

Astro Admin — Theme & Brand Colours: setup guide

2:17

Recorded 14 October 2026 · Narrated walkthrough · English captions

Jump to a chapter 7 chapters

1. 0:00Theme & Brand Colours
2. 0:14Browse the built-in theme gallery
3. 0:35Open the Custom Theme editor
4. 0:53Review Auto colour and both modes
5. 1:14Name a new custom theme
6. 1:35Apply and check the storefront
7. 1:55Your next steps

Read the full video transcript

Astro Admin — Theme & Brand Colours 2026-10-14 — Astro Admin setup

00:00:00 — Theme & Brand Colours
Welcome to the Agentic Ecom Astro Admin guide to theme & brand colours. We're using the Sync Comms storefront to show the current controls. We'll review the workflow with previews, without saving changes to this live store.

00:00:14 — Browse the built-in theme gallery
Open Theme and Appearance. Apply a Theme Preset shows the supplied colour schemes and the currently active choice. Theme controls colours, while Style controls shape and Structure controls layout. Applying a theme is a site-wide change, so review the palette before using Apply on your own store.

00:00:35 — Open the Custom Theme editor
Switch to Custom Theme to work with your own brand colours. The editor shows a reminder that the changes need to be saved as a preset and applied. Primary, Secondary and Accent provide the starting colours for Auto colour. We are reviewing an unsaved editor here.

00:00:53 — Review Auto colour and both modes
Auto colour, light and dark, derives a coordinated palette from your brand colours. Review both display modes, including the header, body, buttons and text contrast. Automatic colour adjustment is a useful starting point; still check your actual content, focus states and images for readability before publishing.

00:01:14 — Name a new custom theme
Save as Custom Preset opens a naming dialog. On your store, give the theme a descriptive name and save it as a separate preset. We are only opening the dialog here. A saved custom theme needs to be applied before you build pages with it; opening or editing the theme does not itself publish it.

00:01:35 — Apply and check the storefront
Return to Apply a Theme Preset and find your saved theme. Apply it when ready, then prebuild the relevant pages. Check desktop and mobile in light and dark modes, including the header, product price, forms and checkout. Use Discard when you want to leave unsaved editor changes behind.

00:01:55 — Your next steps
To put this into practice, review brand colours in both modes, save and apply the intended theme, build and inspect readability on real pages. Test the complete result on your own staging storefront before publishing. You can follow the written Astro Admin guides at user guides dot Agentic Ecom dot net.

Download videoEnglish captionsDownload transcript

Theme & Appearance is the storefront’s colour DNA. It’s distinct from Style (shape) and Structure (layout). Open it at Theme & Appearance in the sidebar (/admin/settings).

There are two tabs at the top: Apply a Theme Preset (pick a ready-made theme) and Custom Theme (build your own from your brand colours). The current live theme is shown as “Currently active: …”.

Quick start — apply a ready-made theme

The fastest route. Apply a Theme Preset shows a gallery of hand-tuned, accessibility-checked themes — each with a live preview, a short description, its colour swatches and an Apply button.

1. Browse the gallery and find a theme that suits your brand (e.g. Core Retail, Industrial Hardware Dark, Pure Tech Minimal).

2. Click Apply on its card. The theme becomes live site-wide.

3. Prebuild so the change reaches the live store.

Shipped themes are hand-tuned

The built-in themes are colour-balanced by hand and tested for contrast in both light and dark mode. They’re the safe choice — leave them as they are. To make your own, use the Custom Theme tab below (it never overwrites a shipped theme).

Build your own — the Custom Theme tab

Switch to Custom Theme to colour the store from your brand colours. A banner reminds you: changes here build a custom theme — you’ll be prompted to name and save it before they apply, and “Editing Light Mode — changes don’t go live until you Save as a preset and Apply it.”

Auto colour (the one-click route)

The Auto colour your brand theme panel is the heart of it:

1. Enter your three brand colours — Primary, Secondary and Accent (each a hex field with a swatch).

2. Click Auto colour — light & dark. The system colours the whole storefront — header, footer and everything between — for both light and dark mode, keeping your brand colours wherever possible and only nudging a colour when a pairing would fail accessibility (WCAG) contrast. The chrome (header/footer) stays a fixed brand colour in both modes; only the page body flips light↔dark.

3. Fine-tune any individual colour afterwards if you want. Use the Display Mode (Light / Dark) toggle to check both.

Auto colour overwrites the current editor colours

Auto colour fills the editor with a fresh, brand-cohesive palette — so use it on a new custom theme. It guarantees legibility, not taste: a very light brand colour used as text is darkened just enough to pass contrast (it stays in-family, shifts slightly).

Save it as a preset

When you’re happy, click Save as Custom Preset. You’re prompted for a name and an optional description — the theme is stored as a new preset and appears on both the Apply a Theme Preset tab and the Custom Presets page. It does not go live until you Apply it.

1. Save as Custom Preset → name it (e.g. “Midnight Industrial”) → Save Preset.

2. Go to Apply a Theme Preset (or Custom Presets), find your theme and Apply it.

3. Prebuild to push it live.

A theme change only shows on prebuilt pages after a re-Prebuild

Like every other appearance change, a saved theme reaches the live store only after a Prebuild. If you changed a colour and the storefront still shows the old one, you haven’t prebuilt yet — this is the most common “it didn’t work” report and it almost always isn’t a bug.

Accessibility & contrast

Because foregrounds are derived from the real background colour, the theme system keeps text contrast readable by default. Still, after a big colour change, switch the live preview to both light and dark and check the hero and buttons — a very light Primary on a white Background can wash out, and the preview will show it before your customers do.

Next: Saved layouts, custom presets & CSS Manage saved versions, your custom presets, raw CSS and imports.