Share your CSS

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).

1 Like

Thank you! It works. :slight_smile:

1 Like

Please have a look at dpoulton post. He explained in much detail what is customized how:

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à!

5 Likes

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

1 Like

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. :grinning: 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 :slight_smile:

/* 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.

6 Likes

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:

screenshots

3 Likes

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!

1 Like

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

1 Like

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 :smiley:

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:


3 Likes

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,

4 Likes

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? :joy: