Are these CSS snippets correct?

I’ve created these two CSS snippets.

They do work, but I’m a noob to both CSS and Obsidian theming. Not sure if these are the best/proper ways to achieve these changes. Not sure I’m selecting only the necessary and sufficient classes, etc.

Can you let me know if there are any mistakes or redundancies, and if so, what I did wrong? I’d like to make sure I’m doing this right before I create more snippets.

Thank you!!

1. Change the color of links in highlighted (==) text

.cm-s-obsidian span.cm-highlight .cm-s-obsidian span.cm-link, .cm-s-obsidian span.cm-hmd-internal-link {
    color: rgba(21, 146, 255, 1);
}

2. Change the highlight color of searched text

.cm-s-obsidian span.obsidian-search-match-highlight {
    background-color: rgba(233, 45, 228, 0.3);
}

Btw, I think these would be relatively uncontroversial, clear improvements to the default theme. I’ve previously suggested both but nothing came of it:

1 Like

I agree with you that both changes should be added to the default theme.

Nevertheless I’ll give you the minimal css snippet needed for each one (I will apply them on my vault too):

1. Change the color of links in highlighted (==) text

.cm-highlight.cm-link, .cm-highlight.cm-hmd-internal-link {
    color: rgba(21, 146, 255, 1);
}

When you need to apply a css rule to an element with 2 classes you write .class1.class2. In this case, we need to select links inside a highlight, and internal links inside a highlight.

image

OBS: Links outside a highlight (==) still use the default purple color.

2. Change the highlight color of searched text

.obsidian-search-match-highlight {
    background-color: rgba(233, 45, 228, 0.3);
}

OBS: Text outside a highlight (==) is highlighted with the default yellow background-color.

1 Like

Amazing reply. Thank you!

1 Like

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