Share your CSS

Lounge
139

Below is a sample userchrome.css file for those using the CodeMirror editor. It does contain some interface modifications which are ones I have seen some users ask about. I started digging into this as the Joplin light theme displays a lot of text as mid-grey on white and so, for me, lacks contrast.

The CodeMirror editor seems to allow far more granular control as some features use multiple css elements where the default Ace editor only uses one. For instance with displayed image links the leading “!”, the image name [in square brackets] and the image URL (in round brackets) are all separately defined.

The colours used are a bit random but the main reason for posting is to provide some element / class names so users can experiment. It’s likely there are better and more correct ways of selecting the elements but these work for me using Joplin with the light theme. I am not a css “expert”, just someone using this forum, the Development Tools, and trial and error! To assist I have heavily commented the css!!

Remember:

  1. This is not a comprehensive list of css elements, just some commonly modified for legibility.
  2. Joplin has to be Quit and restarted for any css modifications to be applied.
  3. These are unofficial mods and so may not work with future releases of Joplin.
/* For styling the entire Joplin app (except the rendered Markdown, which is defined in `userstyle.css`) */

/* ==Interface modifications== */
 ::-webkit-scrollbar-thumb{
	 background: silver 
	/* sets the colour of the notebook list & note list scrollbars */
}
 .header .title {
	 display: none !important;
	/* removes the text labels from the main toolbar icons */
}
 a.button[title="Code View"] {
	 display: none !important;
	/* removes the Code View button from the main toolbar */
}
 a[draggable="true"] {
	 color: black !important;
	/* sets the colour of the note titles in the note list */
}


/* ==CodeMirror editor modifications - these will not work with the default ACE editor== */
 span[role="presentation"] {
	 color: black;
	/* changes the font colour for the editor text */
}
 .cm-variable-2, .cm-meta {
	 color: darkred !important;
	/* changes the font colour for all lists (.cm-meta controls the checkbox square brackets [ ] ) */
}
 .cm-comment {
	 color: #009900 !important;
	/* changes the font colour for code text*/
}
 .cm-quote {
	 color: darkviolet !important;
	/* changes the font colour for quoted text*/
}
 .cm-image-marker {
	 color: red;
	/* changes the font colour for the "!" before displayed image links */
	 font-weight: 900;
	/* changes the font weight for the "!" before displayed image links */
}
 .cm-link, .cm-url {
 /* .cm-link is everything in the square brackets | .cm-url is the url itself in the round brackets */
	 color: blue !important;
	/* changes the font colour for links */
	 text-decoration: none !important;
	/* removes underlining for links */
}
 .cm-tag, .cm-attribute {
 /* HTML - .cm-tag is the HTML tag itself such as "<img>" | .cm-attribute is any HTML tag attributes such as "width" or "src" */
 /* the below are NOT applied if the html text is marked as "code" unless it is in a fenced html code block (```HTML) */
	 color: blueviolet !important;
	/* changes the font colour for HTML tags */
	 font-weight: 500;
	/* changes the font weight for HTML tags */
}
 .cm-hr {
	 color: darkorange !important;
	/* changes the font colour for horizontal rule markdown "***" */
	 font-weight: 900;
	/* changes the font weight for horizontal rule markdown "***" */
}
5 Likes