Hi. Was wondering if anyone had any tips on locating where in the css of Gitsidian theme (or more generally) I might find the code for Preview highlight color. Edit more yellow highlight is nice and light. Preview mode is luminescent and blinding. Would love to dial it back a bit.
Happy holidays
Things I have tried
Looking for “highlight” in css
Looking through the “text” finds in css
I found one “yellow” mention, but that doesn’t seem to be right
.markdown-preview-view mark {
color: #24292e !important;
background-color: yellow !important;
}
highlight = <mark>
Attention: If you made changes directly in theme css file, next time you update the theme your changes will be overrides. The best method is to create a css snippet to override a specific theme style. (sometime you need to add “! important” to force the override)
So, when I came across that piece of the code it says “yellow”, but the hex is some sort of gray-blue. Obviously, I’m an Uber-novice when it comes to this stuff, so I apologize in advance for what I don’t know.
color: is related to text (text color); background is related with background for text, precisely the highlight.
I don’t know if you work with dark theme, light theme or both. I say this because if you define a color with a specific value (not a variable one) the color is applied to both cases, dark and light.
(and don’t need to apologize )
This was very helpful. Thank you. Last question: I have a few snippets i place that I copied from elsewhere. If I were to create my own snippet for, say, lemon yellow is there a particular way to write that in the css file other than just copying the original code with the changed color as a snippet? Or, is there a particular way I need to write this?
I’m not sure if I understand well your question (english isn’t my native language and sometimes I’m “lost in translation”)
You can create a new css file or add you snippet to an existing css file in use (other snippet).
Let’s say you just want to change the background color for highlighted text (not the color of the text). For that you just need to add this:
.markdown-preview-view mark {
background-color: yellowgreen;
}
.markdown-preview-view mark means the target
code between { } is the style things applied to the target.
Tip: to find some targets in Obsidian you can use the dev console, as in browsers, using the command cmd+alt+i or Obsidian > View > Toggle Developer Tools. Then, click in the top target command (my red arrow) and after in your real target (for example an highlighted text in preview mode).
After the target identified you will see something like this in you dev. tool:
This is the css code related with your target. The code you will add via snippet will also appear here.
In my example I didn’t add !important but somethings it’s necessary. You need to try and if no changes add !important.
Thank you so much for this. It’s very kind of you to take the time to explain. I’ll work through this, and see what I can make of it and report back. Happy holidays
)
