CSS HELP: Using the theme "Shimmering Focus" trying to make highlight colors easier on the eyes in dark mode

I’m using Shimmering Focus that uses three different highlight colors, highlight ("== =="), bold highlight ("== ==") and italic highlight ("== =="). I changed the highlight colors to match my tastes, however now in dark mode the highlit text is barely legible. So I’m trying to either set the colors to get slightly paler in dark mode or change the font color in dark mode. However, I’m struggling with this.
I’d appreciate any advice. Also the author of the theme has been extremely helpful in all of this, so go check it out :slight_smile:

Here’s the CSS code with my edits so far:

/* ─────────────────────────────────────────────────── */
/* > Colors and Variables */
/* ─────────────────────────────────────────────────── */

:root {
	/* --accent-lighter: hsl(51, 100%, 35%);
	--accent-lightest: hsl(51, 54%, 61%);
	--alt-accent: hsl(51, 100%, 35%);
	--alt-accent-lighter: hsl(209, 100%, 87%);
	--alt-accent-lightest: hsl(210, 100%, 95%);;
	--alt-accent-darker: #998d4c; */

	--code-color: var(--alt-accent-darker);
	--html-tag-color: var(--alt-accent-darker);
	--scrollbar-hover:  var(--alt-accent-lighter);
	--pseudo-admonition-border: var(--accent-lighter);
	--scrollbar-active: var(--accent-lighter);

	--highlight-color: #ffeb7f;
	--highlight-alt1: #7fc2ff;
	--highlight-alt2: #ff7f7f;

	--search-match-hl: rgba(11, 255, 0, 0.48);


	--bold-in-darkmode: hsl(30, 100%, 80%);
	--unresolved-link-color: #0F80FF;
	--backdrop-color: hsl(228deg 70% 7%);
	--active-line: #adae9820;
	--cursor-monocolor: var(--accent-lighter);

	--block-roundness: 6px;
	--resize-handle-thickness: 0.25em;
	--scrollbar-thickness: 0.6em;
	--image-size: 50%;
	--popover-size: 350px;
	--inactive-pane-opacity: 80%;

	--signature:"⟡";
}

.theme-light {
	--editor-alt-accent: var(--alt-accent-darker);
	--selection-color: #e8ddffDD;
	--extra-contrast: #5E5E5E;
	--hr-line: #AAA;
	--image-zoom-bg: #444;
	--button-hover: var(--alt-accent);
	--longform-background: hsl(30deg 30% 98%);
	--finished-task: hsl(74deg 36% 60%);
	--spell-error-color: #7490FF;
	--tooltip-notification-bg: var(--text-faint);
	--tooltip-notification-text: var(--interactive-normal);
	--tooltip-notification-border: var(--text-muted);
	--cursor-duo-color-1: var(--alt-accent-lightest);
	--cursor-duo-color-2: var(--accent-lightest);
}

.theme-dark {
	--editor-alt-accent: var(--alt-accent);
	--selection-color: #3c243bDD;
	--extra-contrast: #BBB;
	--hr-line: #999;
	--image-zoom-bg: #000;
	--button-hover: var(--alt-accent-darker);
	--longform-background: hsl(226deg 18% 13%);
	--finished-task: hsl(74deg 36% 40%);
	--spell-error-color: #637BE1;
	--tooltip-notification-bg: var(--extra-contrast);
	--tooltip-notification-text: var(--interactive-normal);
	--tooltip-notification-border: var(--text-muted);
	--cursor-duo-color-1: var(--alt-accent-lighter);
	--cursor-duo-color-2: var(--accent-lighter);
}

/* ---- */
/* Dark Mode Highlighting */

span.cm-em.cm-highlight {
	font-style: initial;
	background-color: #ffbfbf;
	color: #222;
}
body > .app-container div.markdown-preview-view em > mark {
	font-style: initial !important;
	background-color: #ffbfbf;
	color: #222;
}

span.cm-strong.cm-highlight {
	font-style: initial;
	background-color: #cbe6ff;
	color: #222222;
}
body > .app-container div.markdown-preview-view strong > mark {
	font-style: initial !important;
	background-color: #cbe6ff;
	color: #222222;
}





/* ─────────────────────────────────────────────────── */
/* > Multi-Color Highlighting */
/* ─────────────────────────────────────────────────── */
/* thanks to @Atlas for this snippet */
/* https://discord.com/channels/686053708261228577/702656734631821413/881443661269827656 */

/* Cyan Highlight */
span.cm-strong.cm-highlight {
	font-style: initial;
	background-color: var(--highlight-alt1);
}
.markdown-preview-view strong > mark {
	font-style: initial !important;
	background-color: var(--highlight-alt1) !important;
}

/* red Highlight */
span.cm-em.cm-highlight{
	font-weight: normal;
	background-color: var(--highlight-alt2);
	color: var(--text-normal) !important;
}
.markdown-preview-view em > mark{
	text-rendering: initial !important;
	font-weight: 500;
	background-color: var(--highlight-alt2) !important;
}

I didn’t try or compare both versions (Shimmering theme vs your) and I don’t check all your css code. But something call my attention: why you disable the first lines of colors in :root (–accent-lighter <> --alt-accent-darker) and after you keep that ‘dependency’ in theme-light and theme-dark? I.e., in --editor-alt-accent: var(--alt-accent-darker), --editor-alt-accent: var(--alt-accent) (and others) you keep the values disable in root!
Why you create “Dark Mode Highlighting”?
I think you destroy the values and relations between :root and theme-light and theme-dark.
If you want different colors to light/dark you need to define all colors in root/theme-light/theme-dark and not creating definitions as in “Dark Mode Highlighting”.

I don’t understand all of the code, so I probably just did it wrong. I think I disabled the accent stuff because I thought it wasn’t related to highlighting. The “Dark mode highlighting” is from a snippet that the author of the theme gave me so I thought it belonged there.

I just tested it and the first block about accents doesn’t do anything with highlighting, it rather changes the color of things like text in single [ ] etc.

If you have any suggestions on how to improve this, I’d appreciate it, since I really don’t know what I’m doing haha

Many things in question… Let me try clarify some…

  1. 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.

  2. 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).

  3. 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.

1 Like

Fantastic, that works great, thank you so much! One last question, what class or element is the normal highlighting? Italic is “em”, bold is “strong”, I figured that out, but how do I define the highlight color for “== ==”?

Thank you!!

I’m not sure, but I think the default highlighting is:

  • edit mode: span.cm-highlight
  • preview mode: .markdown-preview-view mark

Ok… this is strange, I set the colors for default highlight as yellow, but with the span.cm-highlight it’s now turning green? The switching between light and dark mode works great now, but there’s the green thing, and in preview mode the colors are off…


/* Define all colors in root */
:root
{
  --highlight-lcolor: #FFDE5C;
  --highlight-dcolor: #B29B40;

  --highlight-lblue: #7fedff;
  --highlight-dblue: #58a5b2;
  
  --highlight-lred: #E66C6C;
  --highlight-dred: #ffb7b7;

  --search-match-hl: rgba(11, 255, 0, 0.48);
}

/* 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-yellow: var(--highlight-lcolor);
  --highlight-blue: var(--highlight-lblue);
  --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-yellow: var(--highlight-dcolor);
  --highlight-blue: var(--highlight-dblue);
  --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-highlight {
    font-style: initial;	
    background-color: var(--highlight-yellow);
    color: #222; 
}

body > .app-container div.markdown-preview-view mark {
	font-style: initial !important;
	background-color: var(--highlight-yellow);
	color: #222;
}

span.cm-strong.cm-highlight {
    font-style: initial;	
    background-color: var(--highlight-blue);
    color: #222;
}
body > .app-container div.markdown-preview-view strong > mark {
	font-style: initial !important;
	background-color: var(--highlight-blue);
	color: #222;
}

span.cm-em.cm-highlight {
    font-style: initial;	
    background-color: var(--highlight-red);
    color: #222;
}

body > .app-container div.markdown-preview-view em > mark {
	font-style: initial !important;
	background-color: var(--highlight-red);
	color: #222;
}




/* 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". */

Any ideas? Thank you so much!!

It depends in many things… You are using a theme that overrides the default theme and now you overrides some styles of the theme you install.
First, you need to see in developer tools how the element is identified. Because you need to override what is ‘injected’ by the “Shimmering” theme.
This to say it’s not a simple answer!
I installed the theme and identified this (green is the color defined by the theme for normal highlight):

On the right, in styles, you see this code:

.markdown-preview-view mark, .cm-s-obsidian span.cm-highlight {
    background-color: var(--highlight-color);
}

This is what you need to change. But, in a simple way, you just need to go to the css file of the theme and check in “root” and “theme-light” and “theme-dark” the names and values of this “–highlight-color”. Then, use the same names and change the colors.
Well, this is the “logic” way… But is not possible in the way the theme define the “–highlight-color” versus want you want. Because is a single color without variations in dark/light modes: it’s the same in both.
So, in short answer (sorry for my illogic and confused answer), using what you already defined, try this:

.markdown-preview-view mark, .cm-s-obsidian span.cm-highlight {
    background-color: var(--highlight-yellow);
}

Ok, I put that last section at the bottom of my snippet, and commented out the part for the color-highlight I had. But this didn’t change anything.

The two problems persist:

  1. “highlight-color” aka “highlight-yellow” is showing up green, which as you say is the default of the theme. (btw I looked in the Elements section of the console, and according to the website I’ve been using for these colors the hex color code showing up as the default is blank/see through?)

  2. the colors in preview mode are not as they are in editor, i.e. “em” is showing up light blue and “bold” is showing up yellow haha, so the whole preview thing doesn’t work.

Thanks!

Thanks to the creator of the theme and @mnvwvnm I have now solved the problem :slight_smile:
The new update solved the edit vs. preview colors, I think, and I finally found that I was missing a “}” which was messing stuff up.

Thanks everyone! Here’s the code of the updated snippet:


/* Define all colors in root */
:root
{
  --highlight-lcolor: #FFDE5C;
  --highlight-dcolor: #B29B40;

  --highlight-lblue: #7fedff;
  --highlight-dblue: #58a5b2;
  
  --highlight-lred: #f0a6a6;
  --highlight-dred: #ffb7b7;

  --search-match-hl: rgba(11, 255, 0, 0.48);
}

/* 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-yellow: var(--highlight-lcolor);
  --highlight-blue: var(--highlight-lblue);
  --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-yellow: var(--highlight-dcolor);
  --highlight-blue: var(--highlight-dblue);
  --highlight-red: var(--highlight-dred);

}

/* Apply the background color to the element/class using 'var()' function and the common name chosen for both themes */

/* Yelow Highlight */

/* span.cm-highlight {
    font-style: initial;	
    background-color: var(--highlight-yellow);
    color: #222; 
} 

 body > .app-container div.markdown-preview-view mark {
	font-style: initial !important;
	background-color: var(--highlight-yellow);
	color: #222;
} */

body > .app-container div.markdown-preview-view mark, .cm-s-obsidian span.cm-highlight {
    background-color: var(--highlight-yellow);
}

/* Blue Highlight */

span.cm-strong.cm-highlight {
    font-weight: normal;	
    background-color: var(--highlight-blue);
    color: var(--text-normal) !important;
}
.markdown-preview-view strong > mark{
	text-rendering: initial !important;
	font-weight: 500;
	background-color: var(--highlight-blue) !important;
}

/* Red Highlight */


span.cm-em.cm-highlight {
    font-style: initial;	
    background-color: var(--highlight-red);
    color: #222;
}

body > .app-container div.markdown-preview-view em > mark {
	font-style: initial !important;
	background-color: var(--highlight-red);
	color: #222;
}





/* 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". */


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