darkmode-vue
v0.4.1
Published
A component darkmode injection in your document page with vue.js
Downloads
22
Readme
darkmode-vue
A component darkmode injection in your document page with vue.js
Live Preview
Install
npm install --save darkmode-vue
Usage basic
import DarkModeVue from 'darkmode-vue';
<DarkModeVue />
Prop hiddenLabel
<DarkModeVue :hiddenLabel="true" />
Prop hiddenIcon
<DarkModeVue :hiddenIcon="true" />
Prop labelDark and labelLight
<DarkModeVue labelDark="Tema escuro" labelLight="Tema claro" />
Slot change icon and label custom
<DarkModeVue>
<template #iconDark>
<svg></svg>
</template>
<template #iconLight>
<svg></svg>
</template>
<template #labelDark>
Off
</template>
<template #labelLight>
On
</template>
</DarkModeVue>
Usage useDarkModeVue with toggleMode and mode value
import { useDarkModeVue } from 'darkmode-vue';
const { mode, toggleMode } = useDarkModeVue();
<button @click="toggleMode">DarkModeVue {{ mode }}</button>
Style modification and usage in your styles
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.
Description class of components
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.