Mode toggle

The previews on this page are controlled, so they show the mode you choose beside the toggle and leave this page as it is. This site has its own mode switch.

DefaultCopy Anchor Link

The toggle reads the page's mode from <html>, sets it, and remembers it.

import { ModeToggle } from "@cadence-clinical/ui";

<ModeToggle />;

In a headerCopy Anchor Link

In a header with other icon buttons, use the ghost variant, as the header's own buttons do.

import { AppShellHeader, ModeToggle } from "@cadence-clinical/ui";

<AppShellHeader>
  {/* The breadcrumb and the page's title come first. */}
  <div className="ml-auto">
    <ModeToggle variant="ghost" />
  </div>
</AppShellHeader>;

ControlledCopy Anchor Link

With value, the toggle shows the mode it is given and calls onValueChange with the one chosen. It does not change the page or remember anything, so the mode is yours to apply. Use this when your app keeps its settings somewhere else, such as a reader's profile.

"use client";

import { ModeToggle, type Mode } from "@cadence-clinical/ui";
import { useState } from "react";

export function ProfileModeToggle() {
  const [mode, setMode] = useState<Mode>("system");
  return <ModeToggle value={mode} onValueChange={setMode} />;
}

Other wordsCopy Anchor Link

labels replaces the button's name and the names of the modes. The words below are placeholders, not a translation.

<ModeToggle labels={{ trigger: "Display mode", light: "Day", dark: "Night", system: "Device" }} />