Now I am at home on my Linux PC. There it is indeed working.
On my Windows PC at work not. Same settings... Don't know why.
I prefer to have the complete note like one page and not splitted into 2-3 columns.
What settings should I adjust in the userstyle.css to achieve that?
Thank you very much in advance!
On my side, I got it working on 2 different windows 10 and 11 with no issues.
And just for extra information, on windows to actually see your changes, you have to completely close Joplin and open it again. That means that you also have to close it from the taskbar as the program is still running in the background if you just do the normal ALT + F4. For the columns part, just comment or remove the userstyle.css -> line 86: "column-width: 30rem;" and that should work for you.
UPDATE: this is an okay solution for many scenarios, but please refer to my Oct 5th post for a better solution. (The best solution would be a fully fleshed-out Theme that does this. Maybe I will implement that one day.)
PROBLEM: Using a DARK theme but want a PAPER WHITE theme (a light theme) for the rendered view?
SOLUTION: Choose a dark theme, but then invert the colors for everything in the rendered-view stylesheet! Quick-and-dirty, but works. See below.
/*
* Invert everything. (But then revert images back.) *
* Note: for whatever reason, you have to set background-color in the <html> *
* element and then invert everything in the <body> element. *
*/
html { background-color: black; }
body { filter: invert(100%); }
img { filter: invert(100%); }
. . . Save this to userstyle.css. Or via the desktop application and Tools > Options > Appearance > [Show advanced settings] > [Custom stylesheet for rendered markdown])
The alternative is to build your own complete CSS stylesheet just for the renderer. That's probably ideal, but this inversion technique is probably "good enough" for 99% of what you need to do and it is easy.
Can "Editor font family" files only be fonts installed on the computer?
-- from portable joplin
In case anyone uses mermaid in the richtext editor and doesn't want the large white space at the right:
userstyle.css:
.mermaid {
width: 100%;
}
Before:
After:
References:
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; }
The level of code is not high, do not criticize. 
@font-face {
font-family: "wk";
src: url("C:/Windows/Fonts/LXGWWenKai-Regular.ttf") format("truetype");
}
body {
font-family: "wk";
font-size: 18px;
}
ol > li::marker {
color: rgb(21, 91, 218);
font-weight: bold;
}
ul >li::marker{
color: rgb(21, 91, 218);
}
h1, h2, h3, h4, h5, h6 {
color: rgb(21, 91, 218);
line-height: 30px;
}
h1 {
font-size: 1.5em;
}
h2 {
font-size: 1.4em;
}
h3 {
font-size: 1.3em;
}
h4 {
font-size: 1em;
}
h5{
font-size: 1em;
}
h6 {
font-size: 1em;
}
h1::before {
content: "h1";
position: relative;
display: inline-block;
top: -5px;;
left: 0;
color: rgb(220, 220, 220);
font-size: 15px;
line-height: 30px;
margin-right: 10px;
font-family: "wk";
}
h2::before {
content: "h2";
position: relative;
display: inline-block;
top: 0;
left: 0;
color: rgb(220, 220, 220);
font-size: 15px;
line-height: 30px;
margin-right: 10px;
font-family: "wk";
}
h3::before {
content: "h3";
position: relative;
display: inline-block;
top: 0;
left: 0;
color: rgb(220, 220, 220);
font-size: 15px;
line-height: 30px;
margin-right: 10px;
font-family: "wk";
}
h4::before {
content: "h4";
position: relative;
display: inline-block;
top: 0;
left: 0;
color: rgb(220, 220, 220);
font-size: 15px;
line-height: 30px;
margin-right: 10px;
font-family: "wk";
}
h5::before {
content: "h5";
position: relative;
display: inline-block;
top: 0;
left: 0;
color: rgb(220, 220, 220);
font-size: 15px;
line-height: 30px;
margin-right: 10px;
font-family: "wk";
}
h6::before {
content: "h6";
position: relative;
display: inline-block;
top: 0;
left: 0;
color: rgb(220, 220, 220);
font-size: 13px;
line-height: 30px;
margin-right: 10px;
font-family: "wk";
}
/* Check box */
.md-checkbox {
color: var(--joplin-color);
color: black;
}
.md-checkbox input[type=checkbox]:checked {
opacity: 0.7;
}
.jop-tinymce ul.joplin-checklist .checked,
.md-checkbox .checkbox-label-checked {
opacity: 0.5;
}
/* Bold */
b,strong{
font-weight:bolder;
color: #A63F78;
}
b::before,b::after,
strong::before,strong::after {
position: relative;
content:"**";
}
/*italic*/
em, i {
font-style: italic;
color: #e1c11f;
}
em::before,em::after,
i::before,i::after {
position: relative;
content:"*";
}
/* mark*/
mark {
background-color: #fffadc;
padding: 0 5px;
/* border-radius: 4px; */
color: var(--joplin-color);
}
mark::before,mark::after {
content: "::";
}
/* Hyphenated*/
s {
color: #c9846c !important;
}
del {
color: #c9846c !important;
}
del::before,del::after,
s::before,s::after {
position: relative;
content:"~~";
}
/*underline*/
ins,u{
color: #a17fe0;
}
/*Dividing line*/
hr {
border: none;
border-top: 2px solid #ed5a65;
margin: 1em 0;
}
I've put this in the userstyle.css for random sections to emphasize certain text. This works fine for me in the dark theme, but I think it works well in a light theme as well.
Dark:
Light:
:root {
--white: #e9edf0;
--yellow-dark: #E7AE1D;
--blue: #02A4F1;
--purple-dark: #F459F4;
--red-dark: #FF1744;
}
note::before,
info::before,
question::before,
warning::before
{
font-weight: 700;
text-shadow: 1px 1px 3px #000000;
color: var(--white);
margin-right: 0.2rem;
position: absolute;
width: 2rem;
left: 0;
top: 0;
height: 100%;
display: grid;
place-items: center;
}
note,
info,
question,
warning
{
display:block;
padding: .5rem 1rem .5rem 2.5rem;
position: relative;
margin: 15px 0;
border-width: 1px;
border-style: solid;
border-radius: 10px;
overflow: hidden;
}
note {
border-color: var(--blue);
}
note::before {
content: "\266A";
background: var(--blue);
}
info {
border-color: var(--yellow-dark);
}
info::before {
content: "\2139";
background: var(--yellow-dark);
}
question {
border-color: var(--purple-dark);
}
question::before {
content: "?";
background: var(--purple-dark);
}
warning {
border-color: var(--red-dark);
font-weight: bold;
}
warning::before {
content: "\26A0";
background: var(--red-dark);
}
Simple optimization
Simple optimization
"On a relatively large screen, I need to focus on writing, but in Joplin, notes cannot be centered, and there are various types of highlights in the middle, which can cause interference.".
So, I removed the highlight and centered my notes. Maybe someone will
span.cm-header.cm-header-1 {
color: #32373F !important;
}
span.cm-header.cm-header-2 {
color: #32373F !important
}
span.cm-header.cm-header-3 {
color: #32373F !important;
}
span.cm-header.cm-header-4 {
color: #32373F !important;
}
/*Italics/emphasis = Green*/
span.cm-em {
color: #32373F !important;
}
span.cm-strong {
color: #32373F !important;
}
span.cm-strong.cm-em{
color: #32373F !important;
}
span.cm-variable-2, span.cm-meta {
color: #32373F !important;
}
span.cm-variable-2 {
color: #32373F !important;
}
/*BP/NL/L 3 = Cyan*/
span.cm-keyword {
color: #32373F !important;
}
/*URL = dark blue*/
span.cm-link, span.cm-string.cm-url {
color: #32373F !important;
}
span.cm-link-text {
color: #32373F !important
}
span.cm-comment {
color: #32373F !important;
}
span.cm-hr {
color: #32373F !important;
}
span.cm-quote.cm-quote-1 {
color: #32373F;
}
span.cm-quote.cm-quote-2 {
color: #32373F;
}
span.cm-quote.cm-quote-3 {
color: #32373F;
}
span.cm-strikethrough {
color: #32373F;
}
.CodeMirror pre.CodeMirror-line, .CodeMirror pre.CodeMirror-line-like {
padding-left: 0;
line-height: 2em;
}
.CodeMirror {
padding-left: 19%;
padding-right: 19%;
font-family: 'Source Han Mono', 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif !important;
}
.CodeMirror-sizer {
border-right-width: 0px
}
You can use Appearance > Editor maximum width in your settings to create a similar effect to centre your text in the middle of a pane.
OMG! Hey, it seems like I'm busy in vain.