How to change text, link, and URL colors for Preview Mode using CSS Snippets

Share & showcase
1

I work exclusively in Preview Mode (not Reading View or Source Mode). My custom text colors stopped working so I did a refresh of the CSS snippet. Sharing here for others to enjoy. Hope this is useful.

How to setup a CSS snippet file to edit the colors for Preview Mode

  1. Settings > Appearance > CSS snippets > Folder Button
  2. Create a new file called textColorsPreviewMode.css
  3. Click the Refresh Button next to the Folder Button
  4. Enable the toggle for textColorsPreviewMode

Copy-paste these CSS examples to change your text and link colors and adjust styling like removing underlining or adding bold.

image
image724×638 39.8 KB


/*
AUTO-LINK: when you just paste the URL as plaintext into obsidian
INLINE-LINK: when you define a link as [Text to Link](http://www.myURL.com)
*/


/* TEXT: Color */
body {
  --text-normal: red;
}

/* AUTO-LINK URL: Color */
.markdown-source-view.mod-cm6 .cm-url .cm-underline {
	color: orange;
	/*font-weight: bold;*/
	text-decoration: none !important; /* Uncomment to remove underlining */
}

/* AUTO-LINK URL: Underline Color and Styling */
.cm-s-obsidian span.cm-url {
  color: yellow;
  /*text-decoration: none !important;*/ /* Uncomment to remove underlining */
}

/* INLINE-LINK: Color */
.markdown-source-view.mod-cm6 .cm-link .cm-underline {
	color: green; 
	text-decoration: none !important;  /* Uncomment to remove underlining */
	/*font-weight: bold;*/
}

/* AUTO-LINK URL and/or INLINE-LINK: Mouse-Over Color */
.markdown-source-view.mod-cm6 .cm-link .cm-underline:hover, .markdown-source-view.mod-cm6 .cm-url .cm-underline:hover {
    color: cyan;
}

/* LINKS FROM EMBEDDED PAGES: Color and Styling */
.markdown-preview-view .external-link {
	color: violet; 
	text-decoration: none !important; /* Uncomment to remove underlining */
	font-weight: bold;	
}
1 Like