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

Vaadin Component Factory Dark Mode Switch

<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

vcf-dark-mode-switch's Issues

Duplicate dependencies when using ToggleButton - Failed to execute 'define' on 'CustomElementRegistry'

Problem

I want to use in Java both ToggleButton and vcf-dark-mode-switch. However, my application breaks in the browser and the console reports:
Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "vcf-toggle-button" has already been used with this registry

How to reproduce

Using ToggleButton:

<dependency>
    <groupId>com.vaadin.componentfactory</groupId>
    <artifactId>togglebutton</artifactId>
    <version>1.0.0</version>
</dependency>

Using DarkModeSwitch:

@Tag("vcf-dark-mode-switch")
@NpmPackage(value = "@vaadin-component-factory/vcf-dark-mode-switch", version = "1.0.1")
@JsModule("@vaadin-component-factory/vcf-dark-mode-switch")
public class DarkModeSwitch extends AbstractSinglePropertyField<DarkModeSwitch, Boolean> {
    public DarkModeSwitch() {
        super("darkMode", false, false);
    }
}

(I am not sure if DarkModeSwitch can extend ToggleButton in some way, or it's composition so that would not work.)

Possible solution

npx find-duplicate-dependencies says:

This package has the following duplicate dependencies:

@vaadin-component-factory/vcf-toggle-button :
[ { name: '@vaadin-component-factory/vcf-toggle-button',
    version: '0.1.6',
    from: '@vaadin-component-factory/vcf-toggle-button@^0.1.1',
    path: 'no-name/@vaadin-component-factory/vcf-dark-mode-switch' },
  { name: '@vaadin-component-factory/vcf-toggle-button',
    version: '1.0.1',
    from: '@vaadin-component-factory/[email protected]',
    path: 'no-name' } ]

Please run "npm dedupe" to see if that could be fixed. If not, manually resolve version conflicts

...which indicates, that there are duplicates. IIUC ^0.1.1 means version above 1.0.0 is not accepted so I think the solution is to change the dependency of vcf-dark-mode-switch on vcf-toggle-button to a newer version, f.e. ^1.0.1.

vcf-dark-mode-switch

First version implementation.

Respect CSS media prefers-color-scheme: dark

The component should automatically detect if dark mode should be enabled, if the user has not made an explicit choice about the color mode yet.

Sidenote: it would be great if the user could “reset” the switch to “auto mode” so that the OS level setting (media query) would be respected. Not exactly sure how that could work in the UI.

Dark mode should persist over page reloads

To help developers, it would be great to store the user's selection in localStorage and restore the value from there on page reload.