vue2-dynamic-theme v0.0.13

vue2-dynamic-theme

A dynamic theme plugin for Vue2 projects that allows for runtime color theming

Installation

Direct

For direct script installation, include vue2-dynamic-theme after the vue script.

<script src="vue.js"></script>
<script src="vue2-dynamic-theme.min.js"></script>

NPM

npm install vue2-dynamic-theme

Install via Vue.use():

import Vue from 'vue'
import Vue2DynamicTheme from 'vue2-dynamic-theme'

Vue.use(Vue2DynamicTheme, {
  theme: {
    primary: "#fcba03",
    secondary: "#039dfc"
  },
  autoLogThemePalette: true // set to true by default
})

CSS Usage

This plugin provides dynamic theming through uniquely constructed CSS class templates.

These CSS classes are constructed using the following rules:

• text-, bg-, and border- prefixes (corresponding with the CSS properties color, background-color, and border-color, respectively)

• user defined theme color suffixes (primary and secondary in the NPM install example above) with an optional -light or -dark variant

Example CSS classes would be bg-primary, text-secondary-light, border-primary-dark, etc.

• Note - the light and dark variants for each color are automatically generated by this plugin.

Programmatic Usage

Instance Properties / Methods

this.$themePalette example:

Following the above example with a primary and secondary color defined in the theme object, the following colors would be accessible via the theme palette instance object:

  this.$themePalette.primary.base, this.$themePalette.primary.light, this.$themePalette.primary.dark, 
  this.$themePalette.secondary.base, this.$themePalette.secondary.light, and this.$themePalette.secondary.dark

• This theme palette object is dynamic and changes depending on the theme configuration you use.

• Note - the base color variant is accessed with the .base property when programmatically accessing the theme palette.

Theme Configuration

A theme can be defined when the plugin is installed (as demonstrated in the NPM install section) or dynamically set/changed using the provided Vue instance method: this.$generateThemePaletteFromTheme({themeObject}).

The theme object must be single depth, but you can define as many colors as desired. The passed color values can be HEX, RGB, RGBA, HSL, or HSLA (they are all converted to HSLA).

Example theme pattern below (theme color names can be anything):

theme: {
  primary: "hsl(120, 100%, 50%)",
  secondary: "#fcba03",
  colorThreeName: "rgb(252, 57, 3)",
  colorFourName: "{color-four-value}",
  etc..
}

By default, the resulting theme palette is logged to the console. This can be disabled by setting the autoLogThemePalette parameter of the install options to false.

License

MIT