JSPM

@vaadin-component-factory/vcf-dark-mode-switch

1.0.2
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
    • 0
  • Score
    100M100P100Q17481F
  • License https://raw.githubusercontent.com/vaadin/vaadin-incubator-element/master/LICENSE

Vaadin Component Factory Dark Mode Switch

Package Exports

  • @vaadin-component-factory/vcf-dark-mode-switch

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@vaadin-component-factory/vcf-dark-mode-switch) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

<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 the html tag.
  • The user's preference will be persisted on localStorage with a key vcf-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

  1. Fork the vcf-dark-mode-switch repository and clone it locally.

  2. Make sure you have npm installed.

  3. When in the vcf-dark-mode-switch directory, run npm install to install dependencies.

  4. Run npm start to open the demo.

Contributing

To contribute to the component, please read the guideline first.

License

Apache License 2.0