How to color internal links in H1 to H6, in both Reading and Live Preview mode?

[JamesKF]

Hi, I use a CSS snippet to color my headers H1 to H6 :

:root
{
    --inlineTitleColor: #ffffffc2;
    --h1Color:  #bf616a;
    --h2Color:  #d08770;
    --h3Color:  #ebcb8b;
    --h4Color:  #a3be8c;
    --h5Color:  #b48ead;
    --h6Color:  #5e81ac;

    --selectionColor: #4a4a4a;
}

.theme-dark
{
    --text-title-h1:              var(--h1Color);
    --text-title-h2:              var(--h2Color);
    --text-title-h3:              var(--h3Color);
    --text-title-h4:              var(--h4Color);
    --text-title-h5:              var(--h5Color);
    --text-title-h6:              var(--h6Color);
    --text-selection:             var(--selectionColor);
}

body {
    --inline-title-color: var(--inlineTitleColor);
}

.cm-header-1,
.markdown-preview-section h1
{
    color: var(--h1Color);
}

/* Same thing for H2 to H6 */

.suggestion-item.is-selected
{
    background-color: var(--text-selection);
}

I also found a CSS to color internal links in H1 to H6, but it only works in “Reading Mode”, not in “Live Preview” :

.markdown-rendered h1 > a.internal-link, .cm-header.cm-header-1.cm-hmd-internal-link 

{
    color: var(--h1Color); 
}

/* Same thing for H2 to H6 */  

1. Does anyone know how to also make it work in Live Preview ?
2. Is the syntax correct or could it be simplified ? It looks quite convoluted to me (.markdown-rendered, .cm-header, .markdown-preview-section : what corresponds to live preview VS reading mode ?) and I’m not sure if it’s still adequate with all the updates Obsidian got. Didn’t find a proper up to date guide explaining that.

Thank you !

[DiCaver]

Look at my snippet to see if you can find something helpful…

[Snippet] Obsidian Seasonal Header Palette

Hi! This is my first post on the Obsidian forum and my first “serious” snippet - so don’t eat me alive! A few weeks ago, I saw an article about implementing custom heading colors. It was nice, but it was implemented only in editing mode. So I dived deeper and deeper, and today, here we are. Obsidian Seasonal Header Palette on GitHub Please feel free to comment and give me feedback. It will not be the last snippet, so any input will be a guideline for my next project. And yes, somewh…

Cheers, Marko

[JamesKF]

@DiCaver : Thank you, I love your idea of seasonal colors and will experiment with your CSS ! How do we quickly change e.g. : from autumn to winter palette ?

Did you have some CSS fundamentals before diving into this ? If no, do you have some recommendations that were of great help to get the gist of it (and with application to Obsidian) ?

On a side note, Kapirklaa on the Discord helped me find the following solution, which seems to do the trick and is much more elegant than what I had before :

body
{
    --inline-title-color: var(--h1-color);
    --h1-color:  #bf616a;
    --h2-color:  #d08770;
    --h3-color:  #ebcb8b;
    --h4-color:  #a3be8c;
    --h5-color:  #b48ead;
    --h6-color:  #5e81ac;
}

.HyperMD-header-1, h1 {
    --link-color: var(--h1-color);
}

/*Same for h2 to h6*/

[DiCaver]

I just used DevTool (Ctrl + Shift + I … on Windows), and then, with the inspect tool, I went through elements I was interested in. My first snippet was already “perfect,” but then I realised that reading mode has different classes … this is how I learned (and am still learning).

I’m happy that you found a solution that fits your needs!

Cheers, Marko

[JamesKF]

@DiCaver Thank you ! And how do we quickly change e.g. : from autumn to winter palette in the whole vault ?

[DiCaver]

As this is not a plugin but a snippet, unfortunately, there’s no “one-click” solution

You need to copy & paste HEX values from one of the palettes over the “default” values:

I wished to make a plugin out of this for learning purposes, but I am currently working on another plugin. However, you gave me the idea to create separate CSS files, and you turn on the one you want. I will try to do it in the next few days.

Cheers, Marko