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

Add appearance-changed-event.min.js to your page and start listening for appearance-changed event.

// 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:

switch (window.appearance) {
    
    case 'light': {
       // do some light theme stuff
    } break;

    case 'dark': {
       // do some dark theme stuff
    } break;
}

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

git clone https://github.com/orca-scan/appearance-changed-event
cd appearance-changed-event
npm install
npm start

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

For change-log, check releases.

Licensed under MIT License © Orca Scan (build a barcode scanner app without code)