Appearance

View as Markdown

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
function BasicUsage() {
  return <AppearanceSwitcher />;
}

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

It is also the default action in SidebarLayout.DefaultHeader. Because DefaultHeader's actions prop replaces the entire right-hand cluster, you must include <AppearanceSwitcher /> in your actions array if you customize the header and still want the switcher:

tsx
<SidebarLayout
  header={
    <SidebarLayout.DefaultHeader
      actions={[<NotificationBell key="bell" />, <AppearanceSwitcher key="appearance" />]}
    />
  }
/>

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>
  );
}