Plugin: 🎊 ReMoods Theme V3

ReMoods GitHub Social Preview 2

Visit ReMoods Theme GitHub Repository

collage 6

ReMoods is a multi-purpose theming plugin inherited from the past Ohmine Dark Theme project and drives it to an entirely new stage. ReMoods beautifies your screen and documents and takes care of your writing moods and eye health.

  • Provide 3 theme modes to let you work comfortably under different lighting environments.
  • Use single-color tones to boost your writing mood.
  • Available to change the theme colors at any time.
  • Auto-hiding unnecessary UI elements from your screen bring you to focus on writing.
  • Provide over 80% consistent syntax highlighting styles for the code block of - Markdown Editor and Render Viewer.
  • Extra formatting adjustments for the Exported HTML File and PDF Document to increase the reading experience.
  • Provide certain helpful HTML custom elements to improve your notetaking experience.
  • Provide third-party plugins’ CSS styles to add extra usage in ReMoods.

There are many things you should know before using it, so just go to read the getting start guide first:


5 Likes

Thanks for this!

1 Like

Good job ! Thank you.

1 Like

Thanks! But it's still not clear to me how to switch colors.

1 Like

Hi, @skim1124 !

It was because I don't know how to implement the color-switching features on the options page now. I'm sorry for the inconvenience. For an alternative, you can read about this: A Temporary Solution Of Customize The Theme Color & Font-Related Settings

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.

Thanks, and no need to apologize.

1 Like

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.

Ok, I got it.

  1. You just remove all the text within your userstyle.css first. (It should be blank right now)
  2. 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;
}
  1. Paste it to the userstyle.css
  2. Next one. Open your userchrome.css
  3. Again, remove all the text inside.
  4. 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;
}
  1. 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!

1 Like

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;
}

If you are following the temporary solution to edit it, you should beware the typing mistakes.

If you didn't know what's going wrong, just show me both of your codes within the userstyle.css and userchrome.css and let me help you.

There is no mistake, so, the problem is unclear now. Just let me ask a silly question, I have to confirm it first, did you install the theme yet?

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.

2 Likes

lol I should have noticed the only different !important, thanks!

1 Like

You are welcome! Just leave me a message here whenever you have any problems with the ReMoods Theme. :smiley:

Also one minor thing, in the github guide, the filename should be userchrome.css, not chromestyle.css

:rofl: It's a big mistake! Thanks again!

Thanks! Now it's working as expected.

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?