Theme Color & Token Customizer

Customize 10 portal color tokens (header, nav, body, sidebar, footer, links) with a live preview. Export as CSS custom properties or SCSS variables.

Live Portal Preview

My PortalWelcome, User

HomeDocumentsCalendarSettings

Page Content

This is body text inside the main content region. Here is a sample link styled with the link token.

Read more in the documentation.

Color Tokens

Header Background--header-bg

Header Text--header-text

Nav Background--nav-bg

Nav Text--nav-text

Body Background--body-bg

Body Text--body-text

Sidebar Background--sidebar-bg

Sidebar Text--sidebar-text

Footer Background--footer-bg

Link Color--link

Presets:

Export

Format

CSS custom properties (:root)

SCSS variables ($var)

Variable prefix (optional)

:root {
  --header-bg: #1e293b;
  --header-text: #ffffff;
  --nav-bg: #334155;
  --nav-text: #e2e8f0;
  --body-bg: #f8fafc;
  --body-text: #0f172a;
  --sidebar-bg: #e2e8f0;
  --sidebar-text: #1e293b;
  --footer-bg: #1e293b;
  --link: #2563eb;
}

About the Theme Color & Token Customizer

Designing a consistent theme means deciding a handful of core colors and reusing them everywhere. This tool gives you 10 portal color tokens — covering the header, navigation, body, sidebar, footer, and links — and lets you tune each one with a color picker or a hex value. A live mini-portal preview shows exactly how the colors work together, and when you're happy you can export them as ready-to-use CSS custom properties or SCSS variables.

Features

10 design tokens: header, nav, body, sidebar (each with background & text), footer, and link color.
Live preview: a mock portal layout re-colors instantly as you pick colors.
Two export formats: CSS custom properties on :root, or SCSS $variables.
Optional prefix: namespace your variables (e.g. --portal-header-bg).
Presets: start from light, dark, or forest themes, then customize.
Client-side & private: everything runs in your browser — nothing is uploaded.

How to use

Start from a preset or pick colors for each token using the swatch or hex field.
Watch the live portal preview update to check contrast and harmony.
Choose CSS or SCSS output and optionally add a variable prefix.
Copy the variables or download theme-tokens.css / _theme-tokens.scss into your project.