Headers::before not switching dark/light mode

Custom CSS & Theme Design
1

Hi everyone! I’m asking for your help concerning a CSS problem that I can’t get on top of.

What I’m trying to do

I want to have before my header a “Hnumber of header” in order to understand better the hierarchy of stuff in my notes.

With the following code it works flawlessly while in dark mode:

	h1::before {
	    content: 'H1 ';
	    font-size: 10px;
	    color: #ffffff;
	    font-family: var(--font-monospace);
	    margin: 0px 8px 0px -25px
	}

	h2::before {
	    content: 'H2 ';
	    font-size: 10px;
	    color: #ffffff;
	    font-family: var(--font-monospace);
	    margin: 0px 8px 0px -25px
	}

	h3::before {
	    content: 'H3 ';
	    font-size: 10px;
	    color: #ffffff;
	    font-family: var(--font-monospace);
	    margin: 0px 8px 0px -25px
	}

	h4::before {
	    content: 'H4 ';
	    font-size: 10px;
	    color: #ffffff;
	    font-family: var(--font-monospace);
	    margin: 0px 8px 0px -25px
	}

	h5::before {
	    content: 'H5 ';
	    font-size: 10px;
	    color: #ffffff;
	    font-family: var(--font-monospace);
	    margin: 0px 8px 0px -25px
	}

	h6::before {
	    content: 'H6 ';
	    font-size: 10px;
	    color: #ffffff;
	    font-family: var(--font-monospace);
	    margin: 0px 8px 0px -25px
	}

Since in light mode the “Hnumber of header” are white, I can’t see them well since my background is really close to white.
What I want is them to be white in dark mode and black in light mode.

Things I have tried

I changed my snippet adding .theme-dark and .theme-light in order to see the switch; resulting in the following snippet:

/*DARK MODE HEADERS */

.theme-dark {
	h1::before {
	    content: 'H1 ';
	    font-size: 10px;
	    color: #ffffff;
	    font-family: var(--font-monospace);
	    margin: 0px 8px 0px -25px
	}

	h2::before {
	    content: 'H2 ';
	    font-size: 10px;
	    color: #ffffff;
	    font-family: var(--font-monospace);
	    margin: 0px 8px 0px -25px
	}

	h3::before {
	    content: 'H3 ';
	    font-size: 10px;
	    color: #ffffff;
	    font-family: var(--font-monospace);
	    margin: 0px 8px 0px -25px
	}

	h4::before {
	    content: 'H4 ';
	    font-size: 10px;
	    color: #ffffff;
	    font-family: var(--font-monospace);
	    margin: 0px 8px 0px -25px
	}

	h5::before {
	    content: 'H5 ';
	    font-size: 10px;
	    color: #ffffff;
	    font-family: var(--font-monospace);
	    margin: 0px 8px 0px -25px
	}

	h6::before {
	    content: 'H6 ';
	    font-size: 10px;
	    color: #ffffff;
	    font-family: var(--font-monospace);
	    margin: 0px 8px 0px -25px
	}

}

/*LIGHT MODE HEADERS */

.theme-light {
	h1::before {
	    content: 'H1 ';
	    font-size: 10px;
	    color: #000000;
	    font-family: var(--font-monospace);
	    margin: 0px 8px 0px -25px
	}
	
	h2::before {
	    content: 'H2 ';
	    font-size: 10px;
	    color: #000000;
	    font-family: var(--font-monospace);
	    margin: 0px 8px 0px -25px
	}
	
	h3::before {
	    content: 'H3 ';
	    font-size: 10px;
	    color: #000000;
	    font-family: var(--font-monospace);
	    margin: 0px 8px 0px -25px
	}
	
	.h4::before {
	    content: 'H4 ';
	    font-size: 10px;
	    color: #000000;
	    font-family: var(--font-monospace);
	    margin: 0px 8px 0px -25px
	}
	
	h5::before {
	    content: 'H5 ';
	    font-size: 10px;
	    color: #000000;
	    font-family: var(--font-monospace);
	    margin: 0px 8px 0px -25px
	}
	
	h6::before {
	    content: 'H6 ';
	    font-size: 10px;
	    color: #000000;
	    font-family: var(--font-monospace);
	    margin: 0px 8px 0px -25px
	}

}

With this snippet though I can’t see at all the “Hnumber of header”, it just disappears.
The problem then must be related with .theme-dark and .theme-light, since if they’re not there everything worked.

What have I done wrong? Can someone help me? Thank you for your help and patience.

2

For Reading / rendered view, give this a try:

.theme-light h1::before {content: "H1 "; color: #000000; font-size: 10px; font-family: var(--font-monospace); margin: 0px 8px 0px -25px;}
.theme-light h2::before {content: "H2 "; color: #000000; font-size: 10px; font-family: var(--font-monospace); margin: 0px 8px 0px -25px;}
.theme-light h3::before {content: "H3 "; color: #000000; font-size: 10px; font-family: var(--font-monospace); margin: 0px 8px 0px -25px;}
.theme-light h4::before {content: "H4 "; color: #000000; font-size: 10px; font-family: var(--font-monospace); margin: 0px 8px 0px -25px;}
.theme-light h5::before {content: "H5 "; color: #000000; font-size: 10px; font-family: var(--font-monospace); margin: 0px 8px 0px -25px;}
.theme-light h6::before {content: "H6 "; color: #000000; font-size: 10px; font-family: var(--font-monospace); margin: 0px 8px 0px -25px;}


.theme-dark h1::before {content: "H1 "; color: #ffffff; font-size: 10px; font-family: var(--font-monospace); margin: 0px 8px 0px -25px;}
.theme-dark h2::before {content: "H2 "; color: #ffffff; font-size: 10px; font-family: var(--font-monospace); margin: 0px 8px 0px -25px;}
.theme-dark h3::before {content: "H3 "; color: #ffffff; font-size: 10px; font-family: var(--font-monospace); margin: 0px 8px 0px -25px;}
.theme-dark h4::before {content: "H4 "; color: #ffffff; font-size: 10px; font-family: var(--font-monospace); margin: 0px 8px 0px -25px;}
.theme-dark h5::before {content: "H5 "; color: #ffffff; font-size: 10px; font-family: var(--font-monospace); margin: 0px 8px 0px -25px;}
.theme-dark h6::before {content: "H6 "; color: #ffffff; font-size: 10px; font-family: var(--font-monospace); margin: 0px 8px 0px -25px;}
3

Thank you for the kind and fast reply!

5

I was curious so I had another look. CSS nesting is supported as of an Electron update/new Obsidian installer from a few months ago (New in Chrome 111 - Chrome Developers). I hadn’t tried nesting CSS in Obsidian, but this seems working for me (Obsidian v1.4.5 installer):

/*DARK MODE HEADERS */
.theme-dark {
 
  & h1::before {
      content: 'H1 ';
      font-size: 10px;
      color: #fff;
      font-family: var(--font-monospace);
      margin: 0px 8px 0px -25px;
  }

  & h2::before {
      content: 'H2 ';
      font-size: 10px;
      color: #fff;
      font-family: var(--font-monospace);
      margin: 0px 8px 0px -25px;
  }

  & h3::before {
      content: 'H3 ';
      font-size: 10px;
      color: #fff;
      font-family: var(--font-monospace);
      margin: 0px 8px 0px -25px;
  }

  & h4::before {
      content: 'H4 ';
      font-size: 10px;
      color: #fff;
      font-family: var(--font-monospace);
      margin: 0px 8px 0px -25px;
  }

  & h5::before {
      content: 'H5 ';
      font-size: 10px;
      color: #fff;
      font-family: var(--font-monospace);
      margin: 0px 8px 0px -25px;
  }

  & h6::before {
      content: 'H6 ';
      font-size: 10px;
      color: #fff;
      font-family: var(--font-monospace);
      margin: 0px 8px 0px -25px;
  }

}
6

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