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:

  1. npm

    npm install vue-multiple-themes

  2. Yarn

    yarn add vue-multiple-themes

Usage

To use the VueMultipleThemes component effectively in a Vue.js application, follow these steps to incorporate it into your application, allowing dynamic theme changes based on user interaction.

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

You can register VueMultipleThemes either locally in a specific component or globally across your Vue application.

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.

Conclusion

The Vue.js 2 Multiple Themes package provides a flexible and easy-to-use solution for implementing multiple themes in your Vue.js applications. By following the steps outlined above, you can enhance the user experience by allowing dynamic theme switching that is both smooth and visually appealing.