It appears to be applying in both preview & editing mode for me. Are you using “Use legacy editor” in v0.13.33? And maybe my suggestion only works with the “minimal theme”.
I used “option+command+i” to inspect and figure out what CSS was overriding my styles and I’m only touching the font-size type scale for headings (to keep myself from maintaining another thing).
Many thanks, Joël.
Not using the legacy editor. Running the default Obsidian theme with a simple css snippet for my preferred font face.
Will triple check the css when I am back at a Mac and try to work out what is controlling the header sizes in reading mode. I know I can target them as such, but it would be cool if I could get the root values to apply universally. I am probably doing something wrong. PEBKAC.
Grateful
Angel
I just wanted to stop by and say thank you for your tutorial. It completely demystified several things that are just hinted at around here. Thanks!
How to change Obsidian header colors, embedded title color, internal link colors:
Hope this helps anyone that comes by, I wanted to be able to customize several of these colors while using the default Dark Theme.
Here is the code:
save it as customColors.css or any file name of your choice and drop it in the .obsidian/snippets folder of your vault, then enable it in the app’s Settings->Appearance folder.
/* Headers - in Editing Mode */
.cm-header-1
{
color: red;
}
.cm-header-2
{
color: red;
}
.cm-header-3
{
color: red;
}
.cm-header-4
{
color: red;
}
.cm-header-5
{
color: red;
}
.cm-header-6
{
color: red;
}
/*Headers - in Reading Mode*/
.markdown-preview-view h1
{
color: blue;
}
.markdown-preview-view h2
{
color: blue;
}
.markdown-preview-view h3
{
color: blue;
}
.markdown-preview-view h4
{
color: blue;
}
.markdown-preview-view h5
{
color: blue;
}
.markdown-preview-view h6
{
color: blue;
}
/*Embedded Titles*/
.markdown-embed-title
{
color:#7DFDFE;
}
/*Internal Links - Editing Mode*/
.cm-s-obsidian span.cm-hmd-internal-link /* Internal Links */
{
color: #7DFDFE;
}
/*Internal Links - Reading Mode*/
a.internal-link
{
color: green;
}
/* Tags in Reading Mode*/
a.tag
{
color: red;
}
Thank you very much.
You made my day. 
@lizardmenfromspace I’d like to apply a background image to the entire app window, how do I do that?
First, I tried applying a background to the body element. That didn’t work. Then I tried div.app-container & that didn’t work either. Suggestions?
I’m not sure if there’s a thread for CSS in Source view (might be worth it!), but here goes. I still have a few Dataview code blocks in my daily notes that are visually distracting, so I wrote something to hide them.
Source view on the left, Reading view on the right:
I used the following CSS and added CssClass: [hidden-code] in the frontmatter of all my periodic notes. (And no, I will not update my resume until I can put CSS on it.)
There are three styles below, with two of the three commented out (between the /* ... */). The other two hide a lot more of the note; I’m inclined toward option (2) for my setup, since all my Dataview queries are at the end of the note. Option (3), the one shown above, is probably the only one of much interest to everyone here:
/*
* hidden-code.css
* In these notes : daily, weekly, monthly, quarterly, and yearly notes
* hide these elements : dataview queries and (some amount of) their surroundings
*/
/* When the code block gets hidden, the line numbers in the gutters get crushed together.
This is caused by a setting applied directly to the element; which we can find: */
.hidden-code.markdown-source-view .cm-gutterElement[style*="height: 0px;"] {
display: none;
}
/* * Start of different options for hiding code blocks. * */
/* (1) Nuke everything from the first code block to the end. */
/* .hidden-code.markdown-source-view .cm-line.HyperMD-codeblock-begin,
.hidden-code.markdown-source-view .cm-line.HyperMD-codeblock-begin ~ * {
display: none;
} */
/* (2) Be a bit more surgical with it: hide the code blocks, fade their surroundings. */
/* .hidden-code.markdown-source-view .cm-line.HyperMD-codeblock,
.hidden-code.markdown-source-view .cm-line.HyperMD-codeblock + div {
display: none;
}
.hidden-code.markdown-source-view .cm-line.HyperMD-codeblock-begin,
.hidden-code.markdown-source-view .cm-line.HyperMD-codeblock-begin ~ * {
font-size: medium;
opacity: 25%;
} */
/* (3) Be even more permissive: Show the code block but hide (most of) its contents.
This option works even if we don't know the structure of the note. Huge plus. */
.hidden-code.markdown-source-view
.cm-line.HyperMD-codeblock:not(.HyperMD-codeblock-begin) {
display: none;
}
.hidden-code.markdown-source-view .cm-line.HyperMD-codeblock-begin {
font-size: medium;
opacity: 60%;
}
.hidden-code.markdown-source-view
.cm-line.HyperMD-codeblock-begin
> span::after {
content: "```";
}
Cheers~
One more stab at Source view.
This hides the messier parts of links and inline html, while still showing their surrounding formatting characters. When your mouse cursor is on the same line # as a link or tag, everything is made visible again.
Some links are not split up into separate spans, so I don’t try to replace them. I’m not sure what the difference could be—I just assume this is a natural limit of plain CSS in obsidian.
unfocused:
focused:
source-view.css
/* * HIDING ELEMENTS * */
/** External links. Obsidian seems to think that all kinds of things are links, and
there are many kinds of those links. This likely doesn't cover everything: */
.markdown-source-view .cm-line:not(.cm-active) .cm-url:not(.cm-formatting),
.markdown-source-view .cm-line:not(.cm-active) .cm-string.cm-url:not(.cm-formatting),
.markdown-source-view .cm-line:not(.cm-active) .cm-formatting.cm-link:not(.cm-formatting-link)+[class="cm-link"],
.markdown-source-view .cm-line:not(.cm-active) .cm-link.cm-inline-footnote:not(.cm-formatting, .cm-hmd-barelink)+.cm-inline-footnote-end+[class="cm-link"]
{
font-size: 0;
}
/* Refill empty elements with an ellipsis: */
.markdown-source-view .cm-line:not(.cm-active) .cm-url:not(.cm-formatting)::after,
.markdown-source-view .cm-line:not(.cm-active) .cm-string.cm-url:not(.cm-formatting)::after,
.markdown-source-view .cm-line:not(.cm-active) .cm-formatting.cm-link:not(.cm-formatting-link)+[class="cm-link"]::after
{
content: "…";
font-size: 1rem;
}
/* Refill empty elements with a parenthesized ellipsis: */
.markdown-source-view .cm-line:not(.cm-active) .cm-link.cm-inline-footnote:not(.cm-formatting, .cm-hmd-barelink)+.cm-inline-footnote-end+[class="cm-link"]::after
{
content: "(…)";
font-size: 1rem;
}
/** HTML/CSS inline in the markdown. */
/* I don't believe there's a way to do sensible CSS for this yet, so we just...
...hide the tag, attribute name, and attribute string: */
.markdown-source-view div.cm-line:not(.cm-active) :not(.cm-bracket):is(.cm-tag, .cm-attribute),
.markdown-source-view div.cm-line:not(.cm-active) .cm-attribute+.cm-string
{
font-size: 0;
}
/* ...close the gap (caused by a single space char) between tags & their attributes: */
.markdown-source-view div.cm-line:not(.cm-active) .cm-attribute {
/* Note: this could be -1ch, if we restored font-size to normal. */
margin-left: -0.12rem;
}
This has really cleaned up my editor view. Along with:
/* Text should resize in no more than +/- 5% step sizes. My decision is
to use the same font size throughout: */
.markdown-source-view .cm-line {
font-size: medium;
}
Which helps with footnotes and nested paragraphs, which otherwise are set in a smaller point size, a bit inconsistently, and with headings, which were distractingly large, to me.
This thread is now quite old and many of the tips are no longer as relevant.
To explore how to customize CSS in Obsidian, see: