Theme Toggle

A button that switches between light and dark themes.

Preview · Theme Toggle

Code

HTML · @primus/ui-core
React
Angular

<div class="hstack">
  <button class="icon outline" title="Toggle theme" style="width:2.25rem;height:2.25rem">☀</button>
  <span style="font-size:0.8rem;color:var(--muted-foreground)">Click to toggle light / dark mode</span>
</div>

import { PrimusThemeToggle, usePrimusTheme } from 'primus-react-ui';

{/* Drop-in */}
<PrimusThemeToggle />

{/* Manual */}
function Header() {
  const { theme, toggleTheme } = usePrimusTheme();
  return (
    <button className="icon outline" onClick={toggleTheme}>
      {theme === 'dark' ? '☀' : '☾'}
    </button>
  );
}

<primus-theme-toggle></primus-theme-toggle>

Props

Prop	Type	Default	Description
`(toggled)`	`EventEmitter<string>`	—	Emits new theme

Version history

See the Changelog for version history and breaking changes.

Code​

Props​

Code

Props