Any way to toggle light/dark native widgets when using <meta name='color-scheme' content='light dark'> ? about dark-mode-toggle HOT 3 CLOSED

You can perfectly do this:

const toggle = document.querySelector('dark-mode-toggle');
const meta = document.querySelector('meta[name="color-scheme"]');

// Set the first time.
toggle.mode === 'dark' ? meta.content = 'dark light' : meta.content = 'light dark';

// Listen for toggle changes (which includes `prefers-color-scheme` changes).
toggle.addEventListener('colorschemechange', () => {
  toggle.mode === 'dark' ? meta.content = 'dark light' : meta.content = 'light dark';
});

from dark-mode-toggle.

Thanks, this worked with some modifications. Changing the order from 'dark light' to 'light dark' didn't work, but setting it to 'dark' for dark mode and 'light' for light mode worked. I also had to start with an empty string for the meta tag.

const toggle = document.querySelector('dark-mode-toggle');
const meta = document.querySelector('meta[name="color-scheme"]');

// Set the first time.
toggle.mode === 'dark' ? meta.content = 'dark' : meta.content = 'light';

// Listen for toggle changes (which includes `prefers-color-scheme` changes).
toggle.addEventListener('colorschemechange', () => {
  toggle.mode === 'dark' ? meta.content = 'dark' : meta.content = 'light';
});

Edit: Apparently using 'light dark' or 'dark light' in the meta tag simply tells the browser that your site supports both light and dark themes, and the browser will pick whatever matches the browser's theme. If you set the meta tag to an empty string, it will only use light widgets. So if you want to force light or dark widgets, you have to set the meta tag to only 'light' or only 'dark'. The code above now works in all cases regardless of browser theme.

from dark-mode-toggle.

Perfect, happy it worked for you and thanks for sharing your solution (my code was written off the top of my head).

from dark-mode-toggle.