I have no success to set the font size and font color for both, the Markdown and the layout. Are there any working examples?
Thank you, but I didn’t find a working example.
For example the following does not work, neither with userstyle.css nor userchrome.css:
body {
font-size: 16px;
color: #000;
}
Same with:
body {
font-size: 16px !important;
color: #000 !important;
}The above should work with userstyle.css. Have you shut down (File > Quit) and re-started Joplin since adding the above? Joplin has to be restarted for css changes to take effect.
The above css will not work with userchrome.css as the body text of the editor is not controlled by the element body and is also different if you use the default ACE editor or the beta CodeMirror editor.
This post gives a method for finding the elements and classes you may want to modify.
Again, if you modify userchrome.css you have to restart Joplin for the changes to take effect.
Have you shut down ( File > Quit ) and re-started Joplin since adding the above?
Joplin has to be closed like this or Ctrl + Q. Closing the window to quit does not work. 
Thank you for the hint!
Yes, because just closing the window leaves Joplin running in the system tray.
Here are some elements / class names to get you started. I am not saying they are the best way to modify the css but they work for me (Joplin v1.0.227).
userstyle.css
body {
font-size: 12px;
/* sets body text font size in pixels */
color: #000000;
/* sets body text font colour */
}
table th, table td {
font-size: 12px;
/* sets table cell and header font size in pixels */
color: #000000;
/* sets table cell and header font colour */
}
a {
color: #0000CD;
/* set link colour - includes TOC links*/
}
a[data-resource-id] {
color: #006600;
/* change the colour of internal links */
}
.resource-icon.fa-joplin {
display: none;
/* do not display the Joplin internal resource icon */
}
.resource-icon {
background-color: #006600;
/* change resource link icons to the same colour as the link */
}
blockquote {
font-style: italic;
/* makes the blockquote text italic */
opacity: 1;
/* darkens the blockquote text from the default of 0.7 */
}
code {
font-family: "Roboto Mono", monospace;
/* sets code font - change to a MONOSPACE font on your system */
font-size: 12px;
/* sets code font size - fenced code and pre */
font-weight: 500;
/* sets code font weight - fenced code and pre */
color: #000000;
/* sets code font colour - fenced code, inline code and pre */
}
.inline-code {
font-size: 12px;
/* sets inline code font size - code element does not seem to control this */
border: 0px none;
/* removes the border around inline code */
background: none;
/* removes the background shading from inline code */
}
pre.hljs {
border: 0px none;
/* removes the border from fenced code blocks */
background: #EBEBEB;
/* makes the background of fenced code blocks darker than the default */
}
}
userchrome.css
This has sections for:
- The Joplin interface
- The Codemirror editor
- The ACE editor
/* ==Interface modifications== */
#react-root div div div:last-child div input {
color: black !important;
/* changes the font colour of the note title field */
}
.note-list div * {
color: black !important;
/* changes the font colour of the note list */
}
::-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 */
}
/* ==CodeMirror editor modifications== */
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 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 {
/* .cm-tag is the tag itself such as "<img>" | .cm-attribute is any tag attributes such as "width" or "src" */
color: blueviolet !important;
/* changes the font colour for HTML tags */
font-weight: 500;
/* changes the font weight for HTML tags */
/* the above are NOT applied if the html text is marked as "code" unless it is in a fenced html code block (```html) */
}
.cm-hr {
color: darkorange !important;
/* changes the font colour for horizontal rule markdown "***" */
font-weight: 900;
/* changes the font weight for horizontal rule markdown "***" */
}
/* ==ACE editor modifications== */
.ace_heading {
font-weight: bold;
/* makes any heading markdown #, ##, ### etc bold so as to stand out */
}
.ace_content {
color: black;
/* changes the colour of the ACE editor body text */
}
.ace_string.ace_strong {
color: black !important;
font-weight: bold;
/* changes the colour and weight of the ACE editor bold marked text */
}
.ace_support.ace_function {
color: #009900 !important;
/* changes the colour of the ACE editor code text */
}
.ace_underline {
color: blue;
/* changes the colour of any link created using [name](link) format. Links that are just text urls cannot be highlighted as this is not done until rendered in the viewer */
}
6 Likes