Theme

What is the Theme System?

The DSS Base Template uses a file-based theming system where each theme is a scoped SCSS folder compiled into a standalone CSS file. The active theme is loaded at runtime based on the site configuration stored in Visor Studio — no code change is needed to switch themes between sites.

Theme Structure

Each theme lives under app/styles/<theme-name>/ and must provide an index.scss entry file, with any number of SCSS partials underneath it.

• app/styles
  • default
    • index.scss
  • green-grass
  • custom-site-theme

Compiled output is written to:

public/assets/theme/<theme-name>/main.css

CSS Generation

Theme SCSS is compiled by scripts/generateStyle.js into static CSS files served from public/assets/theme/.

CSS Variables

Each theme uses CSS custom properties (variables) to control its visual tokens. The default theme (app/styles/default/index.scss) defines variables on :root, for example:

:root {
  --themeColor: #0a618b;
  --secondaryThemeColor: #20b1bb;
  --darkColor: #18181b;
  --textColor: #0a142f;
  --backgroundColor: #0a618b;
  --lightBackgroundColor: #f3f4f6;
  --borderRadius: 20px;
  --borderColor: #d9d9d9;
  --banner-textColor: #fff;
  --navigation-searchBarIconColor: #fff;
  /* ...and more */
}

To create a custom theme, override any of these variables in your theme’s index.scss. Widget and layout components consume these tokens directly — no component code needs to change when switching themes.

Runtime Theme Loading

app/layout.tsx loads the correct theme CSS at runtime:

1. It fetches the active site configuration from Visor Studio via the DaaS API.
2. It uses the site’s configured theme path to determine which compiled CSS file to load.
3. If no theme is configured, it falls back to /assets/theme/default/main.css.

This means a single deployment can serve multiple sites with different themes by setting the active theme on each site in Visor Studio under Settings → Sites.

Adding a New Theme

npm run generate:style

Built-in Styles

Alongside the site theme, app/layout.tsx always loads these global styles: