Hey Guys,
I’ve been using RemNote for a year or so and have been trying to find a custom theme that worked for me.
So I ended up remixing another CSS theme by changing the color and adding new features and I loved it so much that I wanted to share it with anyone else who liked it as well
Here’s what it looks like
VERY IMPORTANT - THIS THEME ONLY WORKS IF YOU ENABLE DARK MODE IN SETTINGS
PLEASE DO SO BEFORE PLUGGING IN THIS CSS
Copy paste these CSS and put it into a new Custom CSS block in RemNote (these are two separate CSS BLOCKS!)
**First Block : RemNote Theme**
:root {
–base: #401019;
–mantle: #002949;
–crust: #002949;
–surface0: #002949;
–surface1: #321219;
–surface2: #005c76;
–overlay0: #321219;
–overlay1: #321219;
–overlay2: #321219;
–subtext0: #1993AD;
–subtext1: #321219;
–text: #ffffff;
–rosewater: #f5e0dc;
–flamingo: #f2cdcd;
–pink: #f5c2e7;
–mauve: #cba6f7;
–red: #f38ba8;
–maroon: #eba0ac;
–peach: #fab387;
–yellow: #f9e2af;
–green: #a6e3a1;
–teal: #499d9c;
–sky: #89dceb;
–sapphire: #74c7ec;
–blue: #8964fa;
–lavender: #b4befe;
/* convert hexadecimal to rgb values */
–rosewater-rgb: 245, 224, 220;
–flamingo-rgb: 242, 205, 205;
–pink-rgb: 245, 194, 231;
–mauve-rgb: 203, 166, 247;
–red-rgb: 243, 139, 168;
–maroon-rgb: 235, 160, 172;
–peach-rgb: 250, 179, 135;
–yellow-rgb: 249, 226, 175;
–green-rgb: 166, 227, 161;
–teal-rgb: 73, 157, 156;
–sky-rgb: 137, 220, 235;
–sapphire-rgb: 116, 199, 236;
–blue-rgb: 137, 100, 250;
–lavender-rgb: 180, 190, 254;
–text-rgb: 205, 214, 244;
–subtext1-rgb: 186, 194, 222;
–subtext0-rgb: 166, 173, 200;
–overlay2-rgb: 147, 153, 178;
–overlay1-rgb: 127, 132, 156;
–overlay0-rgb: 108, 112, 134;
–surface2-rgb: 88, 91, 112;
–surface1-rgb: 69, 71, 90;
–surface0-rgb: 49, 50, 68;
–crust-rgb: 17, 17, 27;
–mantle-rgb: 24, 24, 37;
–base-rgb: 30, 30, 46;
}
.dark .bg-gray-5 {
background-color: var(–mantle);
}
#document-sidebar {
background-color: var(–crust);
}
.rn-clr-background-primary {
background-color: var(–base);
}
.rn-clr-background-secondary {
background-color: var(–mantle);
}
.rn-clr-background-tertiary {
background-color: var(–crust);
}
.rn-clr-background-quaternary{
background-color: var(–crust);
}
.rn-clr-background {
background-color: var(–base);
}
.rn-clr-background-accent {
background-color: var(–surface2);
}
.rn-clr-background-accent–hovered {
background: var(–overlay0);
background-color: var(–overlay0);
}
.rn-clr-background-light-accent {
background-color: var(–surface2);
}
.rn-pane {
background-color: var(–base);
}
.rn-pane__body {
background-color: var(–base);
}
.rn-pane__top-bar {
background-color: var(–base);
}
.rn-editor__rem__body__text {
color: var(–text);
}
.rn-editor__rem__body {
background-color: var(–base);
}
.rn-clr-content-primary {
color: var(–text);
}
.rn-clr-content-accent {
color: var(–subtext1);
}
.rn-clr-content-tertiary {
color: var(–subtext0);
}
.top-bar-container {
background-color: var(–base);
}
/* clozes */
.dark .cloze {
background-color: var(–surface0);
}
.cloze {
border-bottom-color: var(–blue);
}
.dark .rich-text-editor__change-cloze-button {
background-color: var(–blue), var(–tw-bg-opacity);
--tw-bg-opacity: 1;
}
/* rem */
.rn-rem-reference {
color: var(–blue);
}
.rn-button {
color: var(–surface1);
}
.rn-button–hovered {
color: var(–surface2);
}
.rn-editor__rem__body–red {
color: var(–red);
}
.rn-editor__rem__body–orange {
color: var(–peach);
}
.rn-editor__rem__body–yellow {
color: var(–yellow);
}
.rn-editor__rem__body–blue {
color: var(–sapphire);
}
.rn-editor__rem__body–purple {
color: var(–lavender);
}
.rn-editor__rem__body–green {
color: var(–green);
}
/* overlays (omnibar, slash menu) */
.rn-omnibar {
background-color: var(–overlay1);
}
.rn-menu {
background-color: var(–overlay2);
}
.rn-dialog-overlay {
background-color: var(–overlay0);
}
/* search result and elevations */
.rn-clr-background-elevation-10 {
background: var(–surface0);
}
/* color reassignments /
/ this is literally just the favorite star 
*/
.dark .text-yellow-60 {
color: var(–red);
}
/* highlight reassignments */
.dark .highlight-color–red{
background-color: rgba(var(–red-rgb), var(–tw-bg-opacity));
–tw-bg-opacity: 0.5;
}
.dark .highlight-color–orange{
background-color: rgba(var(–peach-rgb), var(–tw-bg-opacity));
–tw-bg-opacity: 0.6;
}
.dark .highlight-color–yellow {
background-color: rgba(var(–pink-rgb), var(–tw-bg-opacity));
–tw-bg-opacity: 0.6
}
.dark .highlight-color–blue {
background-color: rgba(var(–sapphire-rgb), var(–tw-bg-opacity));
–tw-bg-opacity: 0.6;
}
.dark .highlight-color–purple {
background-color: rgba(var(–mauve-rgb), var(–tw-bg-opacity));
–tw-bg-opacity: 0.5;
}
.dark .highlight-color–green {
background-color: rgba(var(–teal-rgb), var(–tw-bg-opacity));
–tw-bg-opacity: 0.8;
}
#search-results__no-results {
color: var(-002949-);
}
/* Queue */
.Queue.m-0.h-full.overflow-hidden, .spacedRepetition {
background-color: #401019;
}
.spacedRepetition {
background-color: #401019;
}
.spaced-repetition__reveal-button{
background-color: #002949;
}
.spaced-repetition__reveal-button > div, .select-none.text-gray-20, .spaced-repetition__prompt__breadcrumbs > span{
color: #cdd6f4;
}
.rem-bullet__document, .fill-in-the-blank {
background-color: #002949!important;
}
.queue__title {
background-color: #002949;
}
.queue__badge.rounded {
background-color: #004395;
}
Second Block : Blue Bullet Point
.rem-bullet__core { /* this is the bullet’s center colour /
fill: #1993AD; / presumably, this is what confuses Dark Reader /
}
.rem-bullet–hidden-children .rem-bullet__ring { / this is the static outer bullet when it has folded children /
fill: #1993AD;
}
.rem-bullet__ring { / this is the outer colour when hovering the bullet /
fill: transparent; / also quite a problem for automatic solutions */
}
Other Key Features of the theme:
- The dots of the rem are blue
- The favorite star is a light pink (you can change this) (in the section that says “this is literally just favorite star”)
- The yellow highlight is changed to a pink (the purple and orange are also changed but they are minor)
- IT IS COMPLETELY CUSTOMIZABLE TO HOW YOU WANT
(so if you don’t dig the color or the highlights it is easy to change it yourself)
How to customize the body:
The beginning of the code using something called Hex color codes. For non-tech guys (myself included) these are actually really simple, any color on the spectrum can be coded in computer language as a six digit code (hence hex-code)
So if you go to a site like this one to pick a color code:
Then I take that very important code and copy it to the Custom CSS it will change the color of that specific section:
Same for the mantle, Surface 1, Surface 2 and the Overlays and even the text (it’s set to white or ffffff) play around with them a while and change to the color design you chose!
How to customize the highlight
All the colors you see (e.g rosewater, sapphire and lavender) are colors that are pre-coded into the CSS
In this example, I’m going to change the red highlight (Ctrl+4 or option+command+4) to a slightly different rosewater color.
Navigate to this section for the red highlight and change red to rosewater (this only works for the colors listed there)
Here is the before and after
Before:
After:
I hope that you find this useful
I’d love to see any custom theme you guys come up with using this or any new cool features you discover, You can post them here as well