ThemeToggle

An animated sun/moon toggle switch for controlling light/dark mode. Uses CSS transitions for smooth thumb movement and icon state changes.

Basic Usage

Demo

Current theme: ☀️ Light

<script setup>
import { ref } from 'vue'
import { ThemeToggle } from 'praxis-vue-ui'

const isDark = ref(false)
</script>

<template>
  <ThemeToggle v-model="isDark" />
  <p>Theme: {{ isDark ? 'Dark' : 'Light' }}</p>
</template>

Props

Props

Prop	Type	Default	Description
modelValue	boolean	false	Current state of the toggle. true = dark mode, false = light mode. Use with v-model.

Emits

Emits

Event	Payload	Description
update:modelValue	boolean	Emitted when the toggle is clicked. Value is the new boolean state.
toggle	boolean	Also emitted on toggle. Useful for triggering global theme logic without v-model.

Usage with Dark Mode

Pair ThemeToggle with a global dark mode state manager. A common pattern:

// composables/useTheme.ts
import { ref, watch } from 'vue'

const isDark = ref(false)

export function useTheme() {
  const toggle = (val: boolean) => {
    isDark.value = val
    document.documentElement.classList.toggle('dark', val)
  }
  return { isDark, toggle }
}

<template>
  <ThemeToggle v-model="isDark" @toggle="toggle" />
</template>