prefer-color-scheme overrides permanent ? about dark-mode-toggle HOT 1 CLOSED

Firstly, great post at web.dev + good job with the element.

Thanks :-)

When the user toggles the color scheme, either via OS or via Chrome dev tools, the permanent setting is lost. Not sure if I got something wrong or I missed some detail or is this behaviour expected?

System-level color scheme changes are meant to override the toggle setting. The "remember" setting is meant to store the override given the current setting (you have your system permanently in one mode, and want the toggle to always override this mode). If you want to never ever change the toggle's value, you can listen for the colorschemechange event and set the toggle back to your preferred state.

<dark-mode-toggle appearance="toggle" permanent dark="Dark Theme" light="Light Theme"></dark-mode-toggle>

const mode = localStorage.getItem('dark-mode-toggle');
const toggle = document.querySelector('dark-mode-toggle');
toggle.addEventListener('colorschemechange', () => {
  toggle.mode = mode;
});

Also, is it possible to remove the outline in CSS (example would be handy), or even better add a ripple effect? Our website uses mdc-web-components. An example with a material text button as toggle would be super handy.

The latest release has added support for CSS ::part(), so you can control the CSS completely yourself. The exposed parts are listed in the README.

from dark-mode-toggle.