Colors & Styling

This is the no-code path to your own theme. You will change colors, spacing, and fonts by editing two SCSS files — no Svelte, HTML, or JavaScript required. If you have never written CSS before, don't worry: every change here is "find a value, change the value, refresh".

TIP

This tier needs no Svelte or JavaScript at all. A single color change already produces a visibly different theme — and because you are only setting values the engine already understands, engine updates never break your theme.

The two files you edit

Everything on this page happens in two files inside your theme:

File	What it is for
src/styles/tokens.scss	A menu of every color and font variable the engine uses. Uncomment a line and change its value.
src/styles/style.scss	Where your own extra CSS goes, after the engine's styles.

tokens.scss — the menu of values

When you scaffold a theme, src/styles/tokens.scss ships as a commented-out menu of every variable the engine uses — colors like $primary and $secondary, fonts, and named dark themes. Each line starts with //, which means "off". To use one:

1. Find the variable you want in the file.
2. Remove the // at the start of its line (this is called uncommenting).
3. Change the value to what you want.
4. Save the file and refresh the browser.

Colors and fonts in tokens.scss are declared with !default, which means your value wins. Radius, spacing and shadows are set with the --pano-* variables instead (next sections).

Example 1 — change the primary color

The primary color is the theme's main accent — buttons, links, highlights. Change it and the whole site re-tints:

// src/styles/tokens.scss
$primary: #ff5722;

Example 2 — change the border radius

Corner radius is not a tokens.scss variable. Set the --pano-radius family in your own CSS (src/styles/style.scss, below the imports); every default view and the engine's own views read it:

// src/styles/style.scss — after the imports
:root {
  --pano-radius: 12px;
  --pano-radius-sm: 8px;
  --pano-radius-lg: 18px;
}

A bigger number is softer; 0 is square. See The --pano-* tokens below.

Example 3 — change the font

Set the base font used across the site. Use a font you know is available (a web-safe font, or one you load yourself):

// src/styles/tokens.scss
$font-family-base: "Inter", sans-serif;

TIP

You do not have to uncomment every line. Change only the handful of values you care about and leave the rest commented — the engine fills in sensible defaults for everything you don't touch.

The --pano-* tokens

Besides the SCSS menu, a theme reads 34 CSS variables named --pano-*: colors (--pano-color-bg, --pano-color-text, --pano-color-primary, --pano-color-border...), radii (--pano-radius, -sm, -lg, -pill), --pano-border-width, shadows (--pano-shadow-sm, --pano-shadow, --pano-shadow-lg), fonts (--pano-font-body, --pano-font-heading, --pano-font-mono, --pano-font-size...) and --pano-space. In a Bootstrap theme they mirror the matching Bootstrap variable, so changing the SCSS color changes both. Plugins style their default views with the same variables, so one set of values re-tints the plugins too:

:root { --pano-color-primary: #7c3aed; --pano-radius: 0.5rem; }

Each plugin view also carries semantic classes (market-product-card__title). Your CSS is not layered, so it beats the plugin's fallback styles: .market-product-card__title { margin: 1rem } just works. A theme without Bootstrap is covered in Views.

style.scss — your own extra CSS

tokens.scss covers the values the engine already knows about. When you want to add CSS of your own — something the engine has no variable for — put it in src/styles/style.scss, after the imports at the top of the file. Anything you add there is loaded last, so it layers on top of the engine's styles.

For example, to give cards a stronger shadow:

// src/styles/style.scss — after the imports

.section-card {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

WARNING

Add your CSS below the existing @use / @import lines, never above them. The engine's styles must load first so your rules can build on top of them.

Seeing your changes live

SCSS is compiled to CSS separately from the rest of the build. Two commands cover it:

• Live watch while you work — recompiles automatically every time you save:

  bun run dev:ui

• One-shot compile — build the styles once (useful before a full build):

  bun run build:ui

With bun run dev:ui running, the loop is simply: edit a value, save, and watch the browser update.

What's next?

When a color and font change isn't enough — when you need the layout or markup of a page to be different — move up to Changing Page Designs, which shows how to take ownership of a page's look.