It goes in userchrome.css
as it is for styling the note list in the app, userstyle.css
is for styling the rendered output (markdown preview).
Thank you! It works.
Somebody asked a question on Discord about whether the markdown editor and preview windows could swap position. I have no idea if this will break anything (as it isn't something I will ever use and have no real impetus to test it) but I managed to do it by adding the following to userchrome.css
.
.rli-editor > div > div > div > div > div > div {
flex-direction: row-reverse !important;
}
Et voilà!
Apparently modern web engine support multiple columns layout. It is even more simpler than traditional text processor software. You can read more about css style here
I'm using Stylus addon on Firefox to style websites using CSS and it's possible to set different variable values depending on the OS theme like this:
@media (prefers-color-scheme: light) {
/* light theme colors */
:root {
--bg-color: white;
}
}
@media (prefers-color-scheme: dark) {
/* dark theme colors */
:root {
--bg-color: black;
}
}
/* ... */
div#joplin-container-content {
background-color: var(--bg-color) !important;
}
I've been trying to do the same thing in Joplin because currently, my userchrome.css
and userstyle.css
contain hardcoded color values for dark theme, so changing OS theme to light makes Joplin look difficult to use (dark background on dark text etc). Is it possible to use prefers-color-scheme
or something similar in userchrome.css
and userstyle.css
to set separate colors for dark and light themes?
I've seen a discussion on a similar thing, but there hasn't been much progress:
Hello,
I am also new here. I am using Joplin since few months. Combined with some plugins, it is a powerful tool!
I am currently working on an update of VSCode Community Material Theme for Joplin. My version of Community Material Theme Ocean is almost done, but I am struggling with tweaking some styles:
-
I do not know how to change/override the background color of block codes (not inline code, but comments inside blocks)
-
I am not able of modifying the selection style of some content in CodeMirror
-
Lastly, I would like to change the style of the checkboxes in the note list, but changing the background-color of
li.md-checkbox
has no effect
Has anyone been able to do these tweaks?
Thanks!
I updated my CSS for Jolpin
/* userchrome.css */
:root {
--white: #e9edf0;
--light-grey: #b1bcc2;
--grey: #3D444E;
--dark-grey: #222222;
--black: #050017;
--red-light: #fad3d4;
--red: #f65354;
--red-dark: #FF1744;
--green-light: #c5e5b4;
--green: #58D68D;
--green-dark: #23CD60;
--yellow-light: #faf3d3;
--yellow: #E7AE1D;
--yellow-dark: #E7AE1D;
--blue-light: #bed3fc;
--blue: #02A4F1;
--blue-dark: #3a79f7;
--purple-light: #C792EA;
--purple: #F459F4;
--purple-dark: #F459F4;
--aqua-light: #70ecec;
--aqua: #1fdfdf;
--aqua-dark: #00A3A3;
--aqua-darker: #007c7c;
--orange-light: #faf3d3;
--orange: #cf7506;
--orange-dark: #E7AE1D;
}
div.sidebar {
background-color: #2E3138 !important;
}
div.sidebar .list-item-container.selected {
background: #616161;
}
div.sidebar .list-item-container:hover {
background: #4E4E4E !important;
}
div.sidebar .list-item-container a.list-item > span:not(.title):not(.tag-label) {
font-size: 15px !important;
width: 25px;
text-align: center;
}
div.sidebar button {
font-size: 13px;
}
div.sidebar button:hover {
background: #4E4E4E !important;
}
div.sidebar button span.icon-sync {
font-size: 15px;
}
div.rli-noteList button.new-todo-button,
div.rli-noteList button.new-note-button {
background-color: var(--white);
opacity: .5;
}
div.rli-noteList button.sort-order-reverse-button span,
div.rli-noteList span.user_updated_time,
div.rli-noteList span.icon-search {
color: var(--white);
opacity: .5;
}
div.note-list .list-item-container,
div.note-list > div:last-of-type {
height: 30px !important;
}
div.note-list .list-item-container::before {
border: none;
}
div.note-list .list-item-container > a {
font-size: 13px !important;
}
.ace_heading {
font-weight: bold;
}
.CodeMirror .cm-header.cm-header-1,
.CodeMirror .cm-header.cm-header-2,
.CodeMirror .cm-header.cm-header-3,
.CodeMirror .cm-header.cm-header-4,
.CodeMirror .cm-header.cm-header-5,
.CodeMirror .cm-header.cm-header-6 {
color: var(--aqua-dark);
}
.CodeMirror .cm-strong {
color: var(--aqua-light) !important;
}
.ace-twilight .ace_list,
.ace-twilight .ace_markup.ace_list,
.ace-twilight .ace_storage {
color: var(--white) !important;
}
.ace-twilight .ace_support.ace_function { color: #aaa !important; }
.ace-twilight .ace_variable { color: var(--red-dark) !important; }
.cm-s-material-darker .cm-variable-3, .cm-s-material-darker .cm-type {
color: var(--white) !important;
}
/* Links */
.cm-s-material-darker .cm-link-text {
color: var(--purple-light) !important;
}
.cm-s-material-darker .cm-string {
color: var(--green-dark) !important;
}
.cm-s-material-darker .cm-meta {
color: var(--green-dark) !important;
}
.cm-s-material-darker .cm-property {
color: var(--aqua-dark) !important;
}
.cm-tabcolor-row {
color: var(--joplin-color) !important;
}
.cm-tabcolor-header {
font-weight: bolder;
color: var(--joplin-color) !important;
}
.cm-tabcolor-col1, .cm-tabcolor-col7 {
background-color: transparent !important;
color: #00A3A3 !important;
}
.cm-tabcolor-col2, .cm-tabcolor-col8 {
background-color: transparent !important;
color: #F459F4 !important;
}
.cm-tabcolor-col3, .cm-tabcolor-col9 {
background-color: transparent !important;
color: #23CD60 !important;
}
.cm-tabcolor-col4, .cm-tabcolor-col10 {
background-color: transparent !important;
color: red !important;
}
.cm-tabcolor-col5, .cm-tabcolor-col11 {
background-color: transparent !important;
color: #cf7506 !important;
}
.cm-tabcolor-col6, .cm-tabcolor-col12 {
background-color: transparent !important;
color: #3a79f7 !important;
}
/* userstyle.css */
/* // MARK: General */
:root {
--white: #e9edf0;
--light-grey: #b1bcc2;
--grey: #3D444E;
--dark-grey: #222222;
--black: #050017;
--red-light: #fad3d4;
--red: #f65354;
--red-dark: #FF1744;
--green-light: #c5e5b4;
--green: #58D68D;
--green-dark: #23CD60;
--yellow-light: #faf3d3;
--yellow: #E7AE1D;
--yellow-dark: #E7AE1D;
--blue-light: #bed3fc;
--blue: #02A4F1;
--blue-dark: #3a79f7;
--purple-light: #C792EA;
--purple: #F459F4;
--purple-dark: #F459F4;
--aqua-light: #70ecec;
--aqua: #1fdfdf;
--aqua-dark: #00A3A3;
--aqua-darker: #007c7c;
--orange-light: #faf3d3;
--orange: #cf7506;
--orange-dark: #E7AE1D;
}
body {
background-color: var(--dark-grey);
/* padding-top: 4px;
padding-bottom: 20px; */
font-family: "Roboto", Avenir, Arial, sans-serif !important;
}
/* #rendered-md {
max-width: 750px !important;
} */
mark {
background: var(--aqua);
color: var(--black);
padding: 2px 4px;
}
strike, s {
opacity: 0.5 !important;
}
blockquote {
color: var(--white) !important;
margin: 1.5em;
padding: 1em;
border-radius: 8px;
border-left: 6px solid var(--aqua-dark);
background-color: var(--grey);
}
strong, em {
color: var(--aqua-light) !important;
}
blockquote strong {
font-style: bold !important;
color: var(--aqua-dark) !important;
}
blockquote em {
font-style: italic !important;
color: var(--aqua-dark) !important;
}
hr {
border: none;
border-bottom: 1px solid var(--grey) !important;
margin: 2.5em 0 !important;
}
img {
border: none;
}
a {
color: var(--green-dark);
opacity: 1;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.resource-icon {
background-color: var(--green) !important;
width: 0.9em;
height: 1.1em;
top: 0.2em;
}
a[href='#'] {
color: var(--green-dark);
}
/* // MARK: Headers */
h1 {
color: var(--white);
background: var(--grey);
text-align: center;
padding: 20px 20px 15px 20px;
border-bottom: var(--aqua-dark) 2px solid;
margin-bottom: 20px;
margin-top: 40px;
}
#rendered-md > h1:first-child {
margin-top: 5px;
padding-top: 20px;
}
h2 {
color: var(--aqua-dark);
margin-top: 40px;
}
h3 {
color: var(--aqua-dark);
}
h4, h5, h6 {
color: var(--white);
}
/* // MARK: Listen */
ol {
margin: 0 0 1.5em;
padding: 0;
counter-reset: item;
}
ol li {
margin: 0;
padding: 0 0 0 1.5em;
list-style-type: none;
counter-increment: item;
}
ol li:before {
color: var(--aqua-darker);
content: counter(item) ".";
display: inline-block;
float: left;
font-weight: bold;
padding-right: 0.5em;
width: 1em;
}
ul {
margin: 0 0 1.5em;
padding: 0;
list-style: none;
}
ul li {
margin: 0;
padding: 0 0 0 1.5em;
list-style-type: none;
}
ul li::before {
color: var(--aqua-darker);
content: "\2022";
display: inline-block;
float: left;
font-weight: bold;
padding-right: 0.3em;
width: 1em;
}
/* // MARK: Notifications */
b-construction, b-error, b-success, b-notice, b-warning, b-help {
display: block;
margin-bottom: 10px;
padding: 10px 10px 10px 50px;
border: 1px solid;
border-left: 5px solid;
border-radius: 2px;
word-wrap: break-word;
text-align: left;
box-shadow: 3px 3px 7px 0 rgba(0,0,0,0.3);
color: var(--grey);
background-color: transparent;
}
b-construction::before,
b-error::before,
b-success::before,
b-notice::before,
b-warning::before,
b-help::before {
font-weight: 700;
font-size: 1.5em;
left: 30px;
position: absolute;
}
b-construction {
border-color: var(--orange);
color: var(--orange);
}
b-construction::before {
content: "\f7d9";
font-family: "Font Awesome 5 Free" !important;
color: var(--orange-light);
}
b-error {
border-color: var(--red);
color: var(--red);
}
b-error::before {
content: "\f071";
font-family: "Font Awesome 5 Free" !important;
color: var(--red-light);
}
b-success {
border-color: var(--green-dark);
color: var(--green-dark);
}
b-success::before {
content: "\f058";
font-family: "Font Awesome 5 Free" !important;
color: var(--green-light);
}
b-warning {
border-color: var(--yellow);
color: var(--yellow);
}
b-warning::before {
content: "\f06a";
font-family: "Font Awesome 5 Free" !important;
color: var(--orange-light);
}
b-notice {
border-color: var(--aqua-darker);
color: var(--aqua-darker);
}
b-notice::before {
content: "\f05a";
font-family: "Font Awesome 5 Free" !important;
color: var(--aqua-light);
}
b-help {
border-color: var(--blue-dark);
color: var(--blue-dark);
}
b-help::before {
content: "\f059";
font-family: "Font Awesome 5 Free" !important;
color: var(--blue-light);
}
/* // MARK: Tables */
table {
border-collapse: collapse;
overflow: hidden;
}
th,
td {
padding: 15px;
background-color: rgba(255, 255, 255, 0.2);
color: #fff;
}
th {
text-align: left;
}
thead th, .jop-tinymce table th, table th {
background-color: var(--aqua-dark);
}
tbody tr:hover {
background-color: rgba(255, 255, 255, 0.3);
}
tbody td {
position: relative;
}
tbody td:hover:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: -9999px;
bottom: -9999px;
background-color: rgba(255, 255, 255, 0.2);
z-index: -1;
}
table tr td > ul:last-of-type {
margin-bottom: 0em;
}
/* // MARK: Checkboxes */
input[type='checkbox'],
.md-checkbox .checkbox-label-unchecked,
.md-checkbox .checkbox-label-checked,
li.md-checkbox {
cursor: pointer !important;
}
li.md-checkbox [type="checkbox"]:not(:checked),
li.md-checkbox [type="checkbox"]:checked {
position: absolute;
left: -9999px;
}
li.md-checkbox [type="checkbox"]:not(:checked) + label,
li.md-checkbox [type="checkbox"]:checked + label {
position: relative;
padding-left: 1.5em;
cursor: pointer;
}
li.md-checkbox [type="checkbox"]:not(:checked) + label:before,
li.md-checkbox [type="checkbox"]:checked + label:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 1em;
height: 1em;
border: 1px solid var(--dark-grey);
background: var(--light-grey);
border-radius: 50%;
}
li.md-checkbox [type="checkbox"]:checked + label {
opacity: .5 !important;
color: var(--white);
}
li.md-checkbox [type="checkbox"]:checked + label:before {
background: var(--aqua-darker);
opacity: 1 !important;
}
li.md-checkbox [type="checkbox"]:not(:checked) + label:after,
li.md-checkbox [type="checkbox"]:checked + label:after {
content: '\2713\0020';
position: absolute;
top: -1px;
left: 3px;
color: var(--dark-grey);
font-weight: bold;
font-family: 'Lucida Sans Unicode', 'Arial Unicode MS', Arial;
opacity: 1 !important;
}
li.md-checkbox [type="checkbox"]:not(:checked) + label:after {
opacity: 0;
transform: scale(0);
}
li.md-checkbox [type="checkbox"]:checked + label:after {
opacity: 1;
transform: scale(1);
}
ul li[class*='checkbox']::before {
display: none;
}
/* GALLERY */
img.gallery {
border: 1px solid #00A3A3;
margin-right: 10px;
}
img.gallery:hover {
position: absolute;
width: 100%;
left: 0;
cursor: pointer;
z-index: 999;
}
/* MARK: Copy Anchor (Headers) */
h1 span.copy-anchor-icon, h2 span.copy-anchor-icon, h3 span.copy-anchor-icon {
visibility: hidden;
}
h1:hover span.copy-anchor-icon, h2:hover span.copy-anchor-icon, h3:hover span.copy-anchor-icon {
visibility: visible;
}
For this extra Bullet Journal style, have a look at my Github Project.
Hey,
As mentioned in my last post, I updated the themes created by mahor1221. As this repository is now archived, I cannot submit a pull request. Thus, you can find an updated version of these themes in my forked repository: GitHub - stysebae/joplin-vsc-material-theme: VSCode Community Material Theme for Joplin .
Here is an overview of these themes, suited for Joplin >= 2.x:
Hi everyone! I'm using a heavily modified version of Ohmine Dark Theme. I've managed to change what I wanted successfully, aside from one thing: I can't for the life of me change the font size of the note list (the notebook list works). Any help would be most welcome!
Have a look at this thread/post.
If you need it to be specific to a given panel then you will need to target the .sidebar
or .note-list
parent classes.
Thanks! I've actually already targetted the .note-list class (see below) but I don't see any difference:
Did you have a look at the post? I think font-size
is overridden further down the chain so you have to be more specific e.g.
div.list-item-container > a {
font-size: 10px !important;
}
Sorry I missed that -- that worked! Many thanks
anyone ever figure out how to color the background of the Katex equations that are shown?
Hi,
maybe its here somewhere, but I cant find it
I'd like my marked text to be normal background, red bold text at 20 pnt
I started off by experimenting with changing the background to red (not what I want in the end, but I found a post on this and it was a start of my experimenting) but it doesnt work:
[The body white text is purposely commented out]
/* For styling the rendered Markdown */
body {
/* sets body text font size in pixels */
font-size: 16px;
/* sets body text font colour */
/* color: #FFFFFF; */
/* Set Mark to yellow */
.highlight { background-color: red; }
}
Can anyone help please (and explain why the red background doesnt work?)
Cheers
EDIT 1:
Found this, which helped me get to this:
/* For styling the rendered Markdown */
body {
/* sets body text font size in pixels */
font-size: 16px;
/* sets body text font colour */
/* color: #FFFFFF; */
}
mark { background-color: grey; font-size: 20px; color: #FF0000;} /* your own marking */
mark[data-markjs] { background-color: #F3B717; } /* orange */
mark[data-markjs].mark-selected { background-color: #CF3F00; } /* reddish orange */
Now my question is, how to make no mark background and include the bold bit?
Also, what are the [data-markjs] and [data-markjs].mark-selected ones for?
And, what / where is the syntax for this css stuff, for me to find out on my own (in a fisherman fish or fishing rod sense)
EDIT 2:
Got it
mark { background-color: transparent; font-size: 20px; color: #FF0000; font-weight: bold;} /* your own marking */
I found this CSS resource
Still dont know what the other two mark lines are for tho
Thanks, this is really useful !
I can't see any mention here of the massive collection of userchrome.css
themes that are stored in the CodeMirror source code:
The MacOS Native Theme uses these under the hood and they're lovely. If you just want the markdown editor themes you can fairly easily modify each of the css files from CodeMirror to use locally by deleting all the .cm-s-<theme-name>
class names from the CSS and then loading the remaining CSS into your userchrome.css
.
For example I like the mdn-like theme and here is my modified userchrome.css
:
/*
MDN-LIKE Theme - Mozilla
Ported to CodeMirror by Peter Kroon <plakroon@gmail.com>
Report bugs/issues here: https://github.com/codemirror/CodeMirror/issues
GitHub: @peterkroon
The mdn-like theme is inspired on the displayed code examples at: https://developer.mozilla.org/en-US/docs/Web/CSS/animation
*/
.CodeMirror { color: #999; background-color: #fff; }
div.CodeMirror-selected { background: #cfc; }
.CodeMirror-line::selection, .cm-s-mdn-like .CodeMirror-line > span::selection, .cm-s-mdn-like .CodeMirror-line > span > span::selection { background: #cfc; }
.CodeMirror-line::-moz-selection, .cm-s-mdn-like .CodeMirror-line > span::-moz-selection, .cm-s-mdn-like .CodeMirror-line > span > span::-moz-selection { background: #cfc; }
.CodeMirror-gutters { background: #f8f8f8; border-left: 6px solid rgba(0,83,159,0.65); color: #333; }
.CodeMirror-linenumber { color: #aaa; padding-left: 8px; }
.CodeMirror-cursor { border-left: 2px solid #222; }
.cm-keyword { color: #6262FF !important; }
.cm-atom { color: #F90 !important; }
.cm-number { color: #ca7841 !important; }
.cm-def { color: #8DA6CE !important; }
span.cm-variable-2, .cm-s-mdn-like span.cm-tag { color: #690 !important; }
span.cm-variable-3, .cm-s-mdn-like span.cm-def, .cm-s-mdn-like span.cm-type { color: #07a !important; }
.cm-variable { color: #07a !important; }
.cm-property { color: #905 !important; }
.cm-qualifier { color: #690 !important; }
.cm-operator { color: #cda869 !important; }
.cm-comment { color:#777 !important; font-weight:normal; }
.cm-string { color:#07a !important; font-style:italic; }
.cm-string-2 { color:#bd6b18 !important; } /*?*/
.cm-meta { color: #000 !important; } /*?*/
.cm-builtin { color: #9B7536 !important; } /*?*/
.cm-tag { color: #997643 !important; }
.cm-attribute { color: #d6bb6d !important; } /*?*/
.cm-header { color: #FF6400 !important; }
.cm-hr { color: #AEAEAE !important; }
.cm-link { color:#ad9361 !important; font-style:italic; text-decoration:none; }
.cm-error { border-bottom: 1px solid red !important; }
div .CodeMirror-activeline-background { background: #efefff; }
div span.CodeMirror-matchingbracket { outline:1px solid grey; color: inherit; }
.CodeMirror { background-image: url(data:image/png;base64,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); }
This along with the Roboto Slab and Iosveka Fixed fonts gives me the following:
Hello,
I'm not sure if this is the right place to post it, sorry.
Some changes were added to Joplin in the past month that changed the style (colors, fonts, etc) of the Markdown editor (#5174 Codemirror theme update // #5314 Improved Markdown editor code styling // Added margin for readability, among other things).
In this attempt, I wrote some custom CSS put in the file userchrome.css that outclass the regular CSS, for the Light theme.
Here is what it look like:
On github:
Cheers,
Since I've been writing HTML in joplin, I've also been trying to link into other notes pages in html, to use instead of the self-contained Markdown formatted links between notes. I've gone through all the back and can't find any progress on the new selector you said you created, so I wonder if it's been fixed or if there's any other solution?