vue-multiple-themes 2.0.2 → 3.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +28 -24
- package/dist/vue-multiple-themes.esm.js +15 -12
- package/dist/vue-multiple-themes.min.js +1 -1
- package/dist/vue-multiple-themes.ssr.js +33 -28
- package/package.json +17 -2
- package/readme.md +86 -20
- package/src/vue-multiple-themes.vue +8 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,24 +1,28 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
-
|
|
10
|
-
-
|
|
11
|
-
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
-
|
|
22
|
-
-
|
|
23
|
-
|
|
24
|
-
|
|
1
|
+
### Changelog
|
|
2
|
+
|
|
3
|
+
#### Version 3.0.0
|
|
4
|
+
- Refactored codebase for enhanced maintainability and readability.
|
|
5
|
+
- Revised and updated the README document to improve clarity and provide more comprehensive guidance.
|
|
6
|
+
- Addressed and resolved various bugs to ensure smoother operation.
|
|
7
|
+
|
|
8
|
+
#### Version 2.0.0
|
|
9
|
+
- Conducted extensive code updates to incorporate new features and optimizations.
|
|
10
|
+
- Resolved previously identified bugs to enhance the overall functionality.
|
|
11
|
+
- Discontinued the use of font icons in favor of improved code quality and efficiency.
|
|
12
|
+
|
|
13
|
+
#### Version 1.5.1
|
|
14
|
+
- Corrected the icon path to ensure accurate rendering.
|
|
15
|
+
- Implemented GitHub Actions for automated workflows and processes.
|
|
16
|
+
- Made stylistic adjustments to address and fix layout issues.
|
|
17
|
+
|
|
18
|
+
#### Version 1.0.8
|
|
19
|
+
- Introduced font icon support for enhanced visual elements.
|
|
20
|
+
- Fixed a bug that occurred after routing changes when the component is mounted.
|
|
21
|
+
- Established a persistent array to hold three constant color values for theme management.
|
|
22
|
+
- Added new properties to allow for custom styling configurations.
|
|
23
|
+
|
|
24
|
+
#### Version 1.0.1
|
|
25
|
+
- Expanded the documentation to provide users with detailed guidance on using the software.
|
|
26
|
+
- Included a license file to clarify the terms under which the software is distributed.
|
|
27
|
+
|
|
28
|
+
The revisions across these versions reflect continuous improvements in functionality, usability, and code quality, aligning with user feedback and technological advancements.
|
|
@@ -28,16 +28,9 @@ var script = {
|
|
|
28
28
|
changeThemeOff: {
|
|
29
29
|
default: true,
|
|
30
30
|
type: Boolean
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
data() {
|
|
35
|
-
return {
|
|
36
|
-
theme: this.defaultTheme,
|
|
37
|
-
counter: 0,
|
|
38
|
-
themeName: this.defaultTheme,
|
|
39
|
-
showChangeTheme: this.changeThemeOff,
|
|
40
|
-
themeIcons: [{
|
|
31
|
+
},
|
|
32
|
+
themeIcons: {
|
|
33
|
+
default: () => [{
|
|
41
34
|
name: "dark",
|
|
42
35
|
width: "24px",
|
|
43
36
|
height: "24px",
|
|
@@ -61,7 +54,17 @@ var script = {
|
|
|
61
54
|
path: "M4 20H10.9433M10.9433 20H11.0567M10.9433 20C10.9622 20.0002 10.9811 20.0002 11 20.0002C11.0189 20.0002 11.0378 20.0002 11.0567 20M10.9433 20C7.1034 19.9695 4 16.8468 4 12.9998V8.92285C4 8.41305 4.41305 8 4.92285 8H17.0767C17.5865 8 18 8.41305 18 8.92285V9M11.0567 20H18M11.0567 20C14.8966 19.9695 18 16.8468 18 12.9998M18 9H19.5C20.8807 9 22 10.1193 22 11.5C22 12.8807 20.8807 14 19.5 14H18V12.9998M18 9V12.9998M15 3L14 5M12 3L11 5M9 3L8 5",
|
|
62
55
|
stroke: "#000000",
|
|
63
56
|
strokeWidth: "2"
|
|
64
|
-
}]
|
|
57
|
+
}],
|
|
58
|
+
type: Array
|
|
59
|
+
}
|
|
60
|
+
},
|
|
61
|
+
|
|
62
|
+
data() {
|
|
63
|
+
return {
|
|
64
|
+
theme: this.defaultTheme,
|
|
65
|
+
counter: 0,
|
|
66
|
+
themeName: this.defaultTheme,
|
|
67
|
+
showChangeTheme: this.changeThemeOff
|
|
65
68
|
};
|
|
66
69
|
},
|
|
67
70
|
|
|
@@ -284,7 +287,7 @@ var __vue_staticRenderFns__ = [];
|
|
|
284
287
|
|
|
285
288
|
const __vue_inject_styles__ = function (inject) {
|
|
286
289
|
if (!inject) return;
|
|
287
|
-
inject("data-v-
|
|
290
|
+
inject("data-v-e3caa164_0", {
|
|
288
291
|
source: ":root{--app-background-color:#ffffff;--app-title-color:#333333;--app-subtitle-color:#555555}[theme=dark]{--app-background-color:#333333;--app-title-color:#ffffff;--app-subtitle-color:#dddddd}[theme=sepia]{--app-background-color:#d0bc91;--app-title-color:#8a6c44;--app-subtitle-color:#5f4938}.app-background{background-color:var(--app-background-color)}.app-title{color:var(--app-title-color)}.app-subtitle{color:var(--app-subtitle-color);padding-top:10px}.change-theme-box{cursor:pointer;color:var(--app-subtitle-color);font-size:1em;font-weight:400}",
|
|
289
292
|
map: undefined,
|
|
290
293
|
media: undefined
|
|
@@ -1 +1 @@
|
|
|
1
|
-
var VueMultipleThemes=function(e){"use strict";var t={name:"VueMultipleThemes",props:{defaultTheme:{default:"light",type:String},themeColorList:{default:function(){return["light","dark","sepia"]},type:Array},extraClass:{default:"",type:String},changeThemeOff:{default:!0,type:Boolean}
|
|
1
|
+
var VueMultipleThemes=function(e){"use strict";var t={name:"VueMultipleThemes",props:{defaultTheme:{default:"light",type:String},themeColorList:{default:function(){return["light","dark","sepia"]},type:Array},extraClass:{default:"",type:String},changeThemeOff:{default:!0,type:Boolean},themeIcons:{default:function(){return[{name:"dark",width:"24px",height:"24px",viewBox:"0 0 24 24",path:"M13 6V3M18.5 12V7M14.5 4.5H11.5M21 9.5H16M15.5548 16.8151C16.7829 16.8151 17.9493 16.5506 19 16.0754C17.6867 18.9794 14.7642 21 11.3698 21C6.74731 21 3 17.2527 3 12.6302C3 9.23576 5.02061 6.31331 7.92462 5C7.44944 6.05072 7.18492 7.21708 7.18492 8.44523C7.18492 13.0678 10.9322 16.8151 15.5548 16.8151Z",stroke:"#ffffff",strokeWidth:"2"},{name:"light",width:"24px",height:"24px",viewBox:"0 0 24 24",path:"M12 3V4M12 20V21M4 12H3M6.31412 6.31412L5.5 5.5M17.6859 6.31412L18.5 5.5M6.31412 17.69L5.5 18.5001M17.6859 17.69L18.5 18.5001M21 12H20M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z",stroke:"#000000",strokeWidth:"2"},{name:"sepia",width:"24px",height:"24px",viewBox:"0 0 24 24",path:"M4 20H10.9433M10.9433 20H11.0567M10.9433 20C10.9622 20.0002 10.9811 20.0002 11 20.0002C11.0189 20.0002 11.0378 20.0002 11.0567 20M10.9433 20C7.1034 19.9695 4 16.8468 4 12.9998V8.92285C4 8.41305 4.41305 8 4.92285 8H17.0767C17.5865 8 18 8.41305 18 8.92285V9M11.0567 20H18M11.0567 20C14.8966 19.9695 18 16.8468 18 12.9998M18 9H19.5C20.8807 9 22 10.1193 22 11.5C22 12.8807 20.8807 14 19.5 14H18V12.9998M18 9V12.9998M15 3L14 5M12 3L11 5M9 3L8 5",stroke:"#000000",strokeWidth:"2"}]},type:Array}},data:function(){return{theme:this.defaultTheme,counter:0,themeName:this.defaultTheme,showChangeTheme:this.changeThemeOff}},methods:{themeColor:function(e){this.theme="".concat(e),document.body.classList.add("app-background"),document.documentElement.setAttribute("theme","".concat(e)),localStorage.setItem("theme",JSON.stringify("".concat(e)))},changeTheme:function(){this.counter=this.counter+1,this.counter===this.themeColorList.length&&(this.counter=0),this.themeName=this.themeColorList[this.counter],this.themeColor(this.themeName)}},mounted:function(){(this.showChangeTheme||this.themeColor(this.defaultTheme),localStorage.getItem("theme")&&this.showChangeTheme)?(this.theme=JSON.parse(localStorage.getItem("theme")),document.documentElement.setAttribute("theme",this.theme),this.themeName=this.theme,this.themeColor(this.theme)):(this.theme=this.defaultTheme,this.themeName=this.theme,this.themeColor(this.theme))}};function o(e,t,o,n,i,s,a,r,h,l){"boolean"!=typeof a&&(h=r,r=a,a=!1);const c="function"==typeof o?o.options:o;let d;if(e&&e.render&&(c.render=e.render,c.staticRenderFns=e.staticRenderFns,c._compiled=!0,i&&(c.functional=!0)),n&&(c._scopeId=n),s?(d=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,h(e)),e&&e._registeredComponents&&e._registeredComponents.add(s)},c._ssrRegister=d):t&&(d=a?function(e){t.call(this,l(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,r(e))}),d)if(c.functional){const e=c.render;c.render=function(t,o){return d.call(o),e(t,o)}}else{const e=c.beforeCreate;c.beforeCreate=e?[].concat(e,d):[d]}return o}const n="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function i(e){return(e,t)=>function(e,t){const o=n?t.media||"default":e,i=a[o]||(a[o]={ids:new Set,styles:[]});if(!i.ids.has(e)){i.ids.add(e);let o=t.source;if(t.map&&(o+="\n/*# sourceURL="+t.map.sources[0]+" */",o+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t.map))))+" */"),i.element||(i.element=document.createElement("style"),i.element.type="text/css",t.media&&i.element.setAttribute("media",t.media),void 0===s&&(s=document.head||document.getElementsByTagName("head")[0]),s.appendChild(i.element)),"styleSheet"in i.element)i.styles.push(o),i.element.styleSheet.cssText=i.styles.filter(Boolean).join("\n");else{const e=i.ids.size-1,t=document.createTextNode(o),n=i.element.childNodes;n[e]&&i.element.removeChild(n[e]),n.length?i.element.insertBefore(t,n[e]):i.element.appendChild(t)}}}(e,t)}let s;const a={};var r=o({render:function(){var e=this,t=e.$createElement,o=e._self._c||t;return o("div",{staticClass:"vue-multiple-themes",class:e.extraClass},[e.showChangeTheme?o("span",{staticClass:"change-theme-box",on:{click:function(t){return e.changeTheme()}}},e._l(e.themeIcons,(function(t,n){return o("span",{key:n},[e.themeName===t.name?o("svg",{class:"icon-"+t.name,attrs:{width:t.width,height:t.height,viewBox:t.viewBox,fill:"none",xmlns:"http://www.w3.org/2000/svg"}},[o("path",{attrs:{d:t.path,stroke:t.stroke,"stroke-width":t.strokeWidth,"stroke-linecap":"round","stroke-linejoin":"round"}})]):e._e()])})),0):e._e()])},staticRenderFns:[]},(function(e){e&&e("data-v-e3caa164_0",{source:":root{--app-background-color:#ffffff;--app-title-color:#333333;--app-subtitle-color:#555555}[theme=dark]{--app-background-color:#333333;--app-title-color:#ffffff;--app-subtitle-color:#dddddd}[theme=sepia]{--app-background-color:#d0bc91;--app-title-color:#8a6c44;--app-subtitle-color:#5f4938}.app-background{background-color:var(--app-background-color)}.app-title{color:var(--app-title-color)}.app-subtitle{color:var(--app-subtitle-color);padding-top:10px}.change-theme-box{cursor:pointer;color:var(--app-subtitle-color);font-size:1em;font-weight:400}",map:void 0,media:void 0})}),t,void 0,!1,void 0,!1,i,void 0,void 0),h=function(e){h.installed||(h.installed=!0,e.component("VueMultipleThemes",r))},l={install:h},c=null;return"undefined"!=typeof window?c=window.Vue:"undefined"!=typeof global&&(c=global.Vue),c&&c.use(l),r.install=h,e.default=r,Object.defineProperty(e,"__esModule",{value:!0}),e}({});
|
|
@@ -30,6 +30,36 @@ var script = {
|
|
|
30
30
|
changeThemeOff: {
|
|
31
31
|
default: true,
|
|
32
32
|
type: Boolean
|
|
33
|
+
},
|
|
34
|
+
themeIcons: {
|
|
35
|
+
default: function _default() {
|
|
36
|
+
return [{
|
|
37
|
+
name: "dark",
|
|
38
|
+
width: "24px",
|
|
39
|
+
height: "24px",
|
|
40
|
+
viewBox: "0 0 24 24",
|
|
41
|
+
path: "M13 6V3M18.5 12V7M14.5 4.5H11.5M21 9.5H16M15.5548 16.8151C16.7829 16.8151 17.9493 16.5506 19 16.0754C17.6867 18.9794 14.7642 21 11.3698 21C6.74731 21 3 17.2527 3 12.6302C3 9.23576 5.02061 6.31331 7.92462 5C7.44944 6.05072 7.18492 7.21708 7.18492 8.44523C7.18492 13.0678 10.9322 16.8151 15.5548 16.8151Z",
|
|
42
|
+
stroke: "#ffffff",
|
|
43
|
+
strokeWidth: "2"
|
|
44
|
+
}, {
|
|
45
|
+
name: "light",
|
|
46
|
+
width: "24px",
|
|
47
|
+
height: "24px",
|
|
48
|
+
viewBox: "0 0 24 24",
|
|
49
|
+
path: "M12 3V4M12 20V21M4 12H3M6.31412 6.31412L5.5 5.5M17.6859 6.31412L18.5 5.5M6.31412 17.69L5.5 18.5001M17.6859 17.69L18.5 18.5001M21 12H20M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z",
|
|
50
|
+
stroke: "#000000",
|
|
51
|
+
strokeWidth: "2"
|
|
52
|
+
}, {
|
|
53
|
+
name: "sepia",
|
|
54
|
+
width: "24px",
|
|
55
|
+
height: "24px",
|
|
56
|
+
viewBox: "0 0 24 24",
|
|
57
|
+
path: "M4 20H10.9433M10.9433 20H11.0567M10.9433 20C10.9622 20.0002 10.9811 20.0002 11 20.0002C11.0189 20.0002 11.0378 20.0002 11.0567 20M10.9433 20C7.1034 19.9695 4 16.8468 4 12.9998V8.92285C4 8.41305 4.41305 8 4.92285 8H17.0767C17.5865 8 18 8.41305 18 8.92285V9M11.0567 20H18M11.0567 20C14.8966 19.9695 18 16.8468 18 12.9998M18 9H19.5C20.8807 9 22 10.1193 22 11.5C22 12.8807 20.8807 14 19.5 14H18V12.9998M18 9V12.9998M15 3L14 5M12 3L11 5M9 3L8 5",
|
|
58
|
+
stroke: "#000000",
|
|
59
|
+
strokeWidth: "2"
|
|
60
|
+
}];
|
|
61
|
+
},
|
|
62
|
+
type: Array
|
|
33
63
|
}
|
|
34
64
|
},
|
|
35
65
|
data: function data() {
|
|
@@ -37,32 +67,7 @@ var script = {
|
|
|
37
67
|
theme: this.defaultTheme,
|
|
38
68
|
counter: 0,
|
|
39
69
|
themeName: this.defaultTheme,
|
|
40
|
-
showChangeTheme: this.changeThemeOff
|
|
41
|
-
themeIcons: [{
|
|
42
|
-
name: "dark",
|
|
43
|
-
width: "24px",
|
|
44
|
-
height: "24px",
|
|
45
|
-
viewBox: "0 0 24 24",
|
|
46
|
-
path: "M13 6V3M18.5 12V7M14.5 4.5H11.5M21 9.5H16M15.5548 16.8151C16.7829 16.8151 17.9493 16.5506 19 16.0754C17.6867 18.9794 14.7642 21 11.3698 21C6.74731 21 3 17.2527 3 12.6302C3 9.23576 5.02061 6.31331 7.92462 5C7.44944 6.05072 7.18492 7.21708 7.18492 8.44523C7.18492 13.0678 10.9322 16.8151 15.5548 16.8151Z",
|
|
47
|
-
stroke: "#ffffff",
|
|
48
|
-
strokeWidth: "2"
|
|
49
|
-
}, {
|
|
50
|
-
name: "light",
|
|
51
|
-
width: "24px",
|
|
52
|
-
height: "24px",
|
|
53
|
-
viewBox: "0 0 24 24",
|
|
54
|
-
path: "M12 3V4M12 20V21M4 12H3M6.31412 6.31412L5.5 5.5M17.6859 6.31412L18.5 5.5M6.31412 17.69L5.5 18.5001M17.6859 17.69L18.5 18.5001M21 12H20M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z",
|
|
55
|
-
stroke: "#000000",
|
|
56
|
-
strokeWidth: "2"
|
|
57
|
-
}, {
|
|
58
|
-
name: "sepia",
|
|
59
|
-
width: "24px",
|
|
60
|
-
height: "24px",
|
|
61
|
-
viewBox: "0 0 24 24",
|
|
62
|
-
path: "M4 20H10.9433M10.9433 20H11.0567M10.9433 20C10.9622 20.0002 10.9811 20.0002 11 20.0002C11.0189 20.0002 11.0378 20.0002 11.0567 20M10.9433 20C7.1034 19.9695 4 16.8468 4 12.9998V8.92285C4 8.41305 4.41305 8 4.92285 8H17.0767C17.5865 8 18 8.41305 18 8.92285V9M11.0567 20H18M11.0567 20C14.8966 19.9695 18 16.8468 18 12.9998M18 9H19.5C20.8807 9 22 10.1193 22 11.5C22 12.8807 20.8807 14 19.5 14H18V12.9998M18 9V12.9998M15 3L14 5M12 3L11 5M9 3L8 5",
|
|
63
|
-
stroke: "#000000",
|
|
64
|
-
strokeWidth: "2"
|
|
65
|
-
}]
|
|
70
|
+
showChangeTheme: this.changeThemeOff
|
|
66
71
|
};
|
|
67
72
|
},
|
|
68
73
|
methods: {
|
|
@@ -237,7 +242,7 @@ var __vue_staticRenderFns__ = [];
|
|
|
237
242
|
|
|
238
243
|
var __vue_inject_styles__ = function __vue_inject_styles__(inject) {
|
|
239
244
|
if (!inject) return;
|
|
240
|
-
inject("data-v-
|
|
245
|
+
inject("data-v-e3caa164_0", {
|
|
241
246
|
source: ":root{--app-background-color:#ffffff;--app-title-color:#333333;--app-subtitle-color:#555555}[theme=dark]{--app-background-color:#333333;--app-title-color:#ffffff;--app-subtitle-color:#dddddd}[theme=sepia]{--app-background-color:#d0bc91;--app-title-color:#8a6c44;--app-subtitle-color:#5f4938}.app-background{background-color:var(--app-background-color)}.app-title{color:var(--app-title-color)}.app-subtitle{color:var(--app-subtitle-color);padding-top:10px}.change-theme-box{cursor:pointer;color:var(--app-subtitle-color);font-size:1em;font-weight:400}",
|
|
242
247
|
map: undefined,
|
|
243
248
|
media: undefined
|
|
@@ -249,7 +254,7 @@ var __vue_inject_styles__ = function __vue_inject_styles__(inject) {
|
|
|
249
254
|
var __vue_scope_id__ = undefined;
|
|
250
255
|
/* module identifier */
|
|
251
256
|
|
|
252
|
-
var __vue_module_identifier__ = "data-v-
|
|
257
|
+
var __vue_module_identifier__ = "data-v-e3caa164";
|
|
253
258
|
/* functional template */
|
|
254
259
|
|
|
255
260
|
var __vue_is_functional_template__ = false;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vue-multiple-themes",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.0.1",
|
|
4
4
|
"description": "Vue Multiple Themes",
|
|
5
5
|
"author": "Pooya Golchian(pooya.golchian@gmail.com)",
|
|
6
6
|
"main": "dist/vue-multiple-themes.ssr.js",
|
|
@@ -52,7 +52,22 @@
|
|
|
52
52
|
"vue-server-theme-change",
|
|
53
53
|
"vue-change-theme",
|
|
54
54
|
"vue-dark-light-theme",
|
|
55
|
-
"vue-multiple-color-pallet-themes"
|
|
55
|
+
"vue-multiple-color-pallet-themes",
|
|
56
|
+
"vue",
|
|
57
|
+
"vuejs",
|
|
58
|
+
"vuecomponents",
|
|
59
|
+
"themes",
|
|
60
|
+
"multitheme",
|
|
61
|
+
"uicomponents",
|
|
62
|
+
"frontend",
|
|
63
|
+
"cssvariables",
|
|
64
|
+
"npmpackage",
|
|
65
|
+
"svgicons",
|
|
66
|
+
"customization",
|
|
67
|
+
"theming",
|
|
68
|
+
"webdevelopment",
|
|
69
|
+
"javascript",
|
|
70
|
+
"frontendframework"
|
|
56
71
|
],
|
|
57
72
|
"license": "ISC",
|
|
58
73
|
"repository": "pooyagolchian/vue-multiple-themes"
|
package/readme.md
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
### Vue.js 2 Multiple Themes
|
|
2
2
|
|
|
3
|
-
The Vue.js 2 Multiple Themes package allows you to implement multiple themes in your Vue.js application. It provides
|
|
3
|
+
The Vue.js 2 Multiple Themes package allows you to implement multiple themes in your Vue.js application. It provides
|
|
4
|
+
easy integration and customization options through CSS variables. This version exclusively uses SVG icons, eliminating
|
|
5
|
+
the need for icon fonts.
|
|
4
6
|
|
|
5
7
|
---
|
|
6
8
|
|
|
@@ -22,24 +24,61 @@ You can install the package via npm or yarn:
|
|
|
22
24
|
|
|
23
25
|
### Usage
|
|
24
26
|
|
|
25
|
-
|
|
27
|
+
|
|
28
|
+
To use the VueMultipleThemes component effectively in a Vue.js application, you would follow these steps to incorporate it into your application, allowing dynamic theme changes based on user interaction. Here’s a simple guide on how to do so:
|
|
29
|
+
|
|
30
|
+
Step 1: Import the Component
|
|
31
|
+
First, ensure that the VueMultipleThemes component is properly exported and then import it into the parent component or your main application file where you intend to use it.
|
|
32
|
+
|
|
33
|
+
Step 2: Register the Component
|
|
34
|
+
Register VueMultipleThemes as a component in the parent component or in your Vue application globally.
|
|
35
|
+
|
|
36
|
+
Locally in a Component
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
```javascript
|
|
40
|
+
import VueMultipleThemes from './VueMultipleThemes.vue'; // Adjust the path as necessary
|
|
41
|
+
export default {
|
|
42
|
+
name: 'App',
|
|
43
|
+
components: {
|
|
44
|
+
VueMultipleThemes
|
|
45
|
+
}
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
```
|
|
49
|
+
Globally in Your Vue Application
|
|
50
|
+
|
|
51
|
+
```javascript
|
|
52
|
+
import Vue from 'vue';
|
|
53
|
+
import VueMultipleThemes from './VueMultipleThemes.vue'; // Adjust the path as necessary
|
|
54
|
+
|
|
55
|
+
Vue.component('vue-multiple-themes', VueMultipleThemes);
|
|
56
|
+
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
Step 3: Use the Component in Your Template
|
|
61
|
+
Insert the vue-multiple-themes component into your template. You can pass in the props as needed.
|
|
62
|
+
|
|
26
63
|
|
|
27
64
|
```vue
|
|
65
|
+
|
|
28
66
|
<template>
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
67
|
+
<div>
|
|
68
|
+
<vue-multiple-themes
|
|
69
|
+
:defaultTheme="'light'"
|
|
70
|
+
:themeColorList="['light', 'dark', 'sepia']"
|
|
71
|
+
:changeThemeOff="true"
|
|
72
|
+
></vue-multiple-themes>
|
|
73
|
+
</div>
|
|
36
74
|
</template>
|
|
37
75
|
|
|
38
76
|
<script>
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
}
|
|
77
|
+
import VueMultipleThemes from "vue-multiple-themes";
|
|
78
|
+
|
|
79
|
+
export default {
|
|
80
|
+
components: {VueMultipleThemes}
|
|
81
|
+
};
|
|
43
82
|
</script>
|
|
44
83
|
```
|
|
45
84
|
|
|
@@ -84,12 +123,39 @@ You can also customize the styles and color palette by overriding the CSS variab
|
|
|
84
123
|
font-weight: normal;
|
|
85
124
|
}
|
|
86
125
|
```
|
|
126
|
+
Step 4: Define Theme Icons (Optional)
|
|
127
|
+
If you have specific SVG icons for each theme, you can pass them through the themeIcons prop. Ensure each icon object has a name, width, height, viewBox, path, stroke, and strokeWidth defined as shown in your component's default prop value.
|
|
128
|
+
|
|
129
|
+
Step 5: Styling (Optional)
|
|
130
|
+
Ensure that the styles for changing the themes are correctly applied in your application. You might need to adjust the CSS based on your application's structure or styling requirements.
|
|
131
|
+
|
|
132
|
+
Step 6: Theme Persistence (Optional)
|
|
133
|
+
Since the component already handles theme persistence using localStorage, no additional steps are required to maintain the user's theme choice across sessions. However, you might want to add or modify functionality based on specific requirements.
|
|
134
|
+
|
|
135
|
+
|
|
136
|
+
---
|
|
137
|
+
|
|
138
|
+
### Props
|
|
139
|
+
|
|
140
|
+
|
|
141
|
+
| Prop Name | Type | Default Value | Description |
|
|
142
|
+
|------------------|---------|--------------------------------------------------------------------------|----------------------------------------------------------------------------|
|
|
143
|
+
| `defaultTheme` | String | `"light"` | The initial theme to be applied when the component mounts. |
|
|
144
|
+
| `themeColorList` | Array | `() => ["light", "dark", "sepia"]` | An array of strings representing the available themes. |
|
|
145
|
+
| `extraClass` | String | `''` | An additional CSS class that can be added to the component's root element. |
|
|
146
|
+
| `changeThemeOff` | Boolean | `true` | Determines whether the theme change functionality is enabled or not. |
|
|
147
|
+
| `themeIcons` | Array | `() => [{name, width, height, viewBox, path, stroke, strokeWidth}, ...]` | An array of objects where each object represents an SVG icon for a theme. |
|
|
148
|
+
|
|
149
|
+
|
|
150
|
+
### Props Sample
|
|
87
151
|
|
|
88
|
-
|
|
152
|
+
| Attribute | Description | Type | Default |
|
|
153
|
+
|----------------|----------------------------------------------|---------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|
|
154
|
+
| defaultTheme | Default theme color | String | 'light' |
|
|
155
|
+
| themeColorList | List of available theme colors | Array | ['light', 'dark', 'sepia'] |
|
|
156
|
+
| changeThemeOff | Show or hide the theme change button | Boolean | true |
|
|
157
|
+
| extraClass | Additional custom class for the icon wrapper | String | null |
|
|
158
|
+
| themeIcons | SVG icon array | Array | [{ name: "dark", width: "24px", height: "24px", viewBox: "0 0 24 24", path: "M13 6V3M18.5 12V7M14.5 4.5H11.5M21 9.5H16M15.5548 16.8151C16.7829 16.8151 17.9493 16.5506 19 16.0754C17.6867 18.9794 14.7642 21 11.3698 21C6.74731 21 3 17.2527 3 12.6302C3 9.23576 5.02061 6.31331 7.92462 5C7.44944 6.05072 7.18492 7.21708 7.18492 8.44523C7.18492 13.0678 10.9322 16.8151 15.5548 16.8151Z", stroke: "#ffffff", strokeWidth: "2" },{ name: "light", width: "24px", height: "24px", viewBox: "0 0 24 24", path: "M12 3V4M12 20V21M4 12H3M6.31412 6.31412L5.5 5.5M17.6859 6.31412L18.5 5.5M6.31412 17.69L5.5 18.5001M17.6859 17.69L18.5 18.5001M21 12H20M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z", stroke: "#000000", strokeWidth: "2" },{ name: "sepia", width: "24px", height: "24px", viewBox: "0 0 24 24", path: "M4 20H10.9433M10.9433 20H11.0567M10.9433 20C10.9622 20.0002 10.9811 20.0002 11 20.0002C11.0189 20.0002 11.0378 20.0002 11.0567 20M10.9433 20C7.1034 19.9695 4 16.8468 4 12.9998V8.92285C4 8.41305 4.41305 8 4.92285 8H17.0767C17.5865 8 18 8.41305 18 8.92285V9M11.0567 20H18M11.0567 20C14.8966 19.9695 18 16.8468 18 12.9998M18 9H19.5C20.8807 9 22 10.1193 22 11.5C22 12.8807 20.8807 14 19.5 14H18V12.9998M18 9V12.9998M15 3L14 5M12 3L11 5M9 3L8 5", stroke: "#000000", strokeWidth: "2" }] |
|
|
89
159
|
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
| defaultTheme | Default theme color | String | 'light' |
|
|
93
|
-
| themeColorList | List of available theme colors | Array | ['light', 'dark', 'sepia'] |
|
|
94
|
-
| changeThemeOff | Show or hide the theme change button | Boolean | true |
|
|
95
|
-
| extraClass | Additional custom class for the icon wrapper | String | null |
|
|
160
|
+
|
|
161
|
+
|
|
@@ -30,6 +30,14 @@ export default {
|
|
|
30
30
|
default: true,
|
|
31
31
|
type: Boolean,
|
|
32
32
|
},
|
|
33
|
+
themeIcons: {
|
|
34
|
+
default: () => [
|
|
35
|
+
{ name: "dark", width: "24px", height: "24px", viewBox: "0 0 24 24", path: "M13 6V3M18.5 12V7M14.5 4.5H11.5M21 9.5H16M15.5548 16.8151C16.7829 16.8151 17.9493 16.5506 19 16.0754C17.6867 18.9794 14.7642 21 11.3698 21C6.74731 21 3 17.2527 3 12.6302C3 9.23576 5.02061 6.31331 7.92462 5C7.44944 6.05072 7.18492 7.21708 7.18492 8.44523C7.18492 13.0678 10.9322 16.8151 15.5548 16.8151Z", stroke: "#ffffff", strokeWidth: "2" },
|
|
36
|
+
{ name: "light", width: "24px", height: "24px", viewBox: "0 0 24 24", path: "M12 3V4M12 20V21M4 12H3M6.31412 6.31412L5.5 5.5M17.6859 6.31412L18.5 5.5M6.31412 17.69L5.5 18.5001M17.6859 17.69L18.5 18.5001M21 12H20M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z", stroke: "#000000", strokeWidth: "2" },
|
|
37
|
+
{ name: "sepia", width: "24px", height: "24px", viewBox: "0 0 24 24", path: "M4 20H10.9433M10.9433 20H11.0567M10.9433 20C10.9622 20.0002 10.9811 20.0002 11 20.0002C11.0189 20.0002 11.0378 20.0002 11.0567 20M10.9433 20C7.1034 19.9695 4 16.8468 4 12.9998V8.92285C4 8.41305 4.41305 8 4.92285 8H17.0767C17.5865 8 18 8.41305 18 8.92285V9M11.0567 20H18M11.0567 20C14.8966 19.9695 18 16.8468 18 12.9998M18 9H19.5C20.8807 9 22 10.1193 22 11.5C22 12.8807 20.8807 14 19.5 14H18V12.9998M18 9V12.9998M15 3L14 5M12 3L11 5M9 3L8 5", stroke: "#000000", strokeWidth: "2" }
|
|
38
|
+
],
|
|
39
|
+
type: Array
|
|
40
|
+
}
|
|
33
41
|
},
|
|
34
42
|
data() {
|
|
35
43
|
return {
|
|
@@ -37,11 +45,6 @@ export default {
|
|
|
37
45
|
counter: 0,
|
|
38
46
|
themeName: this.defaultTheme,
|
|
39
47
|
showChangeTheme: this.changeThemeOff,
|
|
40
|
-
themeIcons: [
|
|
41
|
-
{ name: "dark", width: "24px", height: "24px", viewBox: "0 0 24 24", path: "M13 6V3M18.5 12V7M14.5 4.5H11.5M21 9.5H16M15.5548 16.8151C16.7829 16.8151 17.9493 16.5506 19 16.0754C17.6867 18.9794 14.7642 21 11.3698 21C6.74731 21 3 17.2527 3 12.6302C3 9.23576 5.02061 6.31331 7.92462 5C7.44944 6.05072 7.18492 7.21708 7.18492 8.44523C7.18492 13.0678 10.9322 16.8151 15.5548 16.8151Z", stroke: "#ffffff", strokeWidth: "2" },
|
|
42
|
-
{ name: "light", width: "24px", height: "24px", viewBox: "0 0 24 24", path: "M12 3V4M12 20V21M4 12H3M6.31412 6.31412L5.5 5.5M17.6859 6.31412L18.5 5.5M6.31412 17.69L5.5 18.5001M17.6859 17.69L18.5 18.5001M21 12H20M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z", stroke: "#000000", strokeWidth: "2" },
|
|
43
|
-
{ name: "sepia", width: "24px", height: "24px", viewBox: "0 0 24 24", path: "M4 20H10.9433M10.9433 20H11.0567M10.9433 20C10.9622 20.0002 10.9811 20.0002 11 20.0002C11.0189 20.0002 11.0378 20.0002 11.0567 20M10.9433 20C7.1034 19.9695 4 16.8468 4 12.9998V8.92285C4 8.41305 4.41305 8 4.92285 8H17.0767C17.5865 8 18 8.41305 18 8.92285V9M11.0567 20H18M11.0567 20C14.8966 19.9695 18 16.8468 18 12.9998M18 9H19.5C20.8807 9 22 10.1193 22 11.5C22 12.8807 20.8807 14 19.5 14H18V12.9998M18 9V12.9998M15 3L14 5M12 3L11 5M9 3L8 5", stroke: "#000000", strokeWidth: "2" }
|
|
44
|
-
]
|
|
45
48
|
};
|
|
46
49
|
},
|
|
47
50
|
methods: {
|