Many things in question… Let me try clarify some…
-
Obsidian it’s an electron app, so it works similarly to an internet browser. Then, you can open the dev. tool (View > Toggle Developer Tools or “Ctrl+Shift+I” / “Option+Command+I”) and check some code to each element. This is an important way to identify the kind of elements you need to change in your css to override the default one (select one element and see the “Style” in dev. tool.
-
If you use a specific theme, never make changes in the theme css file. If you do it directly, one day, when you need to update the theme (because theme developer release a new update with new features or to solve some issues, ecc), your code goes away!
If the chosen theme works like an override to the default theme, you need to add a new css snippet that works like a new level that overrides the styles of the chosen theme.
You will create a new css file with the code you want to replace, place the file in the folder defined to that and activate you snippet. (Settings > Appearance > CSS snippets - here you can open the folder where you need to place your css file and activate it).
-
Now, about the code…
You can use something similar tho this:
span.cm-em.cm-highlight {
font-style: initial;
background-color: #ffbfbf;
color: #222;
}
But changes are applied to all situations: Dark or Light mode (for example, the same background-color in both cases). If you use only one mode, no problem, but if you use both you need another approach.
So, if you use both modes you need to do something similar tho this:
/* Define all colors in root */
:root
{
--highlight-lred: #E66C6C;
--highlight-dred: #FF4D4D;
}
/* Choose the wanted color (defined in root) to theme-light, adding a common name to dark/light theme and using the 'var()' function */
.theme-light {
--highlight-red: var(--highlight-lred);
}
/* Choose the wanted color (defined in root) to theme-dark, adding a common name to dark/light theme and using the 'var()' function */
.theme-dark {
--highlight-red: var(--highlight-dred);
}
/* Apply the background color to the element/class using 'var()' function and the common name chosen for both themes */
span.cm-em.cm-highlight {
background-color: var(--highlight-red);
}
/* Then, Obsidian will choose the color according to the theme: if dark use the color defined in "--highlight-dred", if light the color defined in "--highlight-lred". */
You can use this way to apply colors (background, highlights, text, etc.). You just need to identify the elements/classes and follow this steps.
