Highlighted color of bold/italic text

franksisco · January 1, 2023, 12:38pm

hi, i’m a super newbie with both obsidian and css and i created my first css snippet as a frankenstein made of pieces stolen from other snippets on this forum that i didn’t fully understand.
Nevertheless, almost everything works for me.
Except that in the dark theme mode, when I underline bold or italic words they stay white instead of remaining black. In this way they are barely visible. As you can see here

I only want them pure white when they are not highlighted.
I can’t figure out how to define their color when they are highlighted.
The css snippet I am using now is: (I also upload it as an attachment)

Personal-style.css (1.3 KB)

.theme-dark
{
    --text-normal:                   #bfbfbf;
    --text-faint:                    white;
    --text-muted:                    #bfbfbf;

    --h1-color:                      white;
    --h2-color:                      white;
    --h3-color:                      white;
    --h4-color:                      white;
    --h5-color:                      white;
    --h6-color:                      white;

    --text-highlight-bg:             #f5d189;
    --text-highlight-fg:             black;

    --text-accent-hover:             white;

    --bold-color:                    white;
    --italic-color:                  white;

	--code-background:				 #2c2c2c;
}

.theme-light
{
    --text-highlight-bg:             #ffeaa1;
    --text-highlight-fg:             black;
}


/* Colore dei link di defoult è #8b6cef */




.markdown-rendered mark
{
    background-color: var(--text-highlight-bg) !important;
    color: var(--text-highlight-fg) !important;
}

.markdown-rendered mark a
{
    color: #8b6cef !important;
    font-weight: 600;
}

.search-result-file-matched-text
{
    color: var(--text-highlight-fg) !important;
}

/* Keep highlight/marks the same between viewer and editor. */
.cm-highlight
{
    color: var(--text-highlight-fg) !important;
}

Can anyone help me with this? Thanks

CawlinTeffid · January 30, 2023, 2:12am

I don’t know offhand, but someone in the Obsidian Discord’s #appearance channel probably does.

holroy · January 30, 2023, 4:11pm

Try the following:

mark :is(strong, em) {
  color: green;
}

Maybe(?) with a different color…

franksisco · April 1, 2023, 12:16pm

Thanks holroy, I had solved it with this:

.theme-dark {
    --text-normal:	#bfbfbf;
    --text-faint:	white;
    --text-muted:	#bfbfbf;
	
    --h1-color:	white;
    --h2-color:	white;
    --h3-color:	white;
    --h4-color:	white;
    --h5-color:	white;
    --h6-color:	white;

    --text-highlight-bg:	#f5d189;
    --text-highlight-fg:	black;

	--code-background:	#2c2c2c;
	
	--background-primary:	#262626;
	--background-secondary:	#262626;
	
	--link-unresolved-color:				#8b6cef;
	--link-unresolved-opacity: 				1;
    --link-unresolved-decoration-color: 	#8b6cef;
	
    --tag-background-hover:	#262626;
	
	--text-accent-hover: #bfbfbf;	
}

.theme-light {
    --text-highlight-bg:	#ffd480;
 
    --code-background:	white;
	
	--background-primary:		#f4f4f0;
	--background-secondary:		#f4f4f0;
	
	--link-unresolved-color:				#8b6cef;
	--link-unresolved-opacity: 				1;
    --link-unresolved-decoration-color: 	#8b6cef;	
	
	--tag-background: 		white;	
    --tag-background-hover:	#f4f4f0;
	
	--text-accent-hover: 	#ab99f2;
}

.markdown-rendered mark {
    background-color:	var(--text-highlight-bg) !important;
    color:				var(--text-highlight-fg) !important;
}


.markdown-rendered mark a {
    color:					#1500fa !important;
    font-weight:			400;
	text-decoration-color: 	#1500fa !important;
}

.search-result-file-matched-text {
    color:				var(--text-highlight-fg) !important;
}

/* Keep highlight/marks the same between viewer and editor. */
.cm-highlight {
    color:				var(--text-highlight-fg) !important;
}

But your solution was very helpful for me to solve another need: to have bold and italic pure white when not highlighted and black when highlighted.
So thank you very much
Now my complete CSS snippet is this:

div[data-path$='.jpeg']{
	display: none;
}

div[data-path$='.jpg']{
	display: none;
}

div[data-path$='.png']{
	display: none;
}

div[data-path$='.webp']{
	display: none;
}

.markdown-source-view.mod-cm6.is-readable-line-width .cm-line {
  font-family:	Roboto, sans-serif !important;
}

.markdown-preview-view {
  font-family:	Roboto, sans-serif !important;
}

.markdown-source-view.mod-cm6 .cm-line.HyperMD-codeblock {
  font-family:	"Source Code Pro", monospace !important;
}


.theme-dark {
    --text-normal:	#bfbfbf;
    --text-faint:	white;
    --text-muted:	#bfbfbf;
	
    --h1-color:	white;
    --h2-color:	white;
    --h3-color:	white;
    --h4-color:	white;
    --h5-color:	white;
    --h6-color:	white;
	
	--bold-color: white;
    --italic-color: white;

    --text-highlight-bg:	#f5d189;
    --text-highlight-fg:	black;

	--code-background:	#2c2c2c;
	
	--background-primary:	#262626;
	--background-secondary:	#262626;
	
	--link-unresolved-color:				#8b6cef;
	--link-unresolved-opacity: 				1;
    --link-unresolved-decoration-color: 	#8b6cef;
	
    --tag-background-hover:	#262626;
	
	--text-accent-hover: #bfbfbf;	
}

.theme-light {
    --text-highlight-bg:	#ffd480;
 
    --code-background:	white;
	
	--background-primary:		#f4f4f0;
	--background-secondary:		#f4f4f0;
	
	--link-unresolved-color:				#8b6cef;
	--link-unresolved-opacity: 				1;
    --link-unresolved-decoration-color: 	#8b6cef;	
	
	--tag-background: 		white;	
    --tag-background-hover:	#f4f4f0;
	
	--text-accent-hover: 	#ab99f2;
}

.markdown-rendered mark {
    background-color:	var(--text-highlight-bg) !important;
    color:				var(--text-highlight-fg) !important;
}


.markdown-rendered mark a {
    color:					#1500fa !important;
    font-weight:			400;
	text-decoration-color: 	#1500fa !important;
}

.search-result-file-matched-text {
    color:				var(--text-highlight-fg) !important;
}

/* Keep highlight/marks the same between viewer and editor. */
.cm-highlight {
    color:				var(--text-highlight-fg) !important;
}

mark :is(strong, em) {
  color: black;

The funny thing is that everything works but I don’t understand why and how the written codes work because I repeat it’s all stuff taken and copied from others. But I am happy

franksisco · May 19, 2023, 8:57pm

Now I ask for a really hard thing. Is there a possibility only for the dark theme to have links in a specific color when I make them bold?
I mean something like **[[]]**, **http://**, **[]()**
Please let me know, thank you very much

ariehen · May 19, 2023, 10:22pm

This seems to work. The only part not covered is separating the reading mode markdown link and raw URL (they are both a.external-link). It’s most of the way there.

Also noticed the URL in bold Live Preview bug** I had forgotten about that.

/*- bold internal link -*/
.theme-dark .cm-s-obsidian .cm-hmd-internal-link.cm-strong, strong > a.internal-link {
    color: var(--color-yellow);
}

/*- bold markdown link -*/
.theme-dark .cm-s-obsidian .cm-link, strong > a.external-link {
   color: var(--color-red);
}

/*- bold external link -*/
.theme-dark .cm-s-obsidian .cm-url.cm-strong, strong > a.external-link {
  color: var(--color-pink);
}

franksisco · May 21, 2023, 4:08pm

Fantastic!!! It works perfectly!!! Thank you so much !!!
I added your scripts in my snippet like this

/* Hide attachments folder */

div[data-path='allegati'], 
div[data-path='allegati'] + div.nav-folder-children 
{
    display: none;
}

/* Hide images from tree file explorer*/

div[data-path$='.jpeg']{
	display: none;
}

div[data-path$='.jpg']{
	display: none;
}

div[data-path$='.png']{
	display: none;
}

div[data-path$='.webp']{
	display: none;
}

/* Fonts style*/

.markdown-source-view.mod-cm6.is-readable-line-width .cm-line {
  font-family:	Roboto, sans-serif !important;
}

.markdown-preview-view {
  font-family:	Roboto, sans-serif !important;
}

.markdown-source-view.mod-cm6 .cm-line.HyperMD-codeblock {
  font-family:	"Source Code Pro", monospace !important;
}

/* Dark theme style*/

.theme-dark {
    --text-normal:	#bfbfbf;
    --text-faint:	white;
    --text-muted:	#bfbfbf;
	
    --h1-color:	white;
    --h2-color:	white;
    --h3-color:	white;
    --h4-color:	white;
    --h5-color:	white;
    --h6-color:	white;
	
	--bold-color: white;
    --italic-color: white;

    --text-highlight-bg:	#f5d189;
    --text-highlight-fg:	black;

	--code-background:	#2e2e2e;
	
	--background-primary:	#1f1f1f;
	--background-secondary:	#1f1f1f;
	
	--link-unresolved-color:				#8b6cef;
	--link-unresolved-opacity: 				1;
    --link-unresolved-decoration-color: 	#8b6cef;
	
    --tag-background-hover:	#262626;
	
	--text-accent-hover: #bfbfbf;	

}

/*- bold internal link by ariehen -*/
.theme-dark .cm-s-obsidian .cm-hmd-internal-link.cm-strong, strong > a.internal-link {
	color: var(--color-green);
}

/*- bold markdown link by ariehen -*/
.theme-dark .cm-s-obsidian .cm-link, strong > a.external-link {
	color: var(--color-red);
}

/*- bold external link by ariehen -*/
.theme-dark .cm-s-obsidian .cm-url.cm-strong, strong > a.external-link {
	color: var(--color-yellow);
}

/* Light theme style*/

.theme-light {
    --text-highlight-bg:	#ffd480;
 
    --code-background:	white;
	
	--background-primary:		#f4f4f0;
	--background-secondary:		#f4f4f0;
	
	--link-unresolved-color:				#8b6cef;
	--link-unresolved-opacity: 				1;
    --link-unresolved-decoration-color: 	#8b6cef;	
	
	--tag-background: 		white;	
    --tag-background-hover:	#f4f4f0;
	
	--text-accent-hover: 	#ab99f2;
}

.markdown-rendered mark {
    background-color:	var(--text-highlight-bg) !important;
    color:				var(--text-highlight-fg) !important;
}


.markdown-rendered mark a {
    color:					#1500fa !important;
    font-weight:			400;
	text-decoration-color: 	#1500fa !important;
}

.search-result-file-matched-text {
    color:				var(--text-highlight-fg) !important;
}

/* Keep highlight/marks the same between viewer and editor. */

.cm-highlight {
    color:				var(--text-highlight-fg) !important;
}

mark :is(strong, em) {
  color: black;

}

Just to know … is it possible to add your code inside my paragraph with my other dark theme specific elements? I mean something like this

.theme-dark {
    --.........
    --.........
    --.........
    --.........
    --your-code1
    --your-code2
    --your-code3
}

system · August 19, 2023, 4:08pm

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