Dark Mode Plugin

[dw08gm]

Is there a plugin or template that provides customers with the ability to choose dark mode like I now see on wikipedia.

[nl2dav]

funny that you mention it

https://www.zen-cart.com/showthread....79#post1409779

[dw08gm]

Here is a video explains the coding, but does not say how to utilize system dark settings.

How To Make Website DARK MODE | Dark Theme Website Design Using HTML, CSS & JS by How to Become a Developer

https://www.youtube.com/watch?v=rKqHbLuKaO8

[nl2dav]

but does not say how to utilize system dark settings.

https://stackoverflow.com/questions/...ing-javascript

to summarize, either use it directly in css

@media (prefers-color-scheme: dark)

but thats unwanted, what you want is alternate between css files. So

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
const newColorScheme = event.matches ? "dark" : "light";
});

this would do the job.

I pretty much hacked a dark mode in our shop. Our shop still uses a very very old modified Winchester Responsive template (original from picaflor-azul) thats the reason I am not that helpful in explaining what I all did because its rare to begin with.

[nl2dav]

I realize again that I am a bit vague. What I'm trying to say is that

window.matchMedia('(prefers-color-scheme: dark)')

returns the flag of the system setting (not the browser setting! See: https://stackoverflow.com/questions/...s-false-when-c )

and if you have such flag (true or false) then you can change css file links on the fly with help of Javascript. Like that dude is doing with a favicon;

const setFavicon = () => {
const favicon = document.querySelector('link[rel="icon"]');
const matchMedia = window.matchMedia('(prefers-color-scheme: dark)');
favicon.href = (window.matchMedia('(prefers-color-scheme: dark)').matches)
? 'path/to/dark-theme.png'
: 'path/to/light-theme.png';
if (navigator.userAgentData.brands[1].brand.includes('Chrome')) {
favicon.href = 'light-theme.png';
};
}


setFavicon();

Although he falls back in light mode on Chrome due to some outstanding issue (?).. Its a comment from last year so maybe its fixed by now. Hopefully.

[dw08gm]

Thanks for the links and adding clarity to the matter.