Customised highlight color

[LetsDoIt]

Hi!

I am fairly new to Obsidian and now trying to change the appearance of my notes. I use the theme Prism and using the dark mode. However, when I highlight some text by using “==”" (==example==), the text background colour is not very visible.

I tried to change it with a snippet and especially something that works with the community plugin Style Settings. Here is what I have so far:

/* @settings

name: My Own Settings
id: my-own-settings
settings:
    - 
        id: settings-colors
        title: My Colors
        type: heading
        level: 3
    - 
        id: text-highlight-bg
        title: Highlight Background Color
        type: variable-color
        format: hsl-split
        default: '#007AFF'

*/

It is visible in the settings and I can choose a different colour. But it has no impact on the appearance of my notes, even if I switch back to the default theme.

Any idea of what I am doing wrong?
Thanks a lot in advance!

[ariehen]

Two things:

• text-highlight-bg points to text-highlight-bg-rgb which is a rgb value, so change format: hsl-split → format: rgb in the Style Settings section. hsl-split doesn’t seem to work there. All else looks fine there.

• The Style Settings section alone isn’t going to do anything (other than showing up in Style Settings) if there’s no CSS written that it’s pointing to. Give this a try including the bottom section:

/* @settings

name: My Own Settings
id: my-own-settings
settings:
    - 
        id: settings-colors
        title: My Colors
        type: heading
        level: 3
    - 
        id: text-highlight-bg
        title: Highlight Background Color
        type: variable-color
        format: rgb
        default: '#007AFF'

*/

body.theme-dark {
  --text-highlight-bg-rgb: 0, 122, 255; 
  --text-highlight-bg: rgba(var(--text-highlight-bg-rgb), 0.4);
}

[LetsDoIt]

It worked perfectly, thanks!

Just for me to learn: I found the name of the variable text-highlight-bg here. How do I know that it points to text-highlight-bg-rgb?

[ariehen]

There’s a great guide here. Well worth your time if you’re interested in this stuff.

Obsidian CSS Inspector Workflow

Obsidian CSS Inspector Workflow This was originally called “Obsidian CSS Quick Guide” but it ended up being more focused on the inspector. As a retrospective change to help people use this as a resource, it has been renamed. – FireIsGood Hi friends! CSS in Obsidian can be confusing to get into, so this is a guide to get you started with information on the tools, methods, and some background knowledge! Let’s get started by looking at how you can look behind the curtain of Obsidian’s visuals. …

You can also copy the entire app.css and save it somewhere for quick reference. Just remember to update it every once and a while as it will change with Obsidian updates.

Checking the theme.css file from your community theme is also something that occasionally needs checking if you can’t find whatever with the inspector.