Help changing color of headers 2023

[G_ben]

What I’m trying to do

I am completely new to obsidian. I want to change color of the headings and customize them.

Things I have tried

I already read this:

Help changing color of headers

Hello community. First, I should say that I am new in all this, so sorry if I am doing bad posting in here or any other mistake I make. I just wanted to know how to change/modify the css file and change color of h1, h2, h3… I really dont need fancy things, just changing colour for preview and editor mode inside obsidian. Does any of you have simple code to add to the css file to change it? Thank you!

but not working, and the answer is not that well detailed, since obsidian.css file is not easy to find. then I found the CSS snippets, created my file: heading_colors and added this command:
h1 { color: blue; }
h2 { color: red; }
h3 { color: cyan; }
but nowhtin changed.
Then I looked up to this tutorial: https://www.youtube.com/watch?v=iCRmtNmGA9k&ab_channel=HeurekaLabs
it is well done but not much detailed for a zero zero level, like me. I tried out many options but still not found a way to just change the colors of the headings.

if someone can help me I could be greatful!

[ariehen]

The first question is what theme are you using? What CSS works or not will vary by theme.

If you are using the default theme (and many others), this will work for Editing and Reading views:

body {
    --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);
}

The var(... sections can be replaced with red, #ff0000, etc.

CSS snippets - Obsidian Help

[G_ben]

Hi, I am using the Default mode.
thank you very much for your answer! it is working!

while reading other things I found also this code, do you know what is the difference between your method and this one?

/******* HEADING COLORS *******/
.markdown-preview-view h1,
.cm-header-1
{
  color: red;
}

.markdown-preview-view h2,
.cm-header-2
{
  color: darkgreen;
}

.markdown-preview-view h3,
.cm-header-3
{
  color: blue;
}

.markdown-preview-view h4,
.cm-header-4
{
  color: violet;
}

.markdown-preview-view h5,
.cm-header-5
{
  color: lightblue;
}

.markdown-preview-view h6,
.cm-header-6
{
  color: azure;
}

[ariehen]

Obsidian has Editing and Reading views.

In this case, .markdown-preview-view h1 is for Reading/rendered view.

.cm-header-1 is for Editing view (Source and Live Preview; different but still Editing view).

The custom properties in the snippet I shared are convenient to take care of both Editing and Reading modes together. Sometimes they aren’t enough to do what you want, but most of the time they are fine.

In this case both snippets are doing more or less the same thing.