Skip to content
Ben Hodgson

Search

Theme and tooltips

Theme toggleLink to this section

ThemeToggle cycles the system, light and dark themes. The choice is saved, and every toggle on the page stays in step, including the one in this site’s header.

<ThemeToggle />

The theme is set on the root element: data-theme is the light or dark in use, and data-theme-choice is what the reader picked. In a browser-only app, call applyStoredTheme() before the first render. On server-rendered pages, put themeScript in an inline <script> in <head>, so the page draws in the right theme. To build your own control, use storedTheme() and setTheme(choice).

TooltipLink to this section

Tooltip shows a hint while its trigger is hovered or focused from the keyboard; Escape hides it. Screen readers don’t hear it, so give the trigger a label that says the same.

<Tooltip content="Copies the link" align="start">
<Button variant="secondary" aria-label="Copy link. Copies the link">
  Copy link
</Button>
</Tooltip>

design-system is a Ben Hodgson projectGitHub