Appearance

AppearanceSwitcher ​

AppearanceSwitcher is a ready-made button and dropdown menu that lets end users switch between Light, Dark, and System color modes. It reads and writes the theme through useTheme and requires no configuration.

Import ​

tsx
import { AppearanceSwitcher } from "@tailor-platform/app-shell";

Basic Usage ​

tsx
<AppearanceSwitcher />

Drop it anywhere inside an <AppShell> tree — for example in a sidebar footer or a settings toolbar.

Props ​

AppearanceSwitcher accepts no props. Color theme state is managed internally via useTheme.

Behavior ​

  • Renders a palette icon button. Clicking it opens a popover menu with three radio options: Light, Dark, and System.
  • The active option is highlighted.
  • When System is selected, the button tooltip shows the currently resolved mode (e.g. "Following system — currently dark").
  • The selected preference is persisted to localStorage (key appshell-ui-theme) and restored on subsequent visits.
tsx
import {
  AppShell,
  SidebarLayout,
  DefaultSidebar,
  AppearanceSwitcher,
} from "@tailor-platform/app-shell";

function CustomSidebar() {
  return (
    <DefaultSidebar
      footer={
        <div className="flex items-center justify-end p-2">
          <AppearanceSwitcher />
        </div>
      }
    />
  );
}

function App() {
  return (
    <AppShell title="My App" modules={modules}>
      <SidebarLayout sidebar={<CustomSidebar />} />
    </AppShell>
  );
}