Variables and Modes

Understand how Master CSS resolves theme variables, emits CSS custom properties, and applies light, dark, and custom modes.

Give a repeated value a project name

CSS custom properties let multiple declarations share a value. A Master CSS theme makes those values available to token-aware classes. Start with one spacing token and the class that consumes it:

@theme { --spacing-card: 1.5rem; }

<div class="p-card">Example</div>

@layer theme {  :root,  :host {    --spacing-card: 1.5rem  }}@layer utilities {  .p-card {    padding: var(--spacing-card)  }}

This example compiles the theme with the current preset before generating the class. Change the theme value when every consumer should change together; choose a local value when the change belongs to one element.

Add modes after the shared value works

1. Check the namespace's consumers before naming a token.
2. Verify the emitted variable and the declaration that references it.
3. Add alternate mode values where the design requires them.
4. Test the project's explicit mode activation and inherited CSS variables.

The Variables & modes reference owns the resolution order, mode activation and inline/static rules.

Look up a rule

• Overview
• Variable lifecycle
• Namespace resolution
• Default namespace sources
• Contextual token lookup
• Inline and static variables
• Mode buckets
• Derived mode-aware values
• Mode activation
• Project settings
• Check a custom spacing token
• System preference with a manual override
• Local themes and overlap
• Shadow DOM