useTheme

<script setup lang="ts">
const { primary, neutral, mode } = useTheme()

// Change the primary color
primary.value = 'blue'

// Change the neutral color
neutral.value = 'zinc'

// Change the color mode
mode.value = 'dark'
</script>

<script setup lang="ts">
const { font, radius, fonts, radiuses } = useTheme()

// Change the font
font.value = 'Inter'

// Adjust the border radius (in rem)
radius.value = 0.5

// Get all available options
console.log('Available fonts:', fonts)
console.log('Available radiuses:', radiuses)
</script>

<script setup lang="ts">
const { icon, icons } = useTheme()

// Switch to the Phosphor icon set
icon.value = 'phosphor'

// List all icon set options
console.log(icons)
// [
//   { label: 'Lucide', icon: 'i-lucide-feather', value: 'lucide' },
//   { label: 'Phosphor', icon: 'i-ph-phosphor-logo', value: 'phosphor' },
//   { label: 'Tabler', icon: 'i-tabler-brand-tabler', value: 'tabler' }
// ]
</script>

<script setup lang="ts">
const {
  exportCSS,
  exportAppConfig,
  hasCSSChanges,
  hasAppConfigChanges
} = useTheme()

// Check whether there is custom configuration
if (hasCSSChanges.value) {
  const cssCode = exportCSS()
  console.log('CSS configuration:\n', cssCode)
}

if (hasAppConfigChanges.value) {
  const appConfigCode = exportAppConfig()
  console.log('App Config:\n', appConfigCode)
}
</script>

<script setup lang="ts">
const { resetTheme } = useTheme()

function handleReset() {
  if (confirm('Are you sure you want to reset the theme to its default settings?')) {
    resetTheme()
  }
}
</script>

<template>
  <UButton @click="handleReset" color="neutral" variant="outline">
    Reset theme
  </UButton>
</template>

<script setup lang="ts">
const { setBlackAsPrimary } = useTheme()

// Enable black primary color mode
// Use black as the primary color in light mode and white in dark mode
setBlackAsPrimary(true)
</script>