[SOLVED] H2 heading color light & dark theme

Questions & Help
1

I want to change the color of the H2 heading, so I did tried this:

.editor-inner .h2.uniline-block, .ls-block h2 {
  color: black;
}

and that works for both the light theme (like I want) and the dark theme (like I don’t want.

So, I tried this:

.light-theme .editor-inner .h2.uniline-block, .ls-block h2, html[data-theme=light] {
  color: black !important;
}

.dark-theme .editor-inner .h2.uniline-block .ls-block h2, html[data-theme=dark] {
  color: #fce69f !important;
}

but that does not work for the dark theme. I thought it was a question of commas … again (:grinning:), so I played with them in terms of presence or deletion and placement, to no avail.

What am I doing wrong?

2

Testing this, we can actually get away with just this:

.light-theme .ls-block h2 {
 color: black;
}

.dark-theme .ls-block h2 {
 color: #fce69f;
}

Most importantly, we have to make sure we specify it is the .ls-block within .light-theme or .dark-theme and then whatever header we want (in this case h2).
To get that, we don’t add any comma’s.

1 Like
3

Many thanks for helping me with that, I was hoping you would! :+1:

Your solution works, as usual, but there is something I still don’t understand.

To set e.g. the heading size at the same level for both light and dark, I have this:

.editor-inner .h3.uniline-block, .ls-block h3 {
  font-size: 25px;
}

I inherited the code and it works fine. That is where I got the editor-inner and .h3.uniline-block bits from. It even works for color, which will also be the same for light and dark. Why then, do editor-inner and .h3.uniline-block have to be left out if I want to differentiate light and dark?

4

They probably aren’t needed in those code bits either :yum:
So it is the reverse question actually. Why do you need them for that code? Would the code still work without it?

1 Like
5

Yep, you are right, that code is not needed. That settles that question.
Sometimes/oftentimes, the simple solution is the best one, as per the KISS (keep it simple, stupid) principle.

Thank you for your probing question.