1.1.3 • Published 3 years ago
vue-theme-manager v1.1.3
vue-theme-manager
A vuejs plugin for Managing theme(s) colors in the whole of your Vue web app. It has support for Vue 2 and Vue 3 npm
Installation
npm i vue-theme-manager
Guide
For Vue 2x and Vue 3x
//main.js
...
import VueThemeManager from 'vue-theme-manager'
...
let themeOptions = {
activate:'light',
styles:{
light:{
backgroundColor:'#ededed',
textColor:'#101010'
},
dark:{
backgroundColor:'#1111',
textColor:'#ededed'
}
}
}
Vue.use(VueThemeManager,themeOptions);
...
For Nuxt
//plugins/vue_theme_manager.js
import Vue from 'vue'
import VueThemeManager from 'vue-theme-manager'
let themeOptions = {
activate:'light',
styles:{
light:{
backgroundColor:'#ededed',
textColor:'#101010'
},
dark:{
backgroundColor:'#1111',
textColor:'#ededed'
}
}
}
Vue.use(VueThemeManager,themeOptions);
//nuxt.config.js
plugins:[
...
{src:'@plugins/vue_theme_manager',mode:'client'}
...
]
Plugin Options
Plugin accepts object
or jsonstring
during initialization with props This is Optional:
Vue.use(VueThemeManager,{activate:,styles})
activate:'string'
---this will be the activated theme when plugin is initialized. Note default theme isdefault
This is optionalstyles:object
---this is anobject
containig theme options that will be available during plugin initialization. Note "default" theme option is always added to this object This is Optional
Template Usage
For Vue2x and Vue3x
App.vue <!-- root app !-->
<!-- register theme-manager-plugin-globally for all component template !-->
<div id="app" :style="VueThemeManager">
...
<router>
</router>
...
</div>
<style>
...
</style>
For Nuxt
/layout/default.vue <!-- root app !-->
<!-- register theme-manager-plugin-globally for all component template !-->
<nuxt :style="VueThemeManager" />
Now use in Any Component Like this Both in Nuxt and Vue Projects
anycomponent.vue
Methods
//this returns object
this.console.log(JSON.stringify(this.$AppTheme.theme,null,2));
//this returns object
let themeName = 'light'
this.console.log(JSON.stringify(this.$AppTheme.theme[themeName],null,2))
/*result
{
textColor:'#ededed,
backgroundColor:'#101010'
}
*/
// we can still go further
let themeName = 'light'
this.console.log(JSON.stringify(this.$AppTheme.theme[themeName].textColor,null,2))
//returns '#ededed'
this.console.log(this.$AppTheme.textColor)
//returns currently selected theme textColor '#ededed'
/*This will be called once Theme Plugin has been initialized
This can be used in your App.vue or default.vue file or any other component
you wish to use it in
*/
this.$AppTheme.onReady((themeExistInDeviceDB)=>{
if(themeExistInDeviceDB){
this.$AppTheme.setThemeFromStorage();//this is to set theme from db
}
});
//This will be called when New Theme has been Selected
this.$AppTheme.onThemeChanged((themeName,themeOptions)=>{
...
//do what ever you want with the results
})
this.$AppTheme.addTheme({textColor:'red',backgroundColor:'gold'},"splash",true);
//this.$AppTheme.addTheme({options},themeName,activate)
/*
*options = "object" or "json-string" @required
*themeName = "String" intended name for theme @optional default is "default"
*activate = boolean --activate theme or not
*/
this.$AppTheme.saveTheme(); //save theme to db
//this can also be changed like this
this.$AppTheme.addTheme(...).saveTheme();
this.$AppTheme.activateTheme(themeName);
//where themeName is a `String` which is already contained in the themeOptions
this.$AppTheme.getTheme(themeName,array);
//returns object of themeOptions
//themeName = name of theme to get options from @required
array = themeoptions to be gotten like ['textColor','backgroundColor'] @optional
///generally data can be accessed like this
this.$AppTheme.getTheme('splash',['textColor']).texColor
//result 'red'
Points to Note
- camel case
textColor
are changed to kebal casetext-color
only for css variables - css variables are dynamic and should be accessed like this
var(--text-color)
- Try as much as possible to name your theme options with camel case
textColor, accentColor, backgroundColor
- css variables acess only the currently selected theme