Vue Templates Logo Vue Templates
Vue Daisyui Theme Manager screenshot

Vue Daisyui Theme Manager

Author Avatar Theme by Kaandesu
Updated: 29 Apr 2023
13 Stars

A Vue3-typescript plugin that allows you to change DaisyUI themes during runtime. As well as, setting default light and dark themes, and matching the system theme.

Github Live Preview

Categories

Vite Tailwind Daisyui Templates & themes

Overview

The Vue Daisy UI Theme Manager Plugin is a plugin that allows users to change the theme of their application at runtime. It also provides the ability to watch for system theme changes and automatically update the theme accordingly. This plugin can be easily installed and set up in any Vue project.

Features

  • Change Theme at Runtime: Users can switch between different themes for their application without having to refresh or restart.
  • System Theme Integration: The plugin can watch for system theme changes and automatically update the application’s theme to match.
  • Easy Setup: The plugin comes with a default configuration file that can be easily customized to define available themes and their options.

Installation

To install the Vue Daisy UI Theme Manager Plugin, follow these steps:

  1. Install the plugin via npm or yarn:

    npm install vue-daisy-ui-theme-manager

    yarn add vue-daisy-ui-theme-manager

  2. After installation, a theme-manager.config.ts file will be created in the root folder of your project. This file will be used to define the available themes. Make sure to also specify the list of themes in tailwind.config.js.

  3. Use the createThemeManager method to initiate the plugin with the default theme and the dark theme. You can choose from the built-in DaisyUI themes or create custom themes.

  4. In the main.ts file of your Vue project, import and use the useThemeManager function to access the theme manager methods.

  5. You can now use the various theme manager methods like set, get, toggleDark, etc. to control the application’s theme.

Summary

The Vue Daisy UI Theme Manager Plugin provides a convenient way to dynamically change the theme of a Vue application. It offers features like runtime theme switching and system theme integration. By following the installation steps, developers can easily set up and customize the available themes for their projects. With its user-friendly API, this plugin is a great addition for Vue developers looking to enhance the UI experience of their applications.