← Back

vcf-dark-mode-switch

Vaadin Component Factory Dark Mode Switch

Author

Rating

Popularity

<100

<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/vcf-dark-mode-switch.js';

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

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, run npm install to install dependencies.
Run npm start to open the demo.

Contributing

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

License

Commercial Vaadin Add-on License version 3 (CVALv3). For license terms, see LICENSE.

Vaadin collects development time usage statistics to improve this product. For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

@polymer/polymer#^3.0.0
@vaadin-component-factory/vcf-toggle-button#^0.1.1
@vaadin/vaadin-element-mixin#^2.1.3
@vaadin/vaadin-lumo-styles#^1.5.0
@vaadin/vaadin-themable-mixin#^1.4.4

Released: 2019-09-03
Maturity: IMPORTED
License: Other

Compatibility

Framework: Polymer 3.0+
Browser: Browser Independent

vcf-dark-mode-switch - Vaadin Add-on Directory

Vaadin Component Factory Dark Mode Switch

# <vcf-dark-mode-switch> ## Demo https://vcf-dark-mode-switch.netlify.com/ ## Installation Install `vcf-dark-mode-switch`: ```sh npm i @vaadin-component-factory/vcf-dark-mode-switch --save ``` ## Usage Once installed, import it in your application: ```js import '@vaadin-component-factory/vcf-dark-mode-switch/vcf-dark-mode-switch.js'; ``` And use it: ```html ``` 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. 1. Make sure you have [npm](https://www.npmjs.com/) installed. 1. When in the `vcf-dark-mode-switch` directory, run `npm install` to install dependencies. 1. Run `npm start` to open the demo. ## Contributing To contribute to the component, please read [the guideline](https://github.com/vaadin/vaadin-core/blob/master/CONTRIBUTING.md) first. ## License Commercial Vaadin Add-on License version 3 (CVALv3). For license terms, see LICENSE. Vaadin collects development time usage statistics to improve this product. For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.

Directory