Page title background is dominated by 1 color

Questions & Help
,
1

I want to give the page title a background color and white font. The background color in light theme and dark theme is different, the font color (white) is the same for both.

This is what I have:

h1.title {
  font-family: "Victor Mono" !important;
  color: white !important;
  font-weight: bold !important;
  border-radius: 6px;
  padding-left: 8px;
  padding-right: 8px;
}

.dark-theme, h1.title,
html[data-theme=dark] {
  background-color: red !important;
}

.white-theme, h1.title,
html[data-theme=light] {
  background-color: blue;
}

However, I then get the blue background in Light mode too, even if I put the white-theme block below the dark-theme block. So, for now, I have disabled the dark-theme block.

I must be doing something wrong but I don’t know what.

2

I’m going to assume you mean the red background in light theme. :yum:

Change it to

.dark-theme h1.title,
html[data-theme=dark] {
  background-color: red !important;
}

.white-theme h1.title,
html[data-theme=light] {
  background-color: blue;
}

And play a game of find the differences.
Hint: it’s the comma.

1 Like
3

@Siferiax I got what you said about the comma, it’s the one after the h1.title.
Nevertheless, it does not work with the red in the dark theme syntax and the blue in the light, it is still red blue for both.

Switching red and blu e makes the red the dominant. So, whichever color is in the lower block is the one that is shown. If I add !important to the upper block, that will then be the color for both.

4

No the one before. Change it to the exact code I wrote. That worked on my graph.

To elaborate the comma separates the statements.
It is valid for and the dark theme and the h1.title.
By removing the comma the syntax changes to h1.title within .dark-theme.

5

Yes, that works fine. OK, I get the logic of the commas.

The only thing I still don’t understand is why do you use .white-theme instead of .light-theme? I know I did in my OP, but that is because I copied it from somewhere.

I tried changing white to light and that works too.

I have marked your reply as the solution.

6

I guess it’s interchangeable? I’m not sure myself. I based myself on my knowledge of css in general. Not so much Logseq specific parts.

1 Like
7

Goes to show how little I know about CSS. The little bit I know I picked up at Obsidian and there I never saw “white” mentioned instead of “light”.

Anyway, it’s no big deal, both work, and that’s what counts.

1 Like