Brand Settings & Themes

5 min read min read

Updated Feb 26, 2026

Beginner

Quick Answer

Brand Settings defines 8 site colors injected as CSS variables into every component preview and NitroShock-enabled page. Nine built-in theme presets give you a starting point, and you can extract colors from your active WordPress theme.

Brand Settings centralizes your site's color palette so every component and page preview automatically reflects your branding. Colors are stored as CSS custom properties and injected into Component Studio previews, the page editor, and the frontend of any NitroShock-enabled page. Open it from NitroShock → Brand Settings.

Color Slots

Eight color slots are available:

Primary — main brand color, used for buttons and key accents
Secondary — supporting brand color
Text — default body text color
Background — page background
Surface — card and section background color
Link — hyperlink color
Highlight — accent or call-out color
Heading — heading text color

These are output as CSS custom properties:

--color-primary
--color-secondary
--color-text
--color-background
--color-surface
--color-link
--color-highlight
--color-heading

Components that reference these variables automatically reflect your brand colors wherever they render.

Theme Presets

Nine built-in theme presets populate all eight color slots with a single click:

Dark Tech
Minimal Professional
Editorial Classic
Soft Shadows
Glass Morphism
Interactive Modern
Gradient Flow
Rounded & Friendly
Bold & Vibrant

After applying a preset, you can adjust any individual color slot before saving.

Extract Colors from Your Active Theme

Click Extract from Theme to read color definitions from your active WordPress theme's stylesheets and populate the brand color slots with matching values. Review and adjust after extraction — automatic matching is approximate.

Using Brand Colors in Component CSS

Reference brand colors using CSS variable names rather than hard-coded hex values:

.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-background);
}

.card {
    background: var(--color-surface);
    color: var(--color-text);
}

The AI Chat assistant automatically uses your brand variables when generating component styles, so AI-generated components respect your color scheme by default.

Where Colors Are Applied

Component Studio preview — injected as a <style> block into the preview iframe on each refresh
Page editor — CSS variables are available on the page while you edit
Frontend pages — output in <head> on any NitroShock-enabled page

Common Questions

Do Brand Settings affect my WordPress theme?

No. The CSS variables are only output on NitroShock-enabled pages and in the editor. Your theme's styles are unaffected.

Can I use different colors on different pages?

Brand Settings is site-wide — one active palette for the whole site. Page-level overrides can be added through the per-page custom CSS field in the page editor.

Will existing components update if I change Brand Settings?

Yes, immediately. Because components reference CSS variables rather than hard-coded colors, any change to Brand Settings is reflected in all components that use those variables — in previews and on live pages.

Next Steps

Build components that use brand colors — see Component Studio Guide
Generate components with AI — see AI Chat Assistant