Styling Your Theme

We have tried to make this theme flexible and easy to customize.

Head over to:
'Content > Site Settings > Settings'

Here you will find two tabs for styling Fonts & Colors.

Updating Colors

This heme works with surfaces, for every surface you can set the background & the foreground color.

Then you can set the surfaces of the page, footer and menu.

To reduce page load this theme makes use of the modern font stack.

System font stack CSS organized by typeface classification for every modern OS

The fastest fonts available. No downloading, no layout shifts, no flashes — just instant renders.

Select a font stack for the headings body and choose the font weights.

You can use the surface classes:

.surface_primary, .surface_danger, surface_dark etc.

and the tailwind classes: .text-primary, .text-primary-foreground, .bg-info, .border-warning etc.

With tailwind you can use all font sacks from the modern font stack. .font-system-ui, .font-antique, .font-slab-serif etc.

If you need custom fonts take a look at https://fontsource.org/.

Your logo(s) will need to be in svg format, you can replace them in the icons folder `/src/icons`