darkmode-vue

A component darkmode injection in your document page with vue.js

Live Preview

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






`

Usage useDarkModeVue with toggleMode and mode value
`vue
import { useDarkModeVue } from 'darkmode-vue';

const { mode, toggleMode } = useDarkModeVue();

DarkModeVue {{ mode }}
`

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.

$3

If DarkModeVue usage in a page, a class in body document is update with class darkmode.
In LocalStorage is created a key store with value current mode.
Do you usage children body.darkmode styles for your application.
I recomend create a variables colors in css and update this with toggle class of body document.