Playground

Turn the options and watch it change. The code below changes with it, in whichever framework you are using — copy it and you have what is on the screen.

Live

import { createThemeToggle } from '@devix-labs/theme-toggle';
import '@devix-labs/theme-toggle/styles.css';

createThemeToggle(document.querySelector('#target'), {
  variant: 'switch',
  labels: true
});

import { ThemeToggle } from '@devix-labs/theme-toggle/react';
import '@devix-labs/theme-toggle/styles.css';

<ThemeToggle
  variant="switch"
  labels
/>

<script setup>
import { ThemeToggle } from '@devix-labs/theme-toggle/vue';
import '@devix-labs/theme-toggle/styles.css';
</script>

<template>
  <ThemeToggle
  variant="switch"
  labels
/>
</template>

<script>
  import { themeToggle } from '@devix-labs/theme-toggle/svelte';
  import '@devix-labs/theme-toggle/styles.css';
</script>

<div use:themeToggle={{
  variant: 'switch',
  labels: true
}} />

Every option here is in the documentation, along with the ones that are not worth a control.