Custom colors for lists - symbols and/or text [editor only]

Share & showcase
,
1

Just a little CSS snippet I find helpful. I mostly created this because while I love the idea of list level indicators (aka bullet point relationship lines), I found it broke when list items wrapped. It’s also a bit visually too cluttered for me. Using colors (for me) is cleaner and also quicker to parse.

Obviously you’ll most likely want to change the colors to something more subtle, but I still like to keep the rainbow motif because again I don’t have to think what level = what color.

Feel free to offer better ways to do this (I’m by no means skilled with CSS).

This controls the color of the list symbol, up to 6 levels deep:

/* Unordered */

.cm-formatting.cm-formatting-list.cm-formatting-list-ul.cm-list-1 {
    color: red !important;
    font-weight: bold;
    font-size: large;
}

.cm-formatting.cm-formatting-list.cm-formatting-list-ul.cm-list-2 {
    color: orange !important;
    font-weight: bold;
    font-size: large;
}

.cm-formatting.cm-formatting-list.cm-formatting-list-ul.cm-list-3 {
    color: yellow !important;
    font-weight: bold;
    font-size: large;
}

.HyperMD-list-line.HyperMD-list-line-4 .cm-formatting-list-ul.cm-list-1 {
    color: green !important;
}

.HyperMD-list-line.HyperMD-list-line-5 .cm-formatting-list-ul.cm-list-2 {
    color: blue !important;
}

.HyperMD-list-line.HyperMD-list-line-6 .cm-formatting-list-ul.cm-list-3 {
    color: purple !important;
}

/* Ordered */

.cm-formatting.cm-formatting-list.cm-formatting-list-ol.cm-list-1 {
    color: red !important;
}

.cm-formatting.cm-formatting-list.cm-formatting-list-ol.cm-list-2 {
    color: orange !important;
}

.cm-formatting.cm-formatting-list.cm-formatting-list-ol.cm-list-3 {
    color: yellow !important;
}

.HyperMD-list-line.HyperMD-list-line-4.CodeMirror-line .cm-formatting-list-ol.cm-list-1 {
    color: green !important;
}

.HyperMD-list-line.HyperMD-list-line-5.CodeMirror-line .cm-formatting-list-ol.cm-list-2 {
    color: blue !important;
}

.HyperMD-list-line.HyperMD-list-line-6.CodeMirror-line .cm-formatting-list-ol.cm-list-3 {
    color: purple !important;
}

Also as a bonus, you can use the following to control the list text:

/* Control text color for both ul and ol, not including list symbol (all levels) */

.HyperMD-list-line {
    color: var(--frost3) !important;
}

And if you would like to control the text color of the individual levels (not something I use), this is what works. To add additional levels just change the HyperMD-list-line-1 to whatever level you want.

/* Control text color for both ul and ol, not including list symbol (only level 1) */

.HyperMD-list-line.HyperMD-list-line-1.CodeMirror-line {
    color: red !important;
}
2

@entropic: nice !! I have added them to the Githubrepository, section Stylized Lists.

3

Awesome! Thanks!!