Help me with my super simple css file!

Custom CSS & Theme Design
1

What I’m trying to do

I’m trying to create a CSS snippet that I can use in Obsidian to tweak the default theme headers and folder colors. I want to keep a strictly vanilla Obsidian (no themes or plugins), at least for now. So I’m hoping to just do some minor tweaks to the default theme to make things a little more visually pleasing and make my notes easier to break up with some color.

Here is what I want the header css to do:
1. Color each header with a different color (working)
2. Show the color in edit and reading mode (not working)
3. Have a — line underneath headers 1 and 2 (not working)

Here is what I want the folder css to do:

  1. Alternate colors (indefinitely) for each folder that is created.

Things I have tried

I’ve searched on reddit and this form and have been able to craft this code so far. The headers code works great but there are a couple problems (noted above) but the folders code doesn’t work at all, I think it’s meant for the Minimal theme.

Here is where I found the folder CSS: Iterative Rainbow Folder Colors css
(I like the Iterative Rainbow Folder Icons.css option)

Here is my colored header css:

 /* Header colors */
.cm-header-1 { color: #B278F2; }  
.cm-header-2 { color: #5E9BE1; }
.cm-header-3 { color: #FFC21F; }
.cm-header-4 { color: #46AC79; }
.cm-header-5 { color: #D07A40; }
.cm-header-6 { color: #D23838; }

Thank you so much for your help!

Bonus: if anyone knows of a CSS snippet that would allow me to easier insert callouts that would be awesome, something where I could hit a hotkey then select from a list of all available callouts or something like that!

3

Oh Actually I found another Obsidian help article that helped with my heading colors showing up in reading view as well as the divider line (code found on reddit). Here is what worked for me:

body {
    --h1-color: #B278F2;
    --h2-color: #5E9BE1;
    --h3-color: #FFC21F;
    --h4-color: #46AC79;
    --h5-color: #D07A40;
    --h6-color: #D23838;
}
.HyperMD-header-1::after, h1,
.HyperMD-header-2::after, h2,
.HyperMD-header-3::after, h3 {
    display: block;
    content: "";
    padding-bottom: 2px;  
    border-bottom: 1px solid gray;
}

Still not sure on how to fix the folder css to work on the default Obsidian theme.

4

And here is a link to CSS that will work on the defualt theme!

I would love to tweak this so it matches more of the icon feel, maybe I will attempt it if I have time…