A button to change the theme for the current website
It:
- Is build in Vue.js v3
- Includes a compiled version to use in the website without running Vue's server
- Saves the selected theme in the
localStorage. - Alternatively you cand bind
v-modelto save it somewhere else. - Show 3 options: Light Theme, Dark Theme and System Theme (this one being dynamic according to your configurations)
- Includes an SCSS file as a base for the theme configuration.
-
Include on your website the
scss/colors.scssstyle.@import "change-theme-button/scss/colors";
If you're not using sass, you can use
public/style.cssinstead. -
Set on your page's
<body>the theme of the website, you can use the system-theme to make it dynamic.<body class="system-theme">
npm install --save change-theme-buttonimport ChangeThemeButton from 'change-theme-button';import { Vue, ChangeThemeButton } from 'change-theme-button/src/lib';
new Vue({
components: { ChangeThemeButton }
}).$mount('#global-content');There's 3 themes you can use on your website
system-themelight-themedark-theme
You can add different options to the <chage-theme>:
-
icon-name: change the class of the icon, you can use that to chage the icon to match your site's theme. -
set-color-on-load: (true by default) loads the theme on page load. -
target: (empty by default) Set thequerySelectorfor element who will receive the theme class, if empty, the<body>will receive it. -
v-model: binds the name of the theme to a variable instead of saving it to the localStorage.