https://github.com/vaadin-component-factory/vcf-dark-mode-switch

Vaadin Component Factory Dark Mode Switch
https://github.com/vaadin-component-factory/vcf-dark-mode-switch

dark-mode dark-mode-switch dark-mode-toggle polymer3 vaadin webcomponent

Last synced: about 1 month ago
JSON representation

Vaadin Component Factory Dark Mode Switch

• Host: GitHub
• URL: https://github.com/vaadin-component-factory/vcf-dark-mode-switch
• Owner: vaadin-component-factory
• License: apache-2.0
• Created: 2019-07-09T09:06:36.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2020-11-24T12:58:25.000Z (about 4 years ago)
• Last Synced: 2024-10-11T13:37:55.526Z (4 months ago)
• Topics: dark-mode, dark-mode-switch, dark-mode-toggle, polymer3, vaadin, webcomponent
• Language: JavaScript
• Homepage: https://vcf-dark-mode-switch.netlify.com/
• Size: 26.4 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# <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';

```

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

Apache License 2.0