Appearance Settings

About this block

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.

When to use

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

• Settings shell

After

• Language and region
• Connected apps

What you can display

One strong use is the personal appearance panel. Other configurations:

• Brand theme override. Replace accent swatches with your product palette and lock the selection.
• Font size control. Add a size step toggle beside density for accessibility compliance.
• Preview pane. Show a miniature rendered surface so the user sees the effect before saving.

Tip: save appearance immediately on change or make the consequence of the Save button explicit, silent discard is a support ticket waiting.