Obsidian Custom Heading Colors

readme.md

Here is a CSS snippet for Obsidian to customize heading colors in the default theme where the headings are all the same color. This will help provide some contrast between the headings, without being too obnoxious.

Dark Theme

Element	Color
H1	#7fbbb3
H2	#83c092
H3	#a7c080
H4	#dbbc7f
H5	#e69875
H6	#e67e80

Light Theme

Element	Color
H1	#5a93a2
H2	#569d79
H3	#899c40
H4	#bf983d
H5	#f57d26
H6	#f85552

Usage

File Placement

Place custom-header-colors.css file in your vault's snippets folder .obsidian/snippets.

Activation

1. Open settings
2. Click the "Appearance" tab
3. Activate "custom-header-colors"

custom-heading-colors.css

 :root {
     --faded-blue: #7fbbb3;
     --faded-aqua: #83c092;
     --faded-green: #a7c080;
     --faded-yellow: #dbbc7f;
     --faded-orange: #e69875;
     --faded-red: #e67e80;
     --faded-purple: #B99CD6;
  
     --light-blue: #5a93a2;
     --light-aqua: #569d79;
     --light-green: #899c40;
     --light-yellow: #bf983d;
     --light-orange: #f57d26;
     --light-red: #f85552;
     --light-purple: #A150F2;
 }

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

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

thankyou

thx <3