Custom Themes

Override CSS design tokens per theme to fine-tune the visual language without touching source code.

How It Works

TotalApp's visual language is built on CSS custom properties (variables). Every colour, blur value, gradient, and border used by the UI is defined as a token. The Custom Themes editor lets you redeclare any of these tokens for a specific theme — without modifying any source file.

The overrides you enter are injected into a <style> tag in the document <head> at runtime. Because they appear after the built-in stylesheet, they take precedence over default token values.

One token change = every site updates

TotalApp has 50+ screens that all read from the same token set. Changing --fc-modal-panel-bg once updates the background of every modal across the entire app — you never need to hunt down individual components.

Writing Overrides

Enter valid CSS in the theme override editor. Wrap your declarations in a theme selector to scope them correctly:

/* Make modals more blue in Dark theme */
[data-theme="dark"] {
  --fc-modal-panel-bg: linear-gradient(180deg, rgba(10,20,60,0.97), rgba(5,10,30,0.99));
  --fc-modal-panel-blur: 32px;
}

/* Give the Sleek theme a green primary accent */
[data-theme="sleek"] {
  --color-primary: #22c55e;
}

/* Override a glass card border for Light theme */
[data-theme="light"] {
  --fc-glass-card-border: rgba(0,0,0,0.12);
}

Available Theme Selectors

Selector	When applied
`[data-theme="dark"]`	Dark theme (default)
`[data-theme="light"]`	Light theme
`[data-theme="sleek"]`	Sleek theme (navy glassmorphism)
`:root`	All themes — use sparingly; affects every theme equally

Key Token Reference

Token	What it controls
`--color-primary`	Global accent colour — buttons, active states, links, focus rings
`--color-background`	Root page background
`--color-surface`	Card and panel surfaces
`--fc-modal-panel-bg`	Background gradient of all workstation modals
`--fc-modal-panel-blur`	Backdrop blur of modals
`--fc-glass-card-bg`	Glass card surface (assistant message bubbles, info panels)
`--fc-glass-card-border`	Glass card border colour
`--fc-shell-glass-bg`	Sidebar and header glass background
`--fc-primary-glass-bg`	User message bubble in AI assistant panels
`--fc-hr-canvas-bg`	HR module dark canvas background
`--bg-mesh`	Ambient background mesh gradient (set to `none` to disable)

FAQ

Do overrides apply immediately?

Yes — the style tag is updated live as you save. Refresh the page if you notice any rendering delay, but most changes are instantaneous.

Can I break the app with a bad override?

Syntax errors in the override block are silently ignored by the browser — the invalid rule is skipped and the rest of the overrides apply normally. The app will not crash. Use browser DevTools to debug unexpected results.

How do I remove all overrides?

Clear the override editor and save. The injected style tag is removed and all tokens revert to their built-in defaults.