Theme:Density:Contrast:Fidelity:Subscription:

11 Uses for Variables Beyond Light and Dark Mode

Validation styling

I have a whole other blog post detailing out how this works...

Asset availability

Set asset visibility using a Page-level variable mode.

GIF placeholder for how to set modes

Breakpoints

  • <=740px (default)
  • 741px - 1200px
  • 1201px - 1440px
  • >=1441px

Brand Promotions

Apply section-specific promotional themes like seasonal discounts.

Subscription level

Modes: None, Professional, Organization, Enterprise

Loyalty status

Modes: None, Silver, Gold, Platinum

Logged in / logged out

Modes: None, Logged in, Logged out

Density

Current density: Compact

Contrast

Current contrast mode: High

Levels of fidelity

Current fidelity: Wireframe (dashed borders)

Change log

  • Current version: Added "Levels of fidelity"
  • March 16, 2025: First publication