vue-theme-switcher-directive

Vue 3 directive to switch css theme

Demo

Installation

You can use NPM or Yarn to add this plugin to your project

npm install vue-theme-switcher-directive
# or
yarn add vue-theme-switcher-directive

You need to install this plugin in you main.js

import { createApp } from "vue";
import VueThemeSwitcherDirective from "vue-theme-switcher-directive";

app.use(VueThemeSwitcherDirective, {
  themes: ["light", "dark"],
  theme: "light",
});

After installing the plugin, you will have the v-theme and v-theme-switcher directives, the global theme property and the global changeTheme method

Usage

Set styles in css file

.title_theme_default {
  font-family: "Balsamiq Sans", serif;
}

.title_theme_light {
  color: #3eaf7c;
}

.title_theme_dark {
  color: #ffffff;
}

or specify them in the options in the themes property

app.use(VueThemeSwitcherDirective, {
  themes: {
    default: {
      title: {
        fontFamily: '"Balsamiq Sans", serif',
      },
    },
    light: {
      title: {
        color: "#3eaf7c",
      },
    },
    dark: {
      title: {
        color: "#ffffff",
      },
    },
  },
  theme: "light",
});

v-theme

You can add the v-theme directive to the dom elements for which you want to change the theme.

<!-- App.vue -->
<h1 v-theme:title>...</h1>

v-theme-switcher

You can use the v-theme-switcher directive to change the theme.

<!-- App.vue -->
<button v-theme-switcher:dark>...</button>

Saving to permanent storage

Example of getting and saving the current theme to local storage

app.use(VueThemeSwitcherDirective, {
  themes: ["light", "dark"],
  theme: localStorage.getItem("theme") || "light",
  afterChanged: (theme) => {
    localStorage.setItem("theme", theme);
  },
});

Options

| Property | Description | | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | themes | Array of themes or object with styles | | theme | Initial theme | | getClass | A function that allows you to override the getting of the class Arguments: theme - the current theme arg - the argument passed to the v-theme directive The function should return a string | | afterChanged | Hook that is executed after changing the theme Arguments: theme - new theme prevTheme - previous theme |

License

The code is available under the MIT license.