Theme Toggle

A simple but useful helper component that you can use as a theme toggle.

Usage

Preview
Code

1
---
2
import { ThemeToggle, Icon } from 'studiocms:ui/components';
3
---
4

5
<ThemeToggle>
6
  <div slot='dark'>
7
    {/* Content in here will be displayed when the theme is dark! */}
8
    <Icon name='moon' width={24} height={24} slot="dark" />
9
  </div>
10
  <div slot='light'>
11
    {/* Content in here will be displayed when the theme is light! */}
12
    <Icon name='sun' width={24} height={24} slot="light" />
13
  </div>
14
</ThemeToggle>

Extending the Toggle

The <ThemeToggle /> component is really just a button with two slots. You can pass all props from the <Button /> component and they will apply to the toggle.