vue-multiple-themes v3.0.1
Vue.js 2 Multiple Themes
The Vue.js 2 Multiple Themes package allows you to implement multiple themes in your Vue.js application. It provides easy integration and customization options through CSS variables. This version exclusively uses SVG icons, eliminating the need for icon fonts.
Installation
You can install the package via npm or yarn:
npm
npm install vue-multiple-themes
Yarn
yarn add vue-multiple-themes
Usage
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:
Step 1: Import the Component 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.
Step 2: Register the Component Register VueMultipleThemes as a component in the parent component or in your Vue application globally.
Locally in a Component
import VueMultipleThemes from './VueMultipleThemes.vue'; // Adjust the path as necessary
export default {
name: 'App',
components: {
VueMultipleThemes
}
};
Globally in Your Vue Application
import Vue from 'vue';
import VueMultipleThemes from './VueMultipleThemes.vue'; // Adjust the path as necessary
Vue.component('vue-multiple-themes', VueMultipleThemes);
Step 3: Use the Component in Your Template Insert the vue-multiple-themes component into your template. You can pass in the props as needed.
<template>
<div>
<vue-multiple-themes
:defaultTheme="'light'"
:themeColorList="['light', 'dark', 'sepia']"
:changeThemeOff="true"
></vue-multiple-themes>
</div>
</template>
<script>
import VueMultipleThemes from "vue-multiple-themes";
export default {
components: {VueMultipleThemes}
};
</script>
You can also customize the styles and color palette by overriding the CSS variables:
: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: normal;
}
Step 4: Define Theme Icons (Optional) 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.
Step 5: Styling (Optional) 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.
Step 6: Theme Persistence (Optional) 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.
Props
Prop Name | Type | Default Value | Description |
---|---|---|---|
defaultTheme | String | "light" | The initial theme to be applied when the component mounts. |
themeColorList | Array | () => ["light", "dark", "sepia"] | An array of strings representing the available themes. |
extraClass | String | '' | An additional CSS class that can be added to the component's root element. |
changeThemeOff | Boolean | true | Determines whether the theme change functionality is enabled or not. |
themeIcons | Array | () => [{name, width, height, viewBox, path, stroke, strokeWidth}, ...] | An array of objects where each object represents an SVG icon for a theme. |
Props Sample
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago