Skip to content

Commit 4710860

Browse files
XceldeveloperXceldeveloper
committed
Updated documentation
1 parent e9e08ac commit 4710860

File tree

2 files changed

+223
-2
lines changed

2 files changed

+223
-2
lines changed

‎README.md

Lines changed: 222 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,222 @@
1-
# vue-theme-manager
1+
## vue-theme-manager
2+
3+
> A vuejs plugin for Managing theme(s) colors in the whole of your Vue
4+
> web app. It has support for Vue 2 and Vue 3
5+
[npm](https://www.npmjs.com/package/vue-theme-manager)
6+
7+
## Installation
8+
9+
10+
11+
> npm i vue-theme-manager
12+
13+
## Guide
14+
15+
> #### For Vue 2x and Vue 3x
16+
17+
```javascript
18+
//main.js
19+
...
20+
import VueThemeManager from 'vue-theme-manager
21+
...
22+
let themeOptions = {
23+
activate:'light',
24+
styles:{
25+
light:{
26+
backgroundColor:'#ededed',
27+
textColor:'#101010'
28+
},
29+
dark:{
30+
backgroundColor:'#1111',
31+
textColor:'#ededed'
32+
}
33+
}
34+
}
35+
36+
Vue.use(VueThemeManager,themeOptions);
37+
38+
...
39+
```
40+
41+
> #### For Nuxt 2x
42+
43+
```javascript
44+
//plugin/vue_theme_manager.js
45+
import Vue from 'vue'
46+
import VueThemeManager from 'vue-theme-manager'
47+
48+
let themeOptions = {
49+
activate:'light',
50+
styles:{
51+
light:{
52+
backgroundColor:'#ededed',
53+
textColor:'#101010'
54+
},
55+
dark:{
56+
backgroundColor:'#1111',
57+
textColor:'#ededed'
58+
}
59+
}
60+
}
61+
62+
Vue.use(VueThemeManager,themeOptions);
63+
```
64+
65+
```
66+
//nuxt.config.js
67+
plugins:{
68+
...
69+
70+
{src:'@plugin/vue_theme_manager',mode:'client'}
71+
72+
...
73+
}
74+
```
75+
76+
>
77+
78+
## Plugin Options
79+
Plugin accepts `object` during initialization with props [This is Optional]:
80+
81+
```javascript
82+
Vue.use(VueThemeManager,{activate:'',styles{}})
83+
```
84+
85+
1. `activate:'string'` ---this will be the activated theme when plugin is initialized. Note default theme is `default`[This is optional]
86+
2. `styles:object` ---this is an `object` containig theme options that will be available during plugin initialization. Note "default" theme option is always added to this object [This is Optional]
87+
88+
## Template Usage
89+
90+
91+
> For Vue2x and Vue3
92+
93+
```HTML
94+
App.vue <! root app !-->
95+
96+
<!-- register theme-manager-plugin-globally for all component template !-->
97+
<div id="app" :style="VueThemeManager">
98+
...
99+
<router>
100+
</router>
101+
...
102+
</div>
103+
<style>
104+
...
105+
</style>
106+
```
107+
108+
> For Nuxt
109+
110+
```HTML
111+
/layout/default.vue <! root app !-->
112+
113+
<!-- register theme-manager-plugin-globally for all component template !-->
114+
<nuxt :style="VueThemeManager" />
115+
```
116+
117+
```HTML
118+
anycomponent.vue
119+
<template>
120+
<div class="wrapper">
121+
Hello World
122+
123+
<span :style="textColor:'var(--accent-color)'">
124+
I am using accent color
125+
</span>
126+
127+
<!--this access the currently selected theme option !-->
128+
<span :style="textColor:$AppTheme.theme.accentColor">
129+
I am using accent color
130+
</span>
131+
132+
<span :style="textColor:$AppTheme.theme['themeName'].accentColor">
133+
I am using accent color
134+
</span>
135+
136+
</div>
137+
</template>
138+
<style>
139+
#app{
140+
background-color:var(--background-color);
141+
text-color:var(--text-color);
142+
...
143+
}
144+
</style>
145+
<!-- as you can see here theme options are generally dynamic !-->
146+
```
147+
148+
## Methods
149+
150+
151+
```javascript
152+
//this returns object
153+
this.console.log(JSON.stringify(this.$AppTheme.theme,null,2));
154+
155+
156+
157+
//this returns object
158+
let themeName = 'light'
159+
this.console.log(JSON.stringify(this.$AppTheme.theme[themeName],null,2))
160+
/*result
161+
{
162+
textColor:'#ededed,
163+
backgroundColor:'#101010'
164+
}
165+
*/
166+
// we can still go further
167+
let themeName = 'light'
168+
this.console.log(JSON.stringify(this.$AppTheme.theme[themeName].textColor,null,2))
169+
//returns '#ededed'
170+
171+
this.console.log(JSON.stringify(this.$AppTheme.textColor,null,2))
172+
//returns currently selected theme textColor '#ededed'
173+
174+
175+
176+
/*This will be called once Theme Plugin has been initialized
177+
This can be used in your App.vue or default.vue file or any other component
178+
you wish to use it in
179+
*/
180+
this.$AppTheme.onReady((themeExistInDeviceDB)=>{
181+
if(themeExistInDeviceDB){
182+
this.$AppTheme.setThemeFromStorage();
183+
}
184+
});
185+
186+
187+
188+
//This will be called when New Theme has been Selected
189+
this,$AppTheme.onThemeChanged((themeName,themeOptions)=>{
190+
...
191+
//do what ever you want with the results
192+
})
193+
194+
195+
this.$AppTheme.addTheme({textColor:'red',backgroundColor:'gold','splash',true});
196+
//this.$AppTheme.addTheme({options,themeName,activate}})
197+
/*
198+
*options = "object" or "json-string" @required
199+
*themeName = "String" intended name for theme @optional default is "default"
200+
*activate = boolean --activate theme or not
201+
*/
202+
this.$AppTheme.saveTheme(); //save theme to db ..this can be changed like this
203+
this.$AppTheme.addTheme(...).saveTheme();
204+
205+
this.$AppTheme.activateTheme(themeName);
206+
//where themeName is a `String` which is already contained in the themeOptions
207+
208+
this.$AppTheme.getTheme(array,themeName);
209+
//returns object of themeOptions
210+
array = themeoptions to be gotten like ['textColor','backgroundColor']
211+
themeName = name of theme to get options from
212+
///generally data can be accessed like this
213+
this.$AppTheme.getTheme(['textColor'],'splash').texColor
214+
//result 'red'
215+
```
216+
217+
## Points to Note
218+
219+
1. camel case `textColor` are changed to kebal case `text-color` only for css variables
220+
2. css variables are dynamic and should be accessed like this `var(--text-color)`
221+
3. Try as much as possible to name your theme options with camel case `textColor, accentColor, backgroundColor`
222+
4. css variables acess only the currently selected theme

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-theme-manager",
3-
"version": "1.1.1",
3+
"version": "1.1.2",
44
"description": "A vue plugin to manage one or more color themes in your web app",
55
"main": "index.js",
66
"scripts": {

0 commit comments

Comments
 (0)