[FR] Ability to change the colour of bullet points

[something12356]

Is your feature request related to a problem? Please describe. I like bullet points to be noticeable. I struggle to differentiate between them and the dark background.

Describe the solution you'd like The ability to customise the colour of bullet points. If this isn't possible to add to style settings is it possible for me to add some CSS in the file to change the colour?

Describe alternatives you've considered I've attempted to edit the CSS myself to change the colour but have not had any success.

Additional context Here is an example of a different theme which has another colour for the bullet points, I'd like to be able to choose the colour myself ideally. It would also be nice to have the ability to change the colour of other elements such as horizontal bars, but bullet points are the ones I care the most about.

[damiankorcz]

Hi @something12356, I feel like this is a fairly niche feature so for the time being I will recommend you to use a CSS snippet to address this. If this comes up again from other users I'll consider adding it as an option in Style Settings.

---

You can customise the colour of bullet points and the numbers in a numbered list as well as the horizontal bars with built in Obsidian CSS varaibles.

body {
    --list-marker-color: var(--color-blue-base); /* Colour of list bullet points / numbers in numbered lists */
    --indentation-guide-color: var(--color-blue-base); /* Colour of vertical lines in lists */
}

You can use the predefined colour variables in Prism as shown above to best match up with the theme. There are 10 colours and 3 shades of each.

• Replace the blue part of the variables above with one of the following colours: grey, red, orange, yellow, green, mint, cyan, blue, purple or pink
• Replace the base part of the variables above with one of the following shades: base, tint or text.

You can also use the following variables to synchronise with the currently selected UI accent colour shades: --interactive-accent-base, --interactive-accent-tint, or --interactive-accent-text

... and of course you can chose your own colours if you wish instead of the variables (any common CSS colour type should work).

[something12356]

Thank you very much! This works perfectly for changing the bullet points and the indentation lines. By the horizontal bar I meant the line that you can create by typing --- like this: Do you know how would I change the colour of this? I've tried searching in some theme files to see what it's called but haven't found anything.

[damiankorcz]

Hi @something12356, I apparently mixed up my horizontal / vertical 😅 As for the colour of the ---, you can do the same as above but with this variable:

body {
--hr-color: var(--color-blue-base);
}

[something12356]

Yep that works, thank you so much!