In this CSS Snippet : What is missing?

[Metatrix]

I want to change the colours of the H1, H2, etc.

I have looked in the forums and found simple code for a snippet that seemed to be working for other users.

h1 { color: blue; }
h2 { color: red; }
h3 { color: cyan; }
etc.

However, it only works when using the

syntax, and not the # syntax for headers.

I asked chatgpt and he came up with solutions like this :

.theme-light h1,
.theme-light [data-heading-level=“1”] {
color: #0E4F98;
}
.theme-light h2,
.theme-light [data-heading-level=“2”] {
color: #0E4F98;
}
.theme-light h3,
.theme-light [data-heading-level=“3”] {
color: #1658A2;
}
.theme-light h4,
.theme-light [data-heading-level=“4”] {
color: #1658A2;
}
.theme-light h5,
.theme-light [data-heading-level=“5”] {
color: #276BB8;
}
.theme-light h6,
.theme-light [data-heading-level=“6”] {
color: #276BB8;
}

But it still does not affect the headers created with the # syntax.

Anyone can help?

[ariehen]

Many themes let you easily change the look of things using the “Style Settings” plugin. Have a look in there as well, but this CSS should be sufficient to change the h1~h6 colors (tested with the default and Minimal themes).

.theme-dark, .theme-light {
  --h1-color: var(--color-red);
  --h2-color: var(--color-orange);
  --h3-color: var(--color-yellow);
  --h4-color: var(--color-green);
  --h5-color: var(--color-blue);
  --h6-color: var(--color-purple);
}

Also, it’s best not to listen to whatever rubbish ChatGPT spits out

ChatGPT is not a search engine and cannot help you use Obsidian. In addition to myriad other problems with using ChatGPT to search, it has not been trained on data from the past ~1.5 years, so it is missing at least half of Obsidian’s development.

[Metatrix]

I will that in mind. No Chatgpt for this then!

And thank you! This code does work! Learning CSS is now a thing for me hehe.

Do you know if there is there a way to put HTML colour codes instead of the name of the colours?

I tried replacing the colours with #1658A2 but it doesn’t work.

[ariehen]

Great!

--h1-color: #1658A2; should work, but you might need
--h1-color: #1658A2 !important; depending on your theme.