How can I change the color of the bullet points of Default Dark theme both in live preview and reading mode?

[AshrafNafi]

In the default theme, if I change the list marker color with CSS snippet it only changes the color of the number list, not the bullet points.
But in other themes, the CSS snippet works fine.

The snippet I tried:
:root body {
–list-marker-color: #a8a822;
}

In the photo, you can see that the snippet worked for the number lists but not for the bullet points.
But the same snippet is able to change the color of both bullet points and Number lists in other community themes both in Live preview mode and reading.

Note: I found only one post similar to mine and tried that solution but have not worked.

[efemkay]

See the available CSS variables for u to modify the parameters.

Quick example for your case…

body.theme-dark {
    --list-marker-color: grey;
    --list-marker-color-collapsed: yellow;
}

List - Developer Documentation

[AshrafNafi]

@efemkay Sorry, the code you have provided is not working.
Only the gray color works.
If I put any other color after --list-marker-color:, except for gray, the color doesn’t show up.
why is this happening? Could you please explain?
Btw, the collapsed color yellow works.

[AshrafNafi]

Actually, It was the Outliner Community plugin that was causing the problem.
I have turned it off and now I am able to change the color.
But how was the plugin causing the problem?

[efemkay]

@AshrafNafi the outliner plugin has a settings that apply css styles that override’s obsidian default styling, so you would need to tackle that

the setting underlined here, if you enabled this, you would need to use the snippets below, else the snippets before (or the one you used before should be fine)

so, instead of simply redefine the variable, you need to override again the outliner’s override snippets (the second part of the snippet below). here should do the trick

body.theme-dark {
    --list-marker-color: blue;
    --list-marker-color-collapsed: yellow;
}

.outliner-plugin-better-lists .list-bullet::after {
    background-color: var(--list-marker-color);
}

just additional info, here’s where the outliner plugin overrides that

[AshrafNafi]

I just turned off the “Improve style” option and everything is ok now.
Thanks for the help.