How to create a theme switcher in Vue

<script setup>
import { ref, onMounted, watch } from 'vue'

const themes = {
  light: {
    '--bg-color': '#ffffff',
    '--text-color': '#333333',
    '--primary-color': '#0d6efd',
    '--card-bg': '#f8f9fa'
  },
  dark: {
    '--bg-color': '#1a1a1a',
    '--text-color': '#ffffff',
    '--primary-color': '#0d6efd',
    '--card-bg': '#2d2d2d'
  },
  blue: {
    '--bg-color': '#e3f2fd',
    '--text-color': '#0d47a1',
    '--primary-color': '#1976d2',
    '--card-bg': '#bbdefb'
  },
  green: {
    '--bg-color': '#e8f5e9',
    '--text-color': '#1b5e20',
    '--primary-color': '#388e3c',
    '--card-bg': '#c8e6c9'
  }
}

const currentTheme = ref('light')

const applyTheme = (themeName) => {
  const theme = themes[themeName]
  const root = document.documentElement

  Object.entries(theme).forEach(([property, value]) => {
    root.style.setProperty(property, value)
  })
}

const setTheme = (themeName) => {
  currentTheme.value = themeName
  applyTheme(themeName)
  localStorage.setItem('selectedTheme', themeName)
}

onMounted(() => {
  const savedTheme = localStorage.getItem('selectedTheme') || 'light'
  setTheme(savedTheme)
})
</script>

<template>
  <div class='app'>
    <div class='theme-switcher'>
      <button
        v-for='(theme, name) in themes'
        :key='name'
        @click='setTheme(name)'
        :class="{ active: currentTheme === name }"
      >
        {{ name.charAt(0).toUpperCase() + name.slice(1) }}
      </button>
    </div>

    <div class='content'>
      <h1>Theme Switcher Demo</h1>
      <div class='card'>
        <p>Current theme: <strong>{{ currentTheme }}</strong></p>
        <button class='primary-btn'>Primary Button</button>
      </div>
    </div>
  </div>
</template>

<style>
:root {
  --bg-color: #ffffff;
  --text-color: #333333;
  --primary-color: #0d6efd;
  --card-bg: #f8f9fa;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: all 0.3s ease;
  margin: 0;
  font-family: system-ui, -apple-system, sans-serif;
}

.app {
  min-height: 100vh;
  padding: 2rem;
}

.theme-switcher {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.theme-switcher button {
  padding: 0.5rem 1rem;
  border: 2px solid var(--primary-color);
  background: transparent;
  color: var(--text-color);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 0.2s;
}

.theme-switcher button.active {
  background: var(--primary-color);
  color: white;
}

.card {
  background: var(--card-bg);
  padding: 1.5rem;
  border-radius: 0.5rem;
}

.primary-btn {
  background: var(--primary-color);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 0.375rem;
  cursor: pointer;
  margin-top: 1rem;
}
</style>