Try to change appearence of some tags via css

Custom CSS & Theme Design
1

I have a custom CSS and was able to change Text- and Backround-Color of specific tags. At the moment, this only works in reading view. Because I am quite a noob: could someone please change the code, so that it works in editing view too?

.cm-s-obsidian span.cm-hashtag-begin,
.cm-s-obsidian span.cm-hashtag,
.cm-s-obsidian span.cm-hashtag-end,
a.tag {
    font-family: inherit;
	padding: 0px 0px;
    text-decoration: none;
}

.tag[href^="#ListedTag1"] {
	color: green;
	background-color: blue !important;
}

.tag[href^="#ListedTag2"] {
	color: yellow;
	background-color: blue !important;
}

.tag[href^="#ListedTag3"] {
	color: red;
	background-color: blue !important;
}
2

The post here from efemkay is a good summary of styling tags in the editor:

Styling individual tags is a chore, but you can probably get away with adding:

.cm-tag-ListedTag1 {
    color: green;
    background-color: blue;
}

.cm-tag-ListedTag2 {
    color: yellow;
    background-color: blue;
}

...

to what you have now for your use case.

3

Thank you replying (and for moving my Post to the approbiate place)

It seems, it worked!

BUT: How does it work with spezial charakters like ä?
It is not possible, I assume?

4

Using

.cm-s-obsidian .cm-hashtag {
    padding: 2px 3px;
}

.cm-tag-ListedTag1 {
    color: green;
    background-color: orange;
}

.cm-tag-ListedTag2 {
    color: blue;
    background-color: hotpink;
}

it seems the accented characters are simply ignored in the tag:

Screenshot 2024-10-04 075729

I don’t know if that’s helpful or not, but maybe you can make it work.

5

I think, thats working! Great!
Thank you very much!