How to change color of numbered list?

Hey,

I am using a theme a friend sent me with some custom css since it looks quite nice, but I noticed that numbered lists are black, and since it’s a black theme you don’t see the numbers.

I have tried changing the CSS myself by looking for the numbered list in the editor and managed to change the color in the editor. But once I apply those changes to my .css file they don’t work. I am 100% sure that I am editing the correct file, I double checked it.
I guess I am lacking CSS skills…

How I tried changing the color:
I created a numbered list in the markdown, opened editor mode and went through the html/css until I found the correct line(The number is highlighted). Then went through all the css Styles and tried setting the color to white.

A few examples:

.markdown-source-view.mod-cm6 .cm-formatting-list-ol {
        color: white;
}

.markdown-source-view.mod-cm6 .cm-line > * {
        color: white;
}

.cm-s-obsidian .cm-formatting-list {
      color: white;
}

But none of them seem to work once I add them to my .css file.

A screenshot is attached, I hope someone can help me figure it out since it really drives me crazy…

Thank you :slight_smile:

So, I’m going to assume this theme isn’t in the Obsidian Community theme gallery? Is there a link to, or can you post it somewhere so we can have a look?

This is completely up to you, but in general it’s better to modify a theme with CSS snippets instead of modifying the theme.css file itself.

The issue looks like it’s here, but it’s hard to know without seeing the full theme.css.

1 Like

Hey, thank you so much for helping me!

The Theme is indeed in the Theme Gallery, sorry for not mentioning it in the original post!
It’s called “Cyber Glow”, and I am using some snippets, I should have clarified that :slight_smile:

I will attach the .css snippets I’m using to the original post.

Thanks again!

It seems I am to stupid to figure out how to attach the original post, as I can’t seem to edit it.

The snippets I am using are attached, the “main” snipped is the “fix_glow_theme.css” I think.

fix_glow_theme.css (18.3 KB)
headings.css (678 Bytes)
Iterative_Rainbow_Folder_Titles.css (11.6 KB)

Just with a quick look, you’ve got the same line at the end of all three snippets and one doubled (targeting editing view) in one?!. The headings.css one is without a ; after white. I’d remove all those lines. :melting_face:

After removing all that, give this a try. It may or may not work depending on what else is going on. Good luck!

ol>li:not(.task-list-item)::before, .cm-s-obsidian .cm-formatting-list {
  color: var(--color-orange);
}
1 Like

Yeah, those same three lines where my attempts in changing the color, I should have removed them beforehand.

I did add your code to the “fix_glow_theme.css” and reloaded the snippet but it’s still not visible :frowning:

But thank you for your effort!

The following now works :slight_smile:

.cm-s-obsidian .cm-formatting-list {
  color: var(--color-orange);
}

Thanks again for your help, I really appreciate it!!!

Great! Thought you were in for the long haul. :sweat_smile:

I just used ol>li:not(.task-list-item)::before, from the main theme and it worked for me, but it’s not necessary for editing/source mode (as you probably figured out).

1 Like

You really made my day, I was ripping my hair out over this.

Thank you so much again!!!

1 Like

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