https://github.com/livresaber/darkmode-vue
Componente DarkMode com Vue
https://github.com/livresaber/darkmode-vue
darkmode hacktoberfest javascript lightmode vue vue3
Last synced: 5 months ago
JSON representation
Componente DarkMode com Vue
- Host: GitHub
- URL: https://github.com/livresaber/darkmode-vue
- Owner: livresaber
- Created: 2022-10-26T22:51:22.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2024-11-16T20:40:20.000Z (over 1 year ago)
- Last Synced: 2025-03-31T05:11:13.390Z (about 1 year ago)
- Topics: darkmode, hacktoberfest, javascript, lightmode, vue, vue3
- Language: Vue
- Homepage: https://darkmode-vue.web.app
- Size: 1.15 MB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# darkmode-vue
A 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();
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.
### 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.