# Help changing color of headers 2023

**URL:** <https://forum.obsidian.md/t/help-changing-color-of-headers-2023/67907>\
**Category:** Devs: Theme Design & Custom CSS\
**Tags:** custom-css\
**Created:** [September 22, 2023, 8:44am UTC](https://forum.obsidian.md/t/help-changing-color-of-headers-2023/67907 "2023-09-22T08:44:19Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![G\_ben](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/g/71c47a/32.png) [@G\_ben](https://forum.obsidian.md/u/G_ben)\
**Post date:** [September 22, 2023, 8:44am UTC](https://forum.obsidian.md/t/help-changing-color-of-headers-2023/67907/1 "2023-09-22T08:44:20Z")

</div>

### 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](https://forum.obsidian.md/t/help-changing-color-of-headers/1465):
>
> 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](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!

---

<div class="post-metadata">

**Author:** ![ariehen](https://forum.obsidian.md/user_avatar/forum.obsidian.md/ariehen/32/46932_2.png) [@ariehen](https://forum.obsidian.md/u/ariehen)\
**Post date:** [September 22, 2023, 8:54am UTC](https://forum.obsidian.md/t/help-changing-color-of-headers-2023/67907/2 "2023-09-22T08:54:40Z")

</div>

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:

```css
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](https://help.obsidian.md/Extending+Obsidian/CSS+snippets)**
>
> Learn how to modify aspects of the Obsidian appearance without needing to Build a theme. CSS is a language to describe how to present a HTML document. By adding CSS snippets, you can redefine parts o…

---

<div class="post-metadata">

**Author:** ![G\_ben](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/g/71c47a/32.png) [@G\_ben](https://forum.obsidian.md/u/G_ben)\
**Post date:** [September 22, 2023, 11:01am UTC](https://forum.obsidian.md/t/help-changing-color-of-headers-2023/67907/3 "2023-09-22T11:01:22Z")

</div>

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?

```auto
/ *******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;
}

```

---

<div class="post-metadata">

**Author:** ![ariehen](https://forum.obsidian.md/user_avatar/forum.obsidian.md/ariehen/32/46932_2.png) [@ariehen](https://forum.obsidian.md/u/ariehen)\
**Post date:** [September 22, 2023, 11:30am UTC](https://forum.obsidian.md/t/help-changing-color-of-headers-2023/67907/4 "2023-09-22T11:30:01Z")

</div>

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](https://docs.obsidian.md/Reference/CSS+variables/CSS+variables) 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.

---

<div class="post-metadata">

**Author:** ![system](https://forum.obsidian.md/uploads/default/original/3X/b/e/bec35fbd23ab28909bb6bfe62cb32eb82dd34019.png) [@system](https://forum.obsidian.md/u/system)\
**Post date:** [September 29, 2023, 11:30am UTC](https://forum.obsidian.md/t/help-changing-color-of-headers-2023/67907/5 "2023-09-29T11:30:52Z")

</div>

Closed on September 29, 2023, 11:30am UTC

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.