Appearance Settings
Theme tile selector, accent color swatches, interface density toggle, and a reduce-motion Switch for personal look-and-feel.
Theme tile selector, accent color swatches, interface density toggle, and a reduce-motion Switch for personal look-and-feel.
The Application Collection unlocks the source for every Application block. All Access unlocks every Collection.
Already purchased? Log in
Appearance Settings is the look-and-feel panel, three selectable theme tiles (Light, Dark, and System with System selected by default), five accent color swatches from Zinc through Rose, an interface density toggle with Compact, Default, and Comfortable options, and a Reduce motion Switch that disables transitions and animations throughout the interface. The System tile carries an honest note: it follows your OS setting and switches automatically at sunrise and sunset.
All state lives in local useState with aria-pressed on the tiles and density chips. Keeping theme preference as a per-user setting rather than a workspace default is the choice that prevents every new hire from having to immediately change it back.
Reach for this block on the personal preferences page of a settings shell, wired to your theme provider and a preferences endpoint. The reduce-motion Switch should write to a CSS class on the root element.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the personal appearance panel. Other configurations:
Tip: save appearance immediately on change or make the consequence of the Save button explicit, silent discard is a support ticket waiting.