Themes

A theme decides how your storefront or your admin looks. This page explains which themes come with Litestore, what a theme controls, and how to give one section of a page different colours.

Litestore comes with four themes:

Starter   admin
Starter   storefront
Amelia    storefront
Brutal    storefront

Each theme sets its own colours, fonts and text sizes, and its own spacing. It also sets corner radii, border widths, shadows and how long transitions take. Litestore turns these values into CSS variables, and every component reads them.

This means a theme isn't a coat of paint over a fixed design. When you change the theme, you change the values the components were built to read. That's why the three storefront themes look truly different, not just differently coloured.

You turn on one storefront theme and one admin theme under Settings → Appearance.

Two separate choices

Litestore saves the storefront theme and the admin theme as two separate settings. You pick each one on its own.

Every theme says whether it's for the storefront or the admin. If you try to use it for the other one, Litestore refuses. The storefront and the admin need different sets of values, so an admin theme won't simply look odd on a storefront. It would break, and the check prevents that.

A new store starts with these themes:

storefront   Amelia
admin        Starter

A market can also have its own storefront theme, but the Markets form has no field for setting it.

What a theme defines

A theme sets values in these groups:

• Core and semantic colours, including success, warning, danger and info
• Heading, body and monospace fonts, with their sizes, weights, line heights and letter spacing
• Page, section, card and grid spacing
• Radius and border widths
• Shadows
• Transition durations and easings

Three of these groups use fixed scales instead of free values:

7   radius steps
3   border widths
6   shadow levels

The scales keep your store looking consistent. A page can't end up with nine slightly different corner radii, because there are only seven to choose from.

Storefront themes add extra values for surfaces on top of these groups. They can also include custom CSS.

Block colour palettes

On Storefront → Settings, Litestore shows the active storefront theme as a palette you can't edit.

It's read-only on purpose. If you edited the theme's own colours, every block on every page would change. That's rarely what you want when you only need one section to stand out.

Do this instead:

1. Duplicate the palette to get a copy you can edit.
2. Change its colours.
3. Assign it to one block.

That block then uses your new colours, and the rest of the page keeps the theme's colours.

No dark mode

Each theme has one palette. Litestore doesn't generate a dark version of it.

A generated dark palette would have to guess at contrast choices that someone made carefully in the light one. It would also go wrong as soon as a theme used colour to mean something, not just to look a certain way.

Beyond the theme settings

The storefront and the admin are React components in your own repository.

If a theme can't express something, a developer can change the code. There's no separate template language to learn. You never hit a point where you have to wait for Litestore to add a setting.

Where the themes are in the code

If you're a developer and need to edit a theme, look here:

config/theme.ts
config/themes/

Choosing and customising

1. Pick your themes. Open Settings → Appearance and turn on a storefront theme and an admin theme. They're independent, so your admin doesn't have to match your shop.
2. Change one section's colours. On Storefront → Settings, duplicate the theme's palette, edit the copy and assign it to the block that needs different colours. Do this instead of editing the theme when the change is for one section only.
3. Ask a developer for the rest. For anything a theme can't do, a developer can edit the theme file or the components.

Work in this order to keep your store consistent:

Change the theme when the whole store should change, use a block palette when one section should, and change the components only when neither can do what you want.

Related