v-theme

Plugin for convenient organization of your style variables.

Peer Dependencies: vue, vuex

Install

npm install @chepuhasasha/v-theme

Сreate a themes

Creating a theme object from a template.

{
  "YOUR_VARIABLE": "VALUE"
}

Choose variable names like in css, but without using "--".

Create the file structure

themes/
├---  red.ts/js
├---  blue.ts/js
└---  index.ts/js

red.js/ts

export default {
  primary: "red",
};

blue.js/ts

export default {
  primary: "blue",
};

index.js/ts

import red from "./red.js";
import blue from "./blue.js";

export default {
  red,
  blue,
};

Register the plugin in main.js/ts

import { createApp } from "vue";
import App from "./App.vue";
import VTheme from "@chepuhasasha/v-theme";
import themes from "./themes";

createApp(App)
  .use(VTheme, {
    defaultTheme: "blue",
    themes,
  })
  .mount("#app");

On initialization, the plugin will set the defaultTheme.

Set a Theme

<template>
  <h1>{{ theme }}</h1>
  <button @click="changeTheme">Change theme</button>
</template>

<script lang="ts" setup>
  import { computed } from "vue";
  import { useStore } from "vuex";
  import { key } from "@chepuhasasha/v-theme";

  const store = useStore(key);

  const theme = computed(() => store.getters.THEME);

  const changeTheme = () => {
    if (theme.value === "blue") {
      store.dispatch("setTheme", "red");
      return;
    }
    store.dispatch("setTheme", "blue");
  };
</script>

<style>
  h1 {
    color: var(--primary);
  }
</style>