prefer-color-scheme overrides permanent ?

[samstride]

Hi,

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

Just running into a wee issue. We have the following HTML,

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

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?

Example scenario: User OS theme set to dark. User visits website, dark theme loads by default. User changes website setting to light. User then changes OS them from dark to light and back to dark. The website switches to dark theme.

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.

Cheers.

[tomayac]

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.