And within both CSS files, you should edit this line of code:
--usp-remoods-hue: 213deg;
Just change the 213 to any number between 0 to 360 and it must include the word "deg" after the number, otherwise, it will cause some elements doesn't fit the theme color.
Additionally, for a quick reference, you can go to play around the HSL Color Picker to test the color hue, and then you would know how "deg" presents colors.
Hmm. For some reason, making the changes in both CSS files is not doing anything. The plugin definitely made a change to Joplin from OhmineDT. Now it has off-white letters on a dark grey background, with blue accents. So I like the change. But I can't seem to change the hue to play around with the look.
Did you clean up the old OhmineDT codes? You should clean up all the old codes first, and then replace the new codes. If you did clean it up but still have the problem, you better show me both your userstyle.css and chromestyle.css here. It would be much easier to let me understand your situation.
userchrome.css (57.0 KB) userstyle.css (72.5 KB)
Since I don't know how to clean up the old Ohmine DT codes, here are my files. I've tried pasting the new code in a few different places, but it doesn't seem to make a difference.
You just remove all the text within your userstyle.css first. (It should be blank right now)
Copy the below codes
:root {
/* For render viewer and rich text editor */
--usp-remoods-hue: 213deg; /* The theme color hue setting, must include "deg" after the numbers which between 0 to 360. */
--usp-base-font: "montserrat","chiron hei hk text extralight";
--usp-monospace-font: "cascadia mono light", "chiron hei hk text extralight";
--usp-base-font-size: 14px;
--usp-smaller-monospace-font-size: 86%;
/* For print & export pdf */
--usp-print-base-font: "montserrat","chiron hei hk text extralight";
--usp-print-monospace-font: "cascadia mono light", "chiron hei hk text extralight";
--usp-print-base-font-size: 12px;
--usp-print-monospace-font-size: 10px;
}
Paste it to the userstyle.css
Next one. Open your userchrome.css
Again, remove all the text inside.
Copy the below codes:
:root {
/* For markdown editor */
--usp-remoods-hue: 213deg; /* The theme color hue setting, must include "deg" after the numbers which between 0 to 360. */
--usp-base-font: "montserrat","chiron hei hk text extralight";
--usp-monospace-font: "cascadia mono light", "chiron hei hk text extralight";
--usp-base-font-size: 14px;
--usp-smaller-monospace-font-size: 86%;
}
/* Avoid white background when starting Joplin */
body {
background-color: hsl(var(--usp-remoods-hue), 8%, 27%) !important;
}
Again. Paste it to your userchrome.css.
And now, it will work. Just forget everything from the old OhmineDT, and give a hug to ReMoods!
I tried to change the theme degree also the font size, after restarting the Joplin it didn't change anything, anything I missed?
my settings are
userstyle.css
:root {
/* For render viewer and rich text editor */
--usp-remoods-hue: 336deg; /* The theme color hue setting, must include "deg" after the numbers which between 0 to 360. */
--usp-base-font: "montserrat","chiron hei hk text extralight";
--usp-monospace-font: "cascadia mono light", "chiron hei hk text extralight";
--usp-base-font-size: 14px;
--usp-smaller-monospace-font-size: 86%;
/* For print & export pdf */
--usp-print-base-font: "montserrat","chiron hei hk text extralight";
--usp-print-monospace-font: "cascadia mono light", "chiron hei hk text extralight";
--usp-print-base-font-size: 12px;
--usp-print-monospace-font-size: 10px;
}
userchrome.css
:root {
/* For markdown editor */
--usp-remoods-hue: 336deg; /* The theme color hue setting, must include "deg" after the numbers which between 0 to 360. */
--usp-base-font: "montserrat","chiron hei hk text extralight";
--usp-monospace-font: "cascadia mono light", "chiron hei hk text extralight";
--usp-base-font-size: 14px;
--usp-smaller-monospace-font-size: 86%;
}
/* Avoid white background when starting Joplin */
body {
background-color: hsl(var(--usp-remoods-hue), 8%, 27%) !important;
}
Yeah I have followed the entire guide, setup everything that was mentioned even for the optional components, maybe let me do a clean install and try again.
Woops, I'm sorry. I found that the real problem is I made a mistake. I'm glad that you are the first user who made me realize the problem. Thanks, Jackson!
Below is the updated version of userstyle.css and userchrome.css, you can copy it to yours, and it will works:
userstyle.css:
:root {
/* For render viewer and rich text editor */
--usp-remoods-hue: 213deg !important; /* The theme color hue setting, must include "deg" after the numbers which between 0 to 360. */
--usp-base-font: "montserrat","chiron hei hk text extralight" !important;
--usp-monospace-font: "cascadia mono light", "chiron hei hk text extralight" !important;
--usp-base-font-size: 14px !important;
--usp-smaller-monospace-font-size: 86% !important;
/* For print & export pdf */
--usp-print-base-font: "montserrat","chiron hei hk text extralight" !important;
--usp-print-monospace-font: "cascadia mono light", "chiron hei hk text extralight" !important;
--usp-print-base-font-size: 12px !important;
--usp-print-monospace-font-size: 10px !important;
}
userchrome.css:
:root {
/* For markdown editor */
--usp-remoods-hue: 213deg !important; /* The theme color hue setting, must include "deg" after the numbers which between 0 to 360. */
--usp-base-font: "montserrat","chiron hei hk text extralight" !important;
--usp-monospace-font: "cascadia mono light", "chiron hei hk text extralight" !important;
--usp-base-font-size: 14px !important;
--usp-smaller-monospace-font-size: 86% !important;
}
/* Avoid white background when starting Joplin */
body {
background-color: hsl(var(--usp-remoods-hue), 8%, 27%) !important;
}
This problem is related to the CSS specificity, so, it can be solved by adding a keyword !important behind the value.
@skim1124
I think you would like to know that too.
BTW, I wanted a black background for notes, so I changed the 8% and 27% to 0% and 0%, but the background didn't change. Is there an easy way to do that?
It's a big mistake! Thanks again!