Modern Dark Mode

Plugins and Custom CSS CSS
#1

CleanShot 2021-10-13 at 12.25.06
CleanShot 2021-10-13 at 12.25.061080×1895 314 KB

CleanShot 2021-10-13 at 12.40.11
CleanShot 2021-10-13 at 12.40.11330×801 3.2 MB

Currently, only support Editor & Sidebar
Please let me know if you encounter problems or have suggestions even minor things are welcome.

:root {
	--darkmode-background: #2F3437;
	--darkmode-text: #DFDFD5;
	--darkmode-line-color: #404648;
	--highlight-color--red: #FF8A88;
	--highlight-color--orange: #FFB86C;
	--highlight-color--yellow: #F1FA8C;
	--highlight-color--green: #9FE39B;
	--highlight-color--blue: #9FC8EB;
	--highlight-color--purple: #DEAFEB;
	--callout-background-color-dark: #DFDFDC;
	--calloutred-background-color-dark: #E8D4D8;
	--calloutorange-background-color-dark: #E8DAC8;
	--calloutyellow-background-color-dark: #E9E2BF;
	--calloutgreen-background-color-dark: #CDE6D0;
	--calloutblue-background-color-dark: #D6E2E6;
	--calloutpurple-background-color-dark: #E4D5E3;
	--text-shadow: 0.01em 0.01em 0.03em #727E84;
}
/*********** Darkmode Background & Text & TreeNode***********/
	.tile__document {
		background-color: var(--darkmode-background);
	}

	.rem-text,
	.rem-text.rem-header--1,
	.rem-text.rem-header--2,
	.rem-text.rem-header--3 {
		color: var(--darkmode-text);
	}

	.TreeNode {
		border-width: 1.5px !important;
		border-left-color: var(--darkmode-line-color) !important;
	}
/*********** Page Hierarchy Bar ***********/
	.px-6 {
		background-color: ;
	}

	.document-header-top-bar .parent-link {
		background-color: white;
	}
/*********** Quote ***********/
	[data-rem-tags~="blockquote"] {
		filter: invert(1);
	}
	
	[data-rem-tags~="blockquote"] .rem-text {
		filter: invert(1);
	}
/*********** Rem-Bullet Container ***********/
	.plus-button,
	.six-dot,
	.toggle-collapse-button {
		background-color: transparent;
	}

	.icon-button,
	.rem-bullet__container .rem-bullet,
	.rem-bullet__container .rem-bullet__icon {
		filter: invert(1);
	}

	[data-rem-tags~="highlight"] .rem-bullet,
	[data-rem-tags~="highlight"] .rem-bullet__icon {
		filter: invert(0) !important;
	}
/*********** Notion like Callout Rem ***********/
	[data-rem-tags~="callout"] .rem-container {
		background-color: var(--callout-background-color-dark) !important;
	}
	
	[data-rem-tags~="callout"] .rem-container.highlight-color--red,
	[data-rem-tags~="calloutred"] .rem-container {
		background-color: var(--calloutred-background-color-dark) !important;
	}
	
	[data-rem-tags~="callout"] .rem-container.highlight-color--orange,
	[data-rem-tags~="calloutorange"] .rem-container {
		background-color: var(--calloutorange-background-color-dark) !important;	
	}
	
	[data-rem-tags~="callout"] .rem-container.highlight-color--yellow,
	[data-rem-tags~="calloutyellow"] .rem-container {
		background-color: var(--calloutyellow-background-color-dark) !important;	
	}
	
	[data-rem-tags~="callout"] .rem-container.highlight-color--green,
	[data-rem-tags~="calloutgreen"] .rem-container {
		background-color: var(--calloutgreen-background-color-dark) !important;	
	}
	
	[data-rem-tags~="callout"] .rem-container.highlight-color--blue,
	[data-rem-tags~="calloutblue"] .rem-container {
		background-color: var(--calloutblue-background-color-dark) !important;	
	}
	
	[data-rem-tags~="callout"] .rem-container.highlight-color--purple,
	[data-rem-tags~="calloutpurple"] .rem-container {
		background-color: var(--calloutpurple-background-color-dark) !important;	
	}
	
	
	[data-rem-tags~="callout"] .rem-text,
	[data-rem-tags~="calloutred"] .rem-text,
	[data-rem-tags~="calloutorange"] .rem-text,
	[data-rem-tags~="calloutyellow"] .rem-text,
	[data-rem-tags~="calloutgreen"] .rem-text,
	[data-rem-tags~="calloutblue"] .rem-text,
	[data-rem-tags~="calloutpurple"] .rem-text {
		color: black;
	}
/*********** Hightlight Style ***********/
	.highlight-color--red,
	.highlight-color--orange,
	.highlight-color--yellow,
	.highlight-color--green,
	.highlight-color--blue,
	.highlight-color--purple {
		color: black;
		border-radius: 3px;
	}

	.highlight-color--red {
		background-color: var(--highlight-color--red) !important;
	}

	.highlight-color--orange {
		background-color: var(--highlight-color--orange) !important;
	}

	.highlight-color--yellow {
		background-color: var(--highlight-color--yellow) !important;
	}

	.highlight-color--green {
		background-color: var(--highlight-color--green) !important;
	}

	.highlight-color--blue {
		background-color: var(--highlight-color--blue) !important;
	}

	.highlight-color--purple {
		background-color: var(--highlight-color--purple) !important;
	}

	[data-rem-tags~="color"] .rem-text .highlight-color--red,
	[data-rem-tags~="color"] .rem-text .highlight-color--orange, 
	[data-rem-tags~="color"] .rem-text .highlight-color--yellow,
	[data-rem-tags~="color"] .rem-text .highlight-color--green,
	[data-rem-tags~="color"] .rem-text .highlight-color--blue,
	[data-rem-tags~="color"] .rem-text .highlight-color--purple {
		background-color: unset !important;
		text-shadow: var(--text-shadow);
	}

	.highlight-color--red .rem-text,
	.highlight-color--red .rem-text.rem-header--1,
	.highlight-color--red .rem-text.rem-header--2,
	.highlight-color--red .rem-text.rem-header--3,
	.highlight-color--orange .rem-text,
	.highlight-color--orange .rem-text.rem-header--1,
	.highlight-color--orange .rem-text.rem-header--2,
	.highlight-color--orange .rem-text.rem-header--3,
	.highlight-color--yellow .rem-text,
	.highlight-color--yellow .rem-text.rem-header--1,
	.highlight-color--yellow .rem-text.rem-header--2,
	.highlight-color--yellow .rem-text.rem-header--3,
	.highlight-color--green .rem-text,
	.highlight-color--green .rem-text.rem-header--1,
	.highlight-color--green .rem-text.rem-header--2,
	.highlight-color--green .rem-text.rem-header--3,
	.highlight-color--blue .rem-text,
	.highlight-color--blue .rem-text.rem-header--1,
	.highlight-color--blue .rem-text.rem-header--2,
	.highlight-color--blue .rem-text.rem-header--3,
	.highlight-color--purple .rem-text,
	.highlight-color--purple .rem-text.rem-header--1,
	.highlight-color--purple .rem-text.rem-header--2,
	.highlight-color--purple .rem-text.rem-header--3  {
		color: black;
	}
/*********** Divider ***********/
	[data-rem-tags~="divider"] {
		color: transparent;
		padding-right: 15px;
		background-color: ;
		height: 7px;
		margin-right: 20px;
		margin-left: 10px;
	}

	[data-rem-tags~="divider"] .rem-text {
		color: transparent;
	}

	[data-rem-tags~="divider"]:before {
		content: " ";
		display: block;
		position: absolute;
		width: 100%;
		top: 50%;
		border-bottom: 2px solid #404648 !important;
		margin-right: 20px;
	}

	[data-rem-tags~="divider"]:focus-within {
		background: #2E4E5B;
		margin-left: 40px;
		margin-right: -10px;
		position: relative;
		left: -15px;
	}

	[data-rem-tags~="divider"]:not(:focus-within) {
		color: transparent;
		position: relative;
		padding: 0px 15px;
	}

	[data-rem-tags~="divider"]:not(:focus-within):before {
		content: " ";
		display: block;
		position: absolute;
		width: 100%;
		top: 50%;
		border-bottom: var(--divider-style, 2px solid #EEEFEE);
	}
/*********** Active Recall ***********/
	.cloze {
		background-color: rgba(210,225,248,0);
		color: #fff;
		border-bottom: 2px solid yellow;
		padding-bottom: 2px;
		margin-left: 3px;
		margin-right: 3px;
		padding-left: 3px;
	}

	#show-embedded-search-button {
		filter: invert(1);
	}
/********************* Sidebar *********************/
	/*********** Basic ***********/
		#document-sidebar {
		 	background-color: #2B3137;
		}

		#document-sidebar + div > div {
			color: yellow !important;
			background-color: #2B3137 !important;
		}
	/*********** Sidebar Collapsed ***********/
		.document-sidebar--collapsed--vertical {
			background-color: #000;
			width: 25px;
		}

		.document-sidebar--collapsed--vertical div div{
			left: -6px;
		}
		.document-sidebar--collapsed--vertical {
			width: 20px;
		}
	/*********** Navigation Bar ***********/
		.navigation-bar  {
		    background-color: #2B3137;
		}

		.hierarchy-editor-list__sticky-top__rem-container {
			position: relative;
			top: -10px;	
		}

		.hierarchy-editor-list__sticky-top__rem-container .EditorContainer {
			zoom: 90%;
		}

		.hierarchy-editor-list__sticky-top__rem-container .rem-is-custom-rem-type--in-body {
			zoom: 90%;
		}
	/*********** RemNote Date Picker ***********/
		.react-datepicker.search-results__date-picker {
			background-color: #ffffff !important;
		}
	/*********** RemNote Help Page Top ***********/
		.css-bBkpDG {
			filter: invert(1);
		}
	/*********** Account Capsule ***********/
		#document-sidebar__account-capsule {
			background-color: #FFFFFF;
		}
	/*********** All Notes & Flashcards ***********/
		#document-sidebar_top .flex.items-center.mb-1 {
			font-family: Roboto Mono, Fira Code, Monospace;
			color: yellow;
			zoom: 125%;
			margin-left: 5px;
			background-color: #2B3137; /* fix hover color*/
		}

		#document-sidebar_top .css-fqRAnH {
			color: yellow;
			zoom: 150%;
		}

		#document-sidebar_top .block .css-pUlLN {
			zoom: 150%;
			color: yellow;
		}

		#document-sidebar_top .block .flex-grow {
			font-family: Roboto Mono, Fira code, Monospace;
			color: yellow;
		}
	/*********** Sidebar Top Level Pinned, Draft, Archive Symbol ***********/
		#document-sidebar .title.cursor-pointer .css-fqRAnH {
			zoom: 150%;
			color: black;
		}

		#document-sidebar .title.cursor-pointer .css-pUlLN {
			color: black;
		}

		.accordion.ui.fluid .title.cursor-pointer {
			background-color: #FFFFFF;
			zoom: 150%;
			max-height: 5px !important;
			border-radius: 5px;
		}
	/*********** Power-up Symbol ***********/
		#document-sidebar .rem-is-custom-rem-type {
			filter: invert(1);
			position: relative;
			top: 2px !important;
		}
	/*********** Sidebar Document lists ***********/
		#document-sidebar .p-2.flex.group-hover-bg-hover-bg-transparent {
			height: 20px !important;
		}

		#document-sidebar .bg-white.cursor-pointer {
			display: none;
		}

		#document-sidebar .RichTextViewer {
			color: #C7C7C7;
			position: relative;
			top: 1px;
		}

		#document-sidebar .tumbnail--with-width + button {
			display: none;
		}

		#document-sidebar .highlight-color--red,
		#document-sidebar .highlight-color--orange,
		#document-sidebar .highlight-color--yellow,
		#document-sidebar .highlight-color--green,
		#document-sidebar .highlight-color--blue,
		#document-sidebar .highlight-color--purple {
			margin-left: 5px;
			padding: 1px !important;
			border-radius: 3px;
		}

		#document-sidebar .RichTextViewer .quote {
			margin-left: 5px !important;
			font-family: Roboto Mono, !important;
			font-size: 14px !important;
			border-radius: 6px !important;
			padding: 1px !important;
			padding-top: 		1px;
			padding-bottom: 	1px;
		}

		.document-list-item__folder-icon {
			color: #C7C7C7;
		}

		#document-sidebar .float-right {
			color: yellow;
		}

		#document-sidebar .rounded-md.text-primary-70 {
			background-color: transparent !important;
			border: 2px solid yellow !important;
		}

		.flex-grow.nowrap-RichTextViewer:only-child {
			margin-left: 25px;
		}
	/*********** RemNote Help Page Sidebar Document lists ***********/
		.block.group.cursor-pointer .highlight-color--red .RichTextViewer, 
		.block.group.cursor-pointer .highlight-color--orange .RichTextViewer,
		.block.group.cursor-pointer .highlight-color--yellow .RichTextViewer,
		.block.group.cursor-pointer .highlight-color--green .RichTextViewer,
		.block.group.cursor-pointer .highlight-color--blue .RichTextViewer,
		.block.group.cursor-pointer .highlight-color--purple .RichTextViewer {
			color: black !important;
		}

		.block.group.cursor-pointer .highlight-color--red .document-list-item__folder-icon,
		.block.group.cursor-pointer .highlight-color--orange .document-list-item__folder-icon,
		.block.group.cursor-pointer .highlight-color--yellow .document-list-item__folder-icon,
		.block.group.cursor-pointer .highlight-color--green .document-list-item__folder-icon,
		.block.group.cursor-pointer .highlight-color--blue .document-list-item__folder-icon,
		.block.group.cursor-pointer .highlight-color--purple .document-list-item__folder-icon {
			filter: invert(1);
		}

If post editing is disabled, Additional updates can be found here.

12 Likes
#2

hey…it isn’t working anymore…can you please fix it

image
image1920×1080 261 KB

2 Likes
#3

Hey, @shubham_swaraj sorry for inconvenience.

Currently, whole CSSs are in a transition process to be compatible with new.remnote.com. If you want version 1.76, which is stable version, until official 1.8 release, please check Here - CSS version before the 1.8 update and then copy the original *.css files text directly (not the @import text below) and paste it to your K.B.

3 Likes
#4

Many thanks for your contribution. I am sorry that the new update introduced and rewrote some of the CSS attributes. I understand it must be a big project to transition into the new CSS system. I just want to thank for your time and effort. All of your CSS made my KB 10 if not 100 times more aesthetically pleasing to look at.

1 Like
#5

Also the modern dark CSS looks different on the desktop app, while it works perfectly on the web version.

#6

Hey, JRY thanks for feedback! If it is not a big deal, would you mind providing some details about it? Thanks

#7

You fixed it a long time ago! Now your theme works perfectly. On the daily doc page, I am not sure whether it is on purpose or not. Here is a small thing I noticed.

Screenshot 2022-07-20 113137
Screenshot 2022-07-20 1131371843×1005 21.5 KB

The three dots seem to cover part of the bar.

#8

Hey, I’ve tried your modern theme css and I loved it but I am facing problems with hidden features.For some reason I am unable to turn highlight colour into text colour and display long page breadcrumbs with scroll bar even with the instructions. Can you please help me to solve this problem? I am using windows so my keyboard shortcuts are different from MacBook so I am hoping if you can provide me with an alternative for windows.

#9

Hey, @Abu_Hammer replied to your email, didn’t you receive?

Can you provide info about browser you are using?
If it is possible, can we talk in remnote discord channel?

Thanks