Showcase / One site, many looks
Design - ThemeNotice anything different?
The rest of this site wears the Dreamy theme. This page wears Forest - chosen in the page's own settings. Further down, three panels go further and re-theme just themselves. None of it needed a line of CSS.
Three panels, three looks, one page.
An element override gives one part of the site a theme of its own - a dark footer on a light site, a navbar in the brand colour. Each panel below is matched by a class and told what to wear.
theme: ocean-dark
Night shift
A whole theme, applied to one panel: background, text, buttons and borders all follow.
Visit the demo shoptheme: royal-light
Trade counter
Another theme beside it. Buttons, links and cards inside pick it up automatically.
Read the blogtokens only
Brand orange, square corners
No theme at all - just two settings changed: the primary colour and the corner radius.
More examplesContent > Theme, three ways.
- The site theme - one of 37, with a font and base size, and an optional switch to a night theme at a set time.
- A page's own theme - in the page's details, like this one.
- Element overrides - a CSS selector, then a whole theme, individual colours and sizes, or both. A Generated CSS panel shows exactly what it writes.
- A theme switcher for visitors - an optional floating disc of theme dots, with the themes you choose to offer.
The overrides behind the three panels, as saved
[
{"scope": ".sc-region-ocean", "theme": "ocean-dark"},
{"scope": ".sc-region-royal", "theme": "royal-light"},
{"scope": ".sc-region-tokens",
"tokens": {"--dm-primary": "#b45309", "--dm-radius-lg": "0px"}}
]
And this page's own theme
theme: forest-light
Need a theme that is exactly yours?
Theme Roller (Pro) starts from any built-in theme and lets you change its colours, fonts, spacing and borders with a live preview. Saved themes appear everywhere a theme is chosen - including in the overrides above.