Trying to color the Outline headers/levels

[juanbretti]

Hello,
I am trying to color the headers at the Outline, to match what is proposed here: How to change the header size & colour of the LYT theme - #4 by ariehen

I want to achieve and improve this:

I have this CSS for the note headers:

/* https://forum.obsidian.md/t/how-to-change-the-header-size-colour-of-the-lyt-theme/58883/4 */

.inline-title { 
    color: var(--color-red);
}

.cm-header-1, .markdown-preview-view h1, .markdown-rendered h1 {
    color: var(--color-red);
}

.cm-header-2, .markdown-preview-view h2, .markdown-rendered h2 {
    color: var(--color-orange);
}

.cm-header-3, .markdown-preview-view h3, .markdown-rendered h3 {
    color: var(--color-yellow);
}

.cm-header-4, .markdown-preview-view h4, .markdown-rendered h4 {
    color: var(--color-green);
}

.cm-header-5, .markdown-preview-view h5, .markdown-rendered h5 {
    color: var(--color-blue);
}

.cm-header-6, .markdown-preview-view h6, .markdown-rendered h6 {
    color: var(--color-purple);
}

And this other file for the Outline:

/* h1 */
div[data-type="outline"] .tree-item-self[style*="margin-left: 0px"] .tree-item-inner {
    color: var(--color-red);
}

/* h2 */
div[data-type="outline"] .tree-item-self[style*="margin-left: -17px"] .tree-item-inner {
    color: var(--color-orange);
}

/* h3 */
div[data-type="outline"] .tree-item-self[style*="margin-left: -34px"] .tree-item-inner {
    color: var(--color-yellow);
}

/* h4 */
div[data-type="outline"] .tree-item-self[style*="margin-left: -51px"] .tree-item-inner {
    color: var(--color-green);
}

/* h5 */
div[data-type="outline"] .tree-item-self[style*="margin-left: -68px"] .tree-item-inner {
    color: var(--color-blue);
}

/* h6 */
div[data-type="outline"] .tree-item-self[style*="margin-left: -85px"] .tree-item-inner {
    color: var(--color-purple);
}

What do you think? Is it efficient? Or is there any other way to point at the Outline levels? Notice that I am using the margin-left value.

For now, I have it in two files, just for debugging.

Thanks!

[pit]

I found once solution on reddit that works fine for me

:root {
  --h1-color: #7dd3fc;
  --h2-color: #a78bfa;
  --h3-color: #e879f9;
  --h4-color: #34d399;
  --h5-color: #facc15;
  --h6-color: #60a5fa;
}

[data-type="outline"] {
  /* h1 */
  .tree-item > .tree-item-self {
    color: var(--h1-color);
  }

  /* h2 */
  .tree-item .tree-item > .tree-item-self {
    color: var(--h2-color);
  }

  /* h3 */
  .tree-item .tree-item .tree-item > .tree-item-self {
    color: var(--h3-color);
  }

  /* h4 */
  .tree-item .tree-item .tree-item .tree-item > .tree-item-self {
    color: var(--h4-color);
  }

  /* h5 */
  .tree-item .tree-item .tree-item .tree-item .tree-item > .tree-item-self {
    color: var(--h5-color);
  }

  /* h6 */
  .tree-item .tree-item .tree-item .tree-item .tree-item .tree-item > .tree-item-self {
    color: var(--h6-color);
  }
}

source: https://www.reddit.com/r/ObsidianMD/comments/18l85g6/how_to_put_the_same_color_here/

[juanbretti]

Just a small correction to your great solution:

[data-type="outline"] {
    /* h1 */
    .tree-item .tree-item-self > .tree-item-inner{
        color: var(--color-red);
    }

    /* h2 */
    .tree-item .tree-item .tree-item-self > .tree-item-inner{
        color: var(--color-orange);
    }

    /* h3 */
    .tree-item .tree-item .tree-item .tree-item-self > .tree-item-inner {
        color: var(--color-yellow);
    }

    /* h4 */
    .tree-item .tree-item .tree-item .tree-item .tree-item-self > .tree-item-inner{
        color: var(--color-green);
    }

    /* h5 */
    .tree-item .tree-item .tree-item .tree-item .tree-item .tree-item-self > .tree-item-inner{
        color: var(--color-blue);
    }

    /* h6 */
    .tree-item .tree-item .tree-item .tree-item .tree-item .tree-item .tree-item-self > .tree-item-inner{
        color: var(--color-pink);
    }
}

This code revision solves the issue of text being white when the mouse hovering the element.

To have in mind, this is not perfect. Because the way Outline renders the levels, could be a mismatch. Check the following example: