Change color of a word/text

Dudes, I really would like to have just a simple text color to choose in the Obsidian, as in Notion, for example.

mostra

I’m new at Obsidian and i searched in many topics, but i didn’t find, if there’s any way to do that, please show me, otherwise, this is a essential feature.

9 Likes

You can use HTML tag.
Like this: <font color="red"> YOUR TEXT</font>
Or use hex code for more color: <font color="#cc241d"> YOUR TEXT</font>

9 Likes

I like this tip but it applies on the preview mode only.
Is there any way to have this on edit mode as well?
I guess I should modify a CSS snippet but have no idea :frowning:

You can edit CSS so that your italics and bold will change color instead (But you only have 2 color):

/* Different color for bold*/
.cm-strong,
.markdown-preview-section strong {
  color: #BB29BB !important;
}


/* Different color for italic */
.cm-em {
    color: #cc241d;
	font-style: normal !important;
}

/* of italics in Preview  all notes in a vault */
.markdown-preview-section em {
    color: #cc241d !important;
	font-style: normal !important;
}
9 Likes

Thanks @GreenChocho !!

I’m more than happy with 2 colors :smiley::

/* Different color for bold*/
.cm-strong,
.markdown-preview-section strong {
  color: #86da5f;
  font-style: normal !important; 
  font-weight: normal !important;
}

/* Different color for italic */
.cm-em,
.markdown-preview-section em {
  color: #ad5350;
  font-style: normal !important; 
}
4 Likes

expanding on this, what is the syntax to also change the colour in edit mode?

1 Like

Very much helped out. Thanks!

1 Like

That is the best solution I find to color mark texts so far.
Couldn’t we remap the strikethrough function to another color as well, so that we will have three colors?

I tried to remap it by putting the following.

.cm-s,
.markdown-preview-section s {
  color: green;
  text-decoration:none;
}

But, it is not working to me.

2 Likes

that is very disruptive when editing, suddenly all that code for just a color?

You should be able to. I am using four colors, including strike-through and highlight. Here is the snippet I am using for strike-through:

.cm-strikethrough, del {
  text-decoration: none;
  color: #ff00dd !important;
}

My work around is to use inline latex
eg. $\color{red}Error$
Unfortunately this renders styling like equations which might not be the font style you like, but it works and I am sure some people would be fine with it.

All this note taking power and I can’t easily change the color of the text? Could that be true? It’s hard to believe.

3 Likes

This would’ve been perfect if it didn’t auto-align the text to the left.

Obsidian_Tm1fuSKSOa

Edit: Workaround is to prepend text with a "# " (note the space)

You can set a color on selected text by surrounding the text with a span tag and a style attribute. The text can appear anywhere(?) and this will work without interrupting the flow of text.

<span style="color:yellow">Hello world!</span>

2 Likes