Theme toggle

The theme-toggle component is a stylish button to switch between light and dark themes in your site. It uses the browser's storage to maintain its state during navigation and allow changes to be applied across tabs.

<x-theme-toggle size="md" class="hover:text-warning duration-250"/>

#Types

The appearance of the toggle and the animation between its 2 states can be changed with the type attribute.

<x-theme-toggle size="lg" type="default"/>
<x-theme-toggle size="lg" type="eclipse"/>
<x-theme-toggle size="lg" type="classic"/>
<x-theme-toggle size="lg" type="expand"/>
<x-theme-toggle size="lg" type="around"/>
<x-theme-toggle size="lg" type="horizon"/>
<x-theme-toggle size="lg" type="inner-moon"/>
<x-theme-toggle size="lg" type="within"/>
<x-theme-toggle size="lg" type="light-bulb"/>

#Mirrored toggles

Toggles can be mirrored horizontally with the mirrored attribute.

<x-theme-toggle mirrored size="lg" type="default"/>
<x-theme-toggle mirrored size="lg" type="eclipse"/>
<x-theme-toggle mirrored size="lg" type="classic"/>
<x-theme-toggle mirrored size="lg" type="expand"/>
<x-theme-toggle mirrored size="lg" type="around"/>
<x-theme-toggle mirrored size="lg" type="horizon"/>
<x-theme-toggle mirrored size="lg" type="inner-moon"/>
<x-theme-toggle mirrored size="lg" type="within"/>
<x-theme-toggle mirrored size="lg" type="light-bulb"/>

#Size

Use the size attribute or a size-{number} class to change the size of the toggle.

<x-theme-toggle size="xl"/>
<x-theme-toggle size="lg"/>
<x-theme-toggle size="md"/>
<x-theme-toggle size="sm"/>
<x-theme-toggle size="xs"/>
<x-theme-toggle class="size-15"/>