Option to add colors for headers from theme

[d9k]

Please add option to apply headers colors from theme (--h1-color, --h2-color, ...etc)

It's much easier to see current level and navigate:

before	after

Also selected header font weight must not differ from font weight of non-selected items. Because different font weight of selected item forces quiet outline tree markup to "jump" back and forth on scrolling: 1-line item sometimes becomes 2-lines item on different font weight

[d9k]

My quiet-outline-plugin-mod.css snippet (can be added in Obisidan options -> Appearance -> CSS snippets)

/** Headers color */

.quiet-outline .n-tree .n-tree-node.level-1 > .n-tree-node-content .n-tree-node-content__text,
.quiet-outline .n-tree .n-tree-node.level-1 > .n-tree-node-content .n-tree-node-content__text a.tag {
  color: var(--h1-color);
}

.quiet-outline .n-tree .n-tree-node.level-2 > .n-tree-node-content .n-tree-node-content__text,
.quiet-outline .n-tree .n-tree-node.level-2 > .n-tree-node-content .n-tree-node-content__text a.tag{
  color: var(--h2-color);
}

.quiet-outline .n-tree .n-tree-node.level-3 > .n-tree-node-content .n-tree-node-content__text,
.quiet-outline .n-tree .n-tree-node.level-3 > .n-tree-node-content .n-tree-node-content__text a.tag{
  color: var(--h3-color);
}

.quiet-outline .n-tree .n-tree-node.level-4 > .n-tree-node-content .n-tree-node-content__text,
.quiet-outline .n-tree .n-tree-node.level-4 > .n-tree-node-content .n-tree-node-content__text a.tag{
  color: var(--h4-color);
}

.quiet-outline .n-tree .n-tree-node.level-5 > .n-tree-node-content .n-tree-node-content__text,
.quiet-outline .n-tree .n-tree-node.level-5 > .n-tree-node-content .n-tree-node-content__text a.tag{
  color: var(--h5-color);
}

/** Selected node */
.quiet-outline .n-tree-node.located {
  background-color: #16332d;
}

.quiet-outline .n-tree-node.located p {
  font-weight: 400;
}

.quiet-outline .n-tree-node.located p {
  color: unset;
}

[d9k]

Also see my CSS snippet to fix headers style in Obsidian for reference:

• headers-colors.css

Main feature is that code, tags and links inside headers are the same color as the header containing them.

[bushnerd]

My quiet-outline-plugin-mod.css snippet (can be added in Obisidan options -> Appearance -> CSS snippets)

/** Headers color */

.quiet-outline .n-tree .n-tree-node.level-1 > .n-tree-node-content .n-tree-node-content__text,
.quiet-outline .n-tree .n-tree-node.level-1 > .n-tree-node-content .n-tree-node-content__text a.tag {
  color: var(--h1-color);
}

.quiet-outline .n-tree .n-tree-node.level-2 > .n-tree-node-content .n-tree-node-content__text,
.quiet-outline .n-tree .n-tree-node.level-2 > .n-tree-node-content .n-tree-node-content__text a.tag{
  color: var(--h2-color);
}

.quiet-outline .n-tree .n-tree-node.level-3 > .n-tree-node-content .n-tree-node-content__text,
.quiet-outline .n-tree .n-tree-node.level-3 > .n-tree-node-content .n-tree-node-content__text a.tag{
  color: var(--h3-color);
}

.quiet-outline .n-tree .n-tree-node.level-4 > .n-tree-node-content .n-tree-node-content__text,
.quiet-outline .n-tree .n-tree-node.level-4 > .n-tree-node-content .n-tree-node-content__text a.tag{
  color: var(--h4-color);
}

.quiet-outline .n-tree .n-tree-node.level-5 > .n-tree-node-content .n-tree-node-content__text,
.quiet-outline .n-tree .n-tree-node.level-5 > .n-tree-node-content .n-tree-node-content__text a.tag{
  color: var(--h5-color);
}

/** Selected node */
.quiet-outline .n-tree-node.located {
  background-color: #16332d;
}

.quiet-outline .n-tree-node.located p {
  font-weight: 400;
}

.quiet-outline .n-tree-node.located p {
  color: unset;
}

Thanks, it works well.