vcf-dark-mode-switch | Vaadin

Vaadin Component Factory Dark Mode Switch




Install vcf-dark-mode-switch:

npm i @vaadin-component-factory/vcf-dark-mode-switch --save


Once installed, import it in your application:

import '@vaadin-component-factory/vcf-dark-mode-switch/vcf-dark-mode-switch.js';

And use it:


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.


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


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


Link to this version
ImportedReleased 03 September 2019Other
Framework Support
Polymer 3.0+
Browser Independent
Install with
npm install @vaadin-component-factory/vcf-dark-mode-switch"@1.0.0"
Run the above npm command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 1.0.0


  • @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