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

[walmartshopper]

I added to my page so that the browser would draw dark scrollbars and other native widgets in dark mode. When I have the browser in dark mode and use the dark-mode-toggle switch to change my website to light mode, the widgets stay in dark mode. And vice versa... with browser in light mode and website toggled to dark mode, browser continues using light widgets. Is there any way to also toggle the meta tag so that native widgets follow the current theme? Not sure if it's possible but thought I would ask. Light widgets look OK in dark mode, but dark widgets look bad in light mode, so for now I removed the meta line to force light widgets.

[tomayac]

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';
});

[walmartshopper]

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.

[tomayac]

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