Changing Bold words inside a list

I’m using the Everforst dark them and I noticed when bullet points have items that have bold words they don’t stand out. I would like to turn them Blue for dark theme and Red for Light theme. I’ve tried a couple of things but nothing is changing. I put my code in a custom CSS file and yes I have turned on CSS Snippets. Any insight would be awesome.

Things I have tried

.HyperMD-list-line li b {
color: blue; /* Set the color of bold text to blue */
}

What I’m trying to do

I have also tried this. Still no dice.

ul li.list-bullet strong{
font-weight: bold;
color: blue;
}

Do you only want it enhanced in the lists? I chose to have it enhanced all over the place, and had success doing so using this CSS snippet:

body {
  --bold-color: rgb(100, 190, 200);
}

Maybe you could do a variation of that with some of your selectors? Let’s try, with another color just for me to see the difference:

.HyperMD-list-line .cm-strong, li strong {
  --bold-color: rgb(200, 190, 100);
}

The first selector for the editing modes, and the second for the reading mode, and it works like a charm in my cases, at least.

Missed that one, but to add this, you need to do something like the following:

.theme-dark .HyperMD-list-line .cm-strong,
.theme-dark li strong {
  --bold-color: blue;
}

.theme-light .HyperMD-list-line .cm-strong,
.theme-light li strong {
  --bold-color: red;
}
1 Like

That was it! Works perfect. Thank you!

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