Share your CSS

Lounge
369

PROBLEM REVISITED: Dark-themed Joplin with a Light-themed rendered view.

Reference my August 30th comment.

OLD SOLUTION: filter: invert(100%)

In my previous solution, I suggested just applying a couple of filter: invert(100%) rules in the userchrome.css config file to achieve the goal.

Well, I put that in practice. And it worked okay for simple stuff. Unfortunately, the user experience was very subpar for anything but standard text. It was particularly poor for things like syntax-highlighted code from when I applied a the three-tick preformatted tag to something. Syntax highlighting is algorithmically determined and applied and can't be easily modified. Thus, using filter: invert() just didn't solve my problem.

Why did I gravitate to filter: invert in the first place? Because I wanted an easy solution. In the absence of a configuration switch in the Joplin UI, I still sought something relatively simple. Alas.

NEW SOLUTION: Manually apply colors directly.

I will share some CSS with you. It's probably not complete, so you will have to address oddballs HTML elements here and adjust those accordingly. But I think I took care of the bulk of the configuration. Here's most of my userstyle.css. I hope it helps someone out there:

body {
  background-color: white;
  color: black;
}
/* joplin-container-content has to match */
#joplin-container-content { background-color: transparent; }
@media print { body { background-color: transparent; } }

a { color: #450045ff; } /* dark plum */
a:hover { color: #900090ff; } /* plum */

code, pre {
    line-height: 1.5em;
    border-radius: 4px;
}
pre { /* this gets interesting. you have to really push to get truly readable text */
    background: rgba(0,0,0,7%) !important;
    border: 7px solid rgba(0,0,0,1%);
    border-radius: 4px;
    opacity: 1;
    filter: saturate(900%) contrast(900%) brightness(20%);
}
blockquote {
    background: rgb(247,247,247);
    border-left: 4px solid rgb(150,150,150);
    opacity: .9;
}

.code, .inline-code {
    border: none;
    color: rgb(10,10,10);
    background: rgb(230,230,230);
    border-radius: 4px;
}

mark {  background: yellow !important; }