How to use prefers-color-scheme CSS selection with the dark / light switch?

[bee-san]

Hey!

I'm re-designing the CSS for tables.

I have this CSS:

@media (prefers-color-scheme: light) {
    tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
    }
}

@media (prefers-color-scheme: dark) {
    tbody tr:nth-of-type(even) {
    background-color: #383838;
    }
}

This operates based on what the browser / OS settings are.

But the user can prefer dark mode, but select light mode in the theme and this then breaks.

How would I go around detecting when the switch is flicked so it can change the CSS? :)

[adityatelange]

@bee-san We use a event listener to switch the theme.
You may find it below

hugo-PaperMod/layouts/partials/footer.html

Lines 54 to 67 in 77ff1e6

	{{- if (not .Site.Params.disableThemeToggle) }}
	<script>
	document.getElementById("theme-toggle").addEventListener("click", () => {
	if (document.body.className.includes("dark")) {
	document.body.classList.remove('dark');
	localStorage.setItem("pref-theme", 'light');
	} else {
	document.body.classList.add('dark');
	localStorage.setItem("pref-theme", 'dark');
	}
	})
	</script>
	{{- end }}

[kdkasad]

@bee-san If you want to stick to CSS, you can check whether the body element has the dark class:

tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}

body.dark tbody tr:nth-of-type(even) {
    background-color: #383838;
}

[bee-san]

This does it!!! Damnn thanks!!!!

[sourcevault]

Hi,

I have a CSS issue similar to Ben.

What is the general technique for writing CSS shortcode to take into account dark mode ?

would something like what is shown below do the trick :

    .box-shortcode.important {
      background: #f7ec2c7d;
    }

    .box-shortcode.important.dark {
      background: #757575;
    }