UI Toolbox logoUI Toolbox

Theme variables

The look of the windows and the controls comes from USS variables. A theme is a sheet that sets them. All styling is done with USS. C# adds and removes classes only. It does not set colors.

Rules

  1. Themes/dark.uss is the theme contract. It defines every --tb-* variable.
  2. A theme overrides --tb-* variables only.
  3. WindowStyles.uss uses only the --tb-* variables.
  4. Selectors use the canonical tb-* classes. They do not use element names.

Variable contract

All variables are defined on :root in Assets/UIToolbox/Runtime/Resources/UIToolbox/Themes/dark.uss. The values below are the dark (default) values.

Palette

Variable Dark value Used for
--tb-color-background #1e1e1e Workspace background.
--tb-color-surface #2b2b2b Window and content background.
--tb-color-surface-alt #333333 Title bar, buttons, tab strip.
--tb-color-surface-hover #3d3d3d Hover state.
--tb-color-border #454545 Borders.
--tb-color-text #e6e6e6 Text.
--tb-color-text-muted #b3b3b3 Secondary text (tb-text-muted).
--tb-color-text-disabled #7a7a7a Disabled text.
--tb-color-accent #0e639c Focused window border and title bar, active tab.
--tb-color-accent-text #ffffff Text on the accent color.
--tb-color-danger #c42b1c Close button hover, error chrome.
--tb-color-danger-text #ffffff Text on the danger color.
--tb-color-success #2e8b57 Success notification stripe.
--tb-color-warning #d18616 Warning notification stripe.
--tb-color-overlay rgba(0, 0, 0, 0.5) The dim overlay behind a dialog, a message box and the other modal overlays.
--tb-color-drop-target rgba(255, 153, 0, 0.8) Drop target highlight.
--tb-color-dock-target rgba(76, 255, 76, 0.8) Dock zone highlight.
--tb-color-preview rgba(77, 153, 255, 0.2) Snap and tear-off preview fill.
--tb-color-preview-border rgba(77, 153, 255, 0.9) Snap and tear-off preview border.
--tb-color-glass rgba(20, 24, 34, 0.6) The tint of a glass window (GlassWindowTemplate) over its blur.
--tb-color-glass-border rgba(255, 255, 255, 0.24) The border of a glass window, message box or dialog.
--tb-color-glass-dialog rgba(255, 255, 255, 0.12) The tint of a glass message box or dialog (Glass). It is lighter than the dimmed UI behind the box, so the box reads as frosted glass also over a plain background.
--tb-color-glass-accent rgba(70, 140, 255, 0.22) The tint of a GlassPanel with Tint set to Accent. The themes do not set it; this is the default.

Spacing, radius, font, border, size

Variable Dark value
--tb-spacing-xs 2px
--tb-spacing-sm 4px
--tb-spacing-md 8px
--tb-spacing-lg 16px
--tb-radius-sm 3px
--tb-radius-md 6px
--tb-font-size-xs 9px
--tb-font-size-sm 11px
--tb-font-size 13px
--tb-font-size-lg 15px
--tb-border-width 1px
--tb-border-width-thick 2px
--tb-size-title-bar 26px
--tb-size-button 20px

Animation

Variable Dark value
--tb-animation-duration-fast 150ms
--tb-animation-duration-normal 300ms
--tb-animation-duration-slow 450ms
--tb-animation-easing-entrance ease-out
--tb-animation-easing-exit ease-in
--tb-animation-easing-default ease-out

The minimized height of a window is the measured height of its title bar. If you change --tb-size-title-bar, minimized windows follow it.