Theme Toggle

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

Usage

Preview
Code

1
---
2
import { ThemeToggle } from '@studiocms/ui/components';
3
import Icon from '@studiocms/ui/utils/Icon.astro';
4
---
5

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