Is it possible to set a class in the class in CSS?

Question

I made a dark theme for my site and it works on the principle that when a button is clicked, a javascript code automatically adds a DARK class to the body tag. How can I make it so that the H1 tag has a white color when the body has a DARK class, and a gray color when there's no DARK class on the body tag?

Answer 1

Create 2 stylesheets, 1 default and the other dark. Then look at Switching between multiple CSS files using Javascript for changing the stylesheet on the fly. You will also need to store the users selecting within a cookie then retrieve the value and use the same code to change the stylesheet (otherwise the user needs to select the option for each page that they visit).

Answer 2

Even though your question is poorly worded, I think I understand what you are trying to do.

If I understand correctly, you want your H1 tag to have a white color if the BODY tag has a dark class added to it, and gray color if there's no dark class.

This is pretty easy to achieve with CSS, so I'll just give an example that will help you understand this.

In your CSS file (if you use a separate stylesheet file) or style tag, add a body > h1 style like so:

body > h1{
  color: gray;
}

The above styling changes the default H1 tag color to gray when the site loads. To have toe color change automatically when you programatically add a dark class to the site's body tag, add the following style (immediately below the above one preferably):

body.dark > h1{
  color: white;
}

The style above changes the H1 tag color to white if there's a dark class on the BODY tag.

In summary, your site style should look something like below to achieve your specific request:

body > h1{
  color: gray;
}

body.dark > h1{
  color: white;
}

You should really study more on CSS as this is really not difficult to achieve with CSS.