CSS and design tokens

The theme’s colors are CSS custom properties on :root. That is why a Customizer change updates the whole site — including dark mode — without rebuilding a stylesheet.

Where the tokens live

File	Role
`style.css`	Declares the light-mode token defaults under `:root`
`assets/css/dynamic-vars.css`	Carries logo width rules
`assets/css/screen.css`	The main component stylesheet, consuming the tokens
Inline styles	Your Customizer values, appended at priority 20

Color tokens

Token	Default	Controlled by
`--vara-primary`	`#7c3aed`	Primary
`--vara-secondary`	`#cebdff`	Secondary
`--vara-accent`	`#4edea3`	Tertiary
`--vara-bg`	`#f8fafc`	Background
`--vara-surface`	`#ffffff`	Surface / Card BG
`--vara-text`	`#0f172a`	Text
`--vara-heading`	`#0f172a`	Headings
`--vara-muted`	`#55647a`	Muted Text
`--vara-link`	`#7c3aed`	Links
`--vara-border`	`#e2e8f0`	Borders
`--vara-dropdown-bg`	`#ffffff`	Dropdown BG
`--vara-logo-width`	—	Logo Max Width

Token names are internal. They may change between releases. Use the Customizer for branding you need to be durable, and treat direct variable references as a convenience rather than a contract.

Using the tokens

.card {
    background: var( --vara-surface );
    border: 1px solid var( --vara-border );
    color: var( --vara-text );
}

.card__title {
    color: var( --vara-heading );
}

.card__meta {
    color: var( --vara-muted );
}

.card__link {
    color: var( --vara-link );
}

Dark mode

The theme remaps tokens when dark mode is active rather than applying a filter.

/* Inspect your site to confirm the exact selector the theme uses. */
.vara-dark {
    --vara-bg: #0b1220;
    --vara-surface: #111a2e;
    --vara-text: #e6ecf5;
}

Check the selector before writing dark-mode overrides. The theme applies its theme class to the root element. Confirm whether it is a class or a data attribute in your version — inspect the html or body element with dark mode toggled on rather than guessing.

Where to put your CSS

Three options, in order of durability.

1. Additional CSS — quick, no risk

Appearance → Customize → Additional CSS Best for one or two rules. It loads after the theme’s stylesheets and survives updates. If you find yourself adding more than a few rules, move to a child theme.

2. Child theme `style.css` — the normal choice

/* wp-content/themes/your-child-theme/style.css */

Best for any sustained styling. Version-controlled, portable, and never overwritten by an update. See Child themes.

3. A compiled build — for larger projects

If you use Sass or Tailwind, compile to a file in your child theme and enqueue it with a dependency on the parent stylesheet.

add_action( 'wp_enqueue_scripts', function () {
    wp_enqueue_style(
        'my-styles',
        get_stylesheet_directory_uri() . '/dist/main.css',
        array( 'vara-saas-screen' ),
        '1.0.0'
    );
}, 20 );

Never edit assets/css/screen.css or style.css in the parent theme. Both are overwritten on every update.

Declaring a dependency on the parent’s stylesheet guarantees your CSS loads after it.

Beating specificity

When your rule does not apply, you are almost always losing a specificity fight.

Check the selector order first

Use your browser’s developer tools to see which rule wins and where it comes from. This answers the question in seconds.

Prefer tokens over overrides

Setting --vara-primary in your own CSS restyles everything using that token. Overriding individual component selectors means chasing many rules instead of one.

Load after, do not out-specify

A dependency plus later load order is cleaner than !important chains.

Use !important sparingly

If you must, keep it to a single, well-commented declaration.

/* Prefer this — one variable, everything follows. */
.vara-saas-dark-surface {
    --vara-surface: #111a2e;
}

/* Over this — many selectors, all of which can lose. */
.card,
.widget,
.panel,
.post-card {
    background: #111a2e !important;
}

Adding a custom font

Self-host it. Do not link Google Fonts — it adds a third-party connection to every page load and gives the provider your visitors’ IP addresses.

@font-face {
    font-family: "Your Brand Font";
    src: url("/wp-content/uploads/your-brand-font.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: "Your Brand Font", system-ui, -apple-system, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Your Brand Font", system-ui, -apple-system, sans-serif;
}

The Customizer’s font field is an allowlist of six stacks, so a custom font must come through CSS. See Typography reference.

Responsive breakpoints

The theme’s layout uses mobile-first CSS.

Breakpoint	Typical use
Base	Single column, mobile menu
~768 px	Two-column card grids
~1024 px	Full desktop layout, sidebar beside content

Debugging CSS

Problem	Tool
Which rule is winning?	Browser developer tools, the element inspector
What token value is active?	Inspect the `root` element in the computed styles panel
Is my file loading at all?	The Network tab, filtered to CSS
Is a plugin overwriting it?	Search your rendered page for a second copy of your class

Colors reference

The Customizer settings behind these tokens.

Hooks and filters

Enqueue your CSS through a hook.

Introduction

Getting started

Customization

Where the tokens live

Color tokens

Using the tokens

Dark mode

Where to put your CSS

1. Additional CSS — quick, no risk

2. Child theme `style.css` — the normal choice

3. A compiled build — for larger projects

Beating specificity

Adding a custom font

Responsive breakpoints

Debugging CSS

Colors reference

Hooks and filters

​Where the tokens live

​Color tokens

​Using the tokens

​Dark mode

​Where to put your CSS

​1. Additional CSS — quick, no risk

​2. Child theme style.css — the normal choice

​3. A compiled build — for larger projects

​Beating specificity

​Adding a custom font

​Responsive breakpoints

​Debugging CSS

​Related

Colors reference

Hooks and filters

Where the tokens live

Color tokens

Using the tokens

Dark mode

Where to put your CSS

1. Additional CSS — quick, no risk

2. Child theme `style.css` — the normal choice

3. A compiled build — for larger projects

Beating specificity

Adding a custom font

Responsive breakpoints

Debugging CSS

Related