https://github.com/orca-scan/appearance-changed-event

A 1k script that adds `appearance-changed` event to detect OS theme changes
https://github.com/orca-scan/appearance-changed-event

dom javascript

Last synced: about 1 month ago
JSON representation

A 1k script that adds `appearance-changed` event to detect OS theme changes

• Host: GitHub
• URL: https://github.com/orca-scan/appearance-changed-event
• Owner: orca-scan
• License: isc
• Created: 2023-08-12T18:57:05.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2023-08-15T22:24:25.000Z (over 1 year ago)
• Last Synced: 2025-01-05T13:36:01.295Z (about 1 month ago)
• Topics: dom, javascript
• Language: JavaScript
• Homepage: https://orcascan.com
• Size: 83 KB
• Stars: 3
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.MD
  • License: LICENSE

Awesome Lists containing this project

README

        
# appearance-changed-event

A 1k script that adds `appearance-changed` event to detect OS theme changes

## Usage

Add [appearance-changed-event.min.js](dist/appearance-changed-event.min.js) to your page and start listening for `appearance-changed` event.

```js

// fires every time the OS theme changes

window.addEventListener('appearance-changed', function(e) {

  console.log(e.detail); // `light`, `dark`

});

```

Also adds `window.appearance` which you can use to get the current OS theme:

```js

switch (window.appearance) {

    

    case 'light': {

       // do some light theme stuff

    } break;

    case 'dark': {

       // do some dark theme stuff

    } break;

}

```

### Development

The project includes a node server, run the following then visit [http://localhost:8080](http://localhost:8080)

```bash

git clone https://github.com/orca-scan/appearance-changed-event

cd appearance-changed-event

npm install

npm start

```

### Update .min files

To create a new version of the minified [appearance-changed-event.min.js](dist/appearance-changed-event.min.js) file from source, tweak the version number in `package.json` and run `npm run build`

## History

For change-log, check [releases](https://github.com/orca-scan/appearance-changed-event/releases).

## License

Licensed under [MIT License](LICENSE) © Orca Scan _(build a [barcode scanner app](https://orcascan.com) without code)_