How to capture the state of the dark-mode button?

[dense-set]

Description

Hi! I am making a website, and would like to add the dark-mode button to it. Quarto documentation gives a simple way here to achieve this.

Now, I also want to write custom CSS for the website, which must depend on whether the user has selected the light mode or the dark mode. How can I do so?

(Feel free to explain it in a simple context, like changing the font color of some text.)

[cscheid]

It really will pay off for you to learn to use the developer tools on Chrome or Firefox. I encourage you to do it. Here's a quick look at them:

dark.mov

As you can tell, there's a class on the body element, quarto-dark or quarto-light

[mcanouil]

Additionally, there are great resources online to get started with web technologies, see https://www.w3schools.com and https://developer.mozilla.org/en-US/ amongst others.

[dense-set]

Thanks! In fact, I am referring to them often!