A component darkmode injection in your document page with vue.js
npm install darkmode-vueA component darkmode injection in your document page with vue.js
Install
``js`
npm install --save darkmode-vue
Usage basic
`vue
import DarkModeVue from 'darkmode-vue';
`
Prop hiddenLabel
`vue`
Prop hiddenIcon
`vue`
Prop labelDark and labelLight
`vue`
Slot change icon and label custom
`vue`
Off
On
Usage useDarkModeVue with toggleMode and mode value
`vue
import { useDarkModeVue } from 'darkmode-vue';
const { mode, toggleMode } = useDarkModeVue();
`
Style modification and usage in your styles
`css
body {
--dm-color-primary: #41b883;
--dm-color-secondary: #34495e;
--dm-color-text: #222;
--dm-color-background: #fff;
}
body.darkmode {
--dm-color-text: #fff;
--dm-color-background: #222;
}
``
Create your variable colors and update this with class .darkmode.