<vcf-dark-mode-switch>
Demo
https://vcf-dark-mode-switch.netlify.com/
Installation
Install vcf-dark-mode-switch
:
npm i @vaadin-component-factory/vcf-dark-mode-switch --save
Usage
Once installed, import it in your application:
import '@vaadin-component-factory/vcf-dark-mode-switch';
And use it:
<vcf-dark-mode-switch></vcf-dark-mode-switch>
You can provide a label via a label
attribute.
By toggling the dark mode switch:
- A
theme="dark"
attribute will be toggled on thehtml
tag. - The user's preference will be persisted on
localStorage
with a keyvcf-dark-mode
. - On page refresh, the persisted user's preference will be applied.
Note that the component applies dark mode preference from the OS level if the user's preference is not set.
Running demo
-
Fork the
vcf-dark-mode-switch
repository and clone it locally. -
Make sure you have npm installed.
-
When in the
vcf-dark-mode-switch
directory, runnpm install
to install dependencies. -
Run
npm start
to open the demo.
Contributing
To contribute to the component, please read the guideline first.
License
Apache License 2.0