Share your CSS

It's looks like there doesn't have a css selector that let me to select the emoji directly. I have the only one idea in this moment:

You may add the below codes to you userstyle.css right in the heading session is ok.

span {
  -webkit-background-clip: initial;
  -webkit-text-fill-color: initial;
}

But the problem is, you may use the emoji on the h1 heading like below:

# Approve <span>:smile:</span>

You will need a tag to separate the emoji.

1 Like

The Ohmine Dark Theme has released the latest updates and already posted on the Github page

  • New: Add Eye-Protector to protect your eyes from bright color images
  • New: Add "span" tag style in the h1 heading to avoiding background-clip effects the span content
  • New: Add new H5 & H6 heading style for better content separated experience, it would be useful for a long article writer
  • New: Abstract Content Bar can now identify the Markdown Table content
  • New: Add Tag-bar styling
  • New: Add tag manager modal dialog styling
  • New: Add option page styling
  • New: Add Color Controller in the "root:" section of "userstyle.css", make it easy to centrally control all of the color values
  • New: Add Print Switcher in the "root:" section of "userstyle.css", optional print out note title and sticky notes. (default: hide sticky notes)
  • Update: Rearrange the priority of Abstract Content Bar color defines
  • Update: Improve read & write experience, recolored and resized a few elements
  • Update: Improve printing color & margin
  • Fix: The "Ok" and "Apply" buttons of the Options page are position wrong
  • Fix: HTML close tag doesn't show on the Abstract Content Bar when using the "Quick HTML tag" plugin to create the tag
  • Fix: Sup-list margin wrong
3 Likes

If anyone is using this theme, I recommend you use this latest update version. This version has rewritten big apart of codes to make sure everything works fine.

Github Page - Ohmine-Dark-theme-for-Joplin

(2-OCT-2021 tested on Joplin v2.4.9)

  • New: markdown editor is now using monospace fonts for all markdown syntax and non-monospace fonts for content
  • New: add markdown editor styling - reduce visual clutter caused by complicated note content
  • New: add blockquote to Abstract content bar
  • New: add Color Controller section to the userchrome.css
  • Update: rewrite all CSS structure & all selectors
  • Update: small visuals improvements on render viewer
  • Fix: some CSS effects lost when switching between markdown editor and rich text editor
  • Fix: footnote style dose not effects on all footnote items
  • Fix: the math formula does not show the right color on Abstract content bar
  • Fix: some of the print color setting properties are invalid
  • Fix: code block overflow text not hidden in the rich text editor
5 Likes

Hi @dpoulton (and @uxamanda),

Do you think it would be possible to have the Joplin icon (J before link) in different colors for notes and todo (and how)? For example classic blue for notes and red for todo :thinking:

@bepolymathe

I have had a quick look at a note with internal links to both a note and a to-do. It looks like the format for both is identical. This makes sense as basically they are both just notes. Without a way to tell them apart I cannot see a way of treating the links differently using just CSS.

2 Likes

Thank you for watching. That's what I thought too. That said it's a problem because the search filters and other features distinguish between the two. When you use backlinks a lot (which I do), it would be very useful to be able to distinguish between them. :thinking:

Github page - Ohmine-Dark-Theme-For-Joplin-v1.21

v1.14 ~ v1.21 (4-OCT to 10-OCT tested on Joplin v2.4.9)

  • New: Add Custom Title Block - to create a custom information for readers
  • New: Add span tag styling in a list - to stand out the reference details
  • New: Add Custom Title Block and Span tag color properties to Color Controller of both userchrome.css and userstyle.css
  • New: Add search text styling on both Markdown Editor and Render Viewer - to reduce the confusion between search results and content
  • New: Add Search text color properties to the Color Controller of both userchrome.css and userstyle.css

v1.16

  • New: Add link href on printing - it's mainly for anchor text link but will affects to all links
  • New: Add --print-link-href in to the Print Switcher section of userstyle.css

v1.14

  • Fix: code block text selection highlight effect missing
  • Fix: image alt text is treated as emphasize text when it names is including an underscore
2 Likes

Hi @Nacandev

I just took the time to test your "theme" and I just congratulate you. It is very pleasant for my fragile eyes! :+1:

1 Like

Thank you for letting me know it! :slightly_smiling_face:

Hi @Nacandev

Just a question. Do you plan to integrate the ability to render colorless emojis? Right now I have this emoji :earth_africa: in a title that stands out like this. It's a bit of a shame. Or is it an aesthetic choice?

Due to the background clip effects in H1 heading, you may use the emoji with a span tag like below:

# Resources <span>:earth_africa:</span>

Or, if you think this is annoying, you can cancel the background clip effect by edit a few lines of codes in the userstyle.css, but once you change it the H1 heading will lost the gradient color effect.

Below example is based on the v1.21 OmineDT. You can see the h1 styling codes in the line 199 to line 208 of userstyle.css:


#rendered-md > h1 {
  font-size: 2.3em;
  font-variant: small-caps;
  line-height: 1.2em;
  color: var(--h1-text); 
  background: var(--h1-clip-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  border-bottom: 1px solid var(--h1-border);
}

Edit the line 204 to 206 like below:

  background: none;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: initial;

Then you can use the emoji without the span tag on h1 heading, and you can control the h1 color by the line 42 to 43:

--h1-text: #ffffff;
--h1-border: #396a5b;
2 Likes

Hello! I've been using Joplin on and off for a year or so now and I've just started to get into editing the stylesheets. I typically view the markdown editor, rather than the the split screen, so I've been primarily editing the userchrome.css (trying to do something along the lines of a Spacemacs color theme). I'm not sure if this is the best place to ask this but how do I change, individually, the bullet/numbers/to-do colors? I used .cm-variable-2, .cm-variable-3, .cm-keyword to change all three to the same color, but what if I want to change each one individually?

Do you mean you want to make the colours distinct per level or that you want entirely different colour schemes for the different list types? e.g. numbers (ordered lists) could be shades of red and bullet points (unordered lists) as shades of blue?

I originally meant different color schemes for different list types, but different colors/shades of color per level would be pretty sweet too. I'm mediocre (at best) at css, so I wasn't even sure if customizing the colors/shades of color based on list level was even possible by just editing the userchrome file.

Per level is certainly easy enough, you actually identified the three categories you need already. However doing this will make it the same for each type of list (e.g. cm-variable-2 will change the colour for both the 1. and - type lists at the same time - it also works for checkboxes). I don't (currently) know a way of identifying the different list types but I'm sure somebody far far better than me with CSS (which isn't hard) might be able to answer that for certain.
An example of how to change the 3 levels is below - they also then repeat; so after .cm-keyword it goes back to .cm-variable-2:
image

span.cm-variable-2 {color: #0055aa !important;}
span.cm-variable-3 {color: #008855 !important;}
span.cm-keyword {color: #770088 !important;}
1 Like

Oh nice, thanks for your help! That'll work fine for now, I'll keep looking around for options regarding the whole colors based on list type quandary.

I'm having some trouble with a few CSS changes.

Currently the MD table in dark mode looks like so, which isn't very readable:

Two changes I'd like to make are:

  1. Change the text color in MD table from grey to white
  2. Change the colors in alternate rows from black&white to two different shades of grey.

Can someone point to what classes I need to reference to make the changes? Thanks.

table > thead > tr > th {
  color: white;
  background: #212121;
}
table > tbody > tr > td {
  color: white;
}

table > tbody > tr:nth-child(even) {
  background: #2f2f2f;
}

table > tbody > tr:nth-child(odd) {
  background: #383838;
}
1 Like

I have placed the snippet in userstyle.css. However, there are no changes after restarting.

I use the macOS theme plugin
In README it says there are a few !important tags used.
I have made other changes to userchrome and userstyle with the theme plugin active and it has worked. However, your snippet doesn't work. How can I debug the CSS? Is there an Inspect Element somewhere?

Hi @manthanf1 , here is another choice and I think this must work:

#joplin-container-content > #rendered-md  table > thead > tr > th {
  color: white;
  background: #212121 !important;
}
#joplin-container-content > #rendered-md  table > tbody > tr > td {
  color: white !important;
}

#joplin-container-content > #rendered-md  table > tbody > tr:nth-child(even) {
  background: #2f2f2f !important;
}

#joplin-container-content > #rendered-md  table > tbody > tr:nth-child(odd) {
  background: #383838 !important;
}
1 Like