Vue 3 Theme Switcher

A highly customizable and easy-to-use theme switcher component for Vue 3 applications. Enhance user experience by providing them the ability to switch between different themes seamlessly.

Features

• 🎨 Multiple Themes: Supports various themes out of the box, and provides an easy way to add custom themes.
• ⚙️ Customizable: Offers extensive customization options to suit your application’s needs.
• 💻 Responsive: Ensures a consistent look and feel across all device sizes.
• 🛠 Easy to Install: Quick and straightforward installation process.

Installation

Install the package via npm:

npm install vue-theme-switcher

Usage

Import the component and register it in your Vue application:

import { createApp } from 'vue'
import App from './App.vue'
import ThemeSwitcher from 'vue-theme-switcher'

const app = createApp(App)
app.use(ThemeSwitcher)
app.mount('#app')

In your component:

<template>
  <ThemeSwitcher :themes="themes" />
</template>

<script>
  export default {
    data() {
      return {
        themes: {
          light: {
            backgroundColor: '#fff',
            color: '#000'
          },
          dark: {
            backgroundColor: '#333',
            color: '#fff'
          }
          // Add more themes as needed
        }
      }
    }
  }
</script>

API

• themes: An object where each key is a theme name, and the value is an object of CSS variables.

Themes

The component comes with a few predefined themes, but you can easily add your own by extending the themes prop.

Customization

To customize the component further, you can target its CSS classes in your stylesheet.

License

This project is licensed under the MIT License - see the LICENSE.md file for details.

Acknowledgments

• Vue.js team for the awesome framework
• All contributors who helped shape this project