Kostom.net

Theme


Whirl uses Theme ScriptableObjects to define design tokens such as colors, spacing, and—most importantly—breakpoints for media queries. They work similarly to TailwindCSS v4 themes but adapted to Unity’s constraints and workflows. Themes are used by both the compiler (to generate utilities) and by the runtime/editor responsive engine (to switch classes automatically).

What a Theme Contains

  • Breakpoints (--breakpoint-sm, --breakpoint-md, etc.)
  • Color tokens (--color-primary, --color-white, etc.)
  • Spacing tokens
  • Custom variables your utilities or custom components may need
  • Overrides for the default theme

Everything is stored as USS-compatible variables:

--breakpoint-sm: 250px;
--breakpoint-md: 500px;
--color-primary: #00c896;

Creating a Theme

You need the default theme ScriptableObject in your project because it contains default tokens, e.g, breakpoint, color, aspect, etc.
If you download the asset from the Assetstore, then it should contain the default Theme, but if you clone the project from GitHub or you can't find the asset in your project, then you can go to:
Tools > WhirlUSS > Default Theme

Overrides/Custom Theme

To override any token in the default theme, or to add any new token that's recognized by the compiler then you need to define it in an editable Theme ScriptableObject. To create one, Right-click inside any assets folder:
Create > Kostom > Styles > Theme

Why Theme Variables

The main advantage of using theme token instead of :root is that it's recognised by the compiler, and it can also be used with utilities, e.g, --color-primary: #FF005C makes it possible to use bg-primary, text-primary or with any element that can take color as a value, although it's not included by default.

You can also declare breakpoints, aspect-ratio, spacing, etc. You can also use it as a normal variable, e.g, bg-[var(--color-primary)] or background-color: var(--color-primary).

All WhirlCompilerSettings use the same theme, default or override. So, creating multiple themes for different WhirlCompilerSettings paths is not advised. All variables declared in both the default or the override theme would be added to the root of the final generated USS file.