Modern Dark Mode.css

:root {
	--darkmode-background: #2F3437;
	--darkmode-background-sidebar: #2B3137;
	--darkmode-background-selected: #4A5458;
	--lightmode-background-selected: #C5DFEB;
	--darkmode-text: #DFDFD5;
	--quote-text-dark: #F1FA8C;
	--quote-background-dark: #5E6A70;
	--reference-text-dark: darkred;
	--darkmode-line-color: #404648;
	--link-node-color-dark: #94D2FF;
	--red-text: #FF4A44;
	--red-text-dark: #FD6E68;
	--orange-text: #C26F1C;
	--orange-text-dark: #F0A264;
	--yellow-text: #EAB700;
	--yellow-text-dark: #FFC802;
	--green-text: #34A853;
	--green-text-dark: #3CC160;
	--blue-text: #579AFF;
	--blue-text-dark: #98BFE2;
	--purple-text: #A142F4;
	--purple-text-dark: #BF96F4;
	--highlight-color--red: #FF8A88;
	--highlight-color--red-dark: #;
	--highlight-color--orange: #FFB86C;
	--highlight-color--orange-dark: #;
	--highlight-color--yellow: #F1FA8C;
	--highlight-color--yellow-dark: #E3E004;
	--highlight-color--green: #9FE39B;
	--highlight-color--green-dark: #;
	--highlight-color--blue: #9FC8EB;
	--highlight-color--blue-dark: #;
	--highlight-color--purple: #DEAFEB;
	--highlight-color--purple-dark: #;
	--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.01em #727E84;
	--line-number-color-dark: #BDBEBE;
	--line-number-background-color-dark: #E6E6E6;
	--code-node-background-color-dark: #E6E6E6;
}
/*********** Queue ***********/
	.Queue {
		color: ;
	}
	
	.bg-gray-5,
	.scroll-drag-component,
	.spaced-repetition__prompt,
	.spaced-repetition__prompt__breadcrumbs,
	.text-base + a {
		color: var(--darkmode-text);
		background-color: var(--darkmode-background);
	}
	
	.rem-bullet__queue {
		background-color: var(--darkmode-text) !important;
	}
	
	.spaced-repetition__prompt .rem-bullet__document {
		color: black;
	}
	
	.spaced-repetition__prompt .rem-bullet__document .file.text.small.icon {
		color: white;
	}
/*********** Darkmode Background & Text & TreeNode***********/
	/* General Background */
	.document-table,
	.tile__document {
		background-color: var(--darkmode-background);
	}
	
	/* All Notes page list */
	.css-exQOrH {
		color: var(--darkmode-text);
		background-color: var(--darkmode-background);
		padding: 5px;
		border-radius: 5px;
	}	
	.css-jlRuPl {
		padding: 3px 0px 3px 0px;
	}
	.css-cLpPvR .RichTextViewer {
		color: #9191A8 !important;
	}
	
	/* General Text */
	.css-bMKjkl, /* Slot icon */
	.css-crJvPT,
	.rem-text,
	.rem-text.rem-header--1,
	.rem-text.rem-header--2,
	.rem-text.rem-header--3 {
		color: var(--darkmode-text);
	}
	
	.LinkNode {
		color: var(--link-node-color-dark) !important;
		background-color: var(--darkmode-background-selected);
		border-radius: 3px;
		padding: 0px 2px 0px 2px;
	}

	.TreeNode {
		border-width: 1.5px !important;
		border-left-color: var(--darkmode-line-color) !important;
	}
	
	.animate-zoom-into-bullet .quote {
		color: var(--quote-text-dark) !important;
		background-color: var(--quote-background-dark) !important;
	}
	
	/* Reference */
	.rem-reference .RichTextViewer {
		font-weight: 400;
	    color: var(--reference-text-dark);
	    background-color:
	}
	
	/* Alias */
	.rem-reference-container .css-kWtKRr {
		filter: invert(1);
		position: relative;
		top: 3px;
	}
	
	.rem-calendar-icon--in-editor,
	.rem-container--not-included-in-document-scope .file.text.small.icon {
		color: var(--darkmode-text);
	}
/*********** Document Title Highlight Style ***********/
	#DocumentTitle .bold.highlight-color--red {
		background-color: unset !important;
		color: var(--red-text-dark); 
	}
	#DocumentTitle .bold.highlight-color--orange {
		background-color: unset !important;
		color: var(--orange-text-dark); 
	}
	#DocumentTitle .bold.highlight-color--yellow {
		background-color: unset !important;
		color: var(--yellow-text-dark); 
	}
	#DocumentTitle .bold.highlight-color--green {
		background-color: unset !important;
		color: var(--green-text-dark); 
	}
	#DocumentTitle .bold.highlight-color--blue {
		background-color: unset !important;
		color: var(--blue-text-dark); 
	}
	#DocumentTitle .bold.highlight-color--purple {
		background-color: unset !important;
		color: var(--purple-text-dark); 
	}
/*********** 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;
		margin-bottom: 1px;
		padding: 0px 2px 0px 2px;
	}
	
	.highlight-color--red {background-color: var(--highlight-color--red);}
	.highlight-color--orange {background-color: var(--highlight-color--orange);}
	.highlight-color--yellow {background-color: var(--highlight-color--yellow);}
	.rem-text .highlight-color--yellow {background-color: var(--highlight-color--yellow-dark);}
	.highlight-color--green {background-color: var(--highlight-color--green);}
	.highlight-color--blue {background-color: var(--highlight-color--blue);}
	.highlight-color--purple {background-color: var(--highlight-color--purple);}

	.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;
	}
	
/*********** Highlight Color to Text Color ***********/
	[data-rem-tags~="color"] .rem-text .bold.highlight-color--red,
	[data-rem-tags~="color"] .rem-text .bold.highlight-color--orange, 
	[data-rem-tags~="color"] .rem-text .bold.highlight-color--yellow,
	[data-rem-tags~="color"] .rem-text .bold.highlight-color--green,
	[data-rem-tags~="color"] .rem-text .bold.highlight-color--blue,
	[data-rem-tags~="color"] .rem-text .bold.highlight-color--purple {
		background-color: unset;
	}
	
	[data-rem-tags~="color"] .rem-text .bold.highlight-color--red {
		font-weight: 500;
		color: var(--red-text-dark); 
	}
	
	[data-rem-tags~="color"] .rem-text .bold.highlight-color--orange {
		font-weight: 500;
	 	color: var(--orange-text-dark);
	}
	
    [data-rem-tags~="color"] .rem-text .bold.highlight-color--yellow {
		font-weight: 500;
        color: var(--yellow-text-dark);
    }
    
    [data-rem-tags~="color"] .rem-text .bold.highlight-color--green {
        font-weight: 500;
        color: var(--green-text-dark);
    }
    
    [data-rem-tags~="color"] .rem-text .bold.highlight-color--blue {
		font-weight: 500;
        color: var(--blue-text-dark);
    }
    
    [data-rem-tags~="color"] .rem-text .bold.highlight-color--purple {
		font-weight: 500;
        color: var(--purple-text-dark);
    }
/*********** Context Menu ***********/
	.select-none.rounded.bg-gray-5 {
		color: black;
		background-color: var(--lightmode-background-selected);
	}
/*********** Find / Filter / Replace - Ctrl(⌘) + F ***********/
    #hierarchy-editor__ctrl-f .css-exQOrH {
        color: black;
        background-color: unset;
    }

    #rich-text-editor__icon {
        filter: invert(1);
    }
/*********** Popup ***********/
	#document-hover-preview__popup {
		color: var(--darkmode-text);
		background-color: var(--darkmode-background);
		border: 2px dashed white;
	}

	.popup-menu, 
	.popup-menu.fixed .bg-white, 
	.popup-menu.fixed .bg-white .css-kbbFlF, 
	#document-hover-preview__popup {
		color: var(--darkmode-text);
		background-color: var(--darkmode-background);
		border: 1px dotted white;
	}
	
	.popup-menu__item, 
	.popup-menu__item--static,
	.hierarchy-editor__search-portal-section {
		color: var(--darkmode-text);
		background-color: var(--darkmode-background);
	}
	
	#show-embedded-search-button {
		color: var(--darkmode-text) !important;
		background-color: #FFC1BA;
		border-radius: 5px;
	}
	
	.popup-menu .file.text.small.icon::before {
		filter: invert(1);
	}
	/*********** Popup for image control ***********/
	/* svg icon */
	.popup-menu.fixed .css-fQFckt {
		background-color: yellow;
		border-radius: 5px;
		opacity: 0.8;
	}
	
	/* Selected item */
	.popup-menu.fixed .bg-white .css-huwYra {
		color: var(--darkmode-text);
		background-color: var(--darkmode-background-selected);
		border: 1px solid yellow;
	}
/*********** Page Hierarchy Bar ***********/
	.px-6 {
		background-color: ;
	}

	.document-header-top-bar .parent-link {
		color: var(--darkmode-text);
		background-color: transparent;
		border: 1px solid white;
	}
/*********** Quote ***********/
	[data-rem-tags~="blockquote"] {
		filter: invert(1);
	}
	
	[data-rem-tags~="blockquote"] .rem-text {
		filter: invert(1);
	}
/*********** Codeblock ***********/
	#code-node {
		background-color: var(--code-node-background-color-dark) !important;
	}
	
	.codeLine::before {
		color: var(--line-number-color-dark) !important;
	}
	
	#code-node::before {
		background-color: var(--line-number-background-color-dark) !important;
	}
/*********** 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;
	}
/*********** Settings Page ***********/
	.settings-page {
	    background-color: var(--darkmode-background);
	}
	
	.settings-page__sidebar__title {
	    color: yellow;
	}
	
	.settings-page__sidebar__link--active {
	    border: 1px solid yellow;
	}
	
	/* Sidebar svg icon */
	.settings-page .css-drbSAB {
	    color: yellow;
	    border: 1px dotted yellow;
	    border-radius: 5px;
	}
	
	/*********** Setting Page Content ***********/
	.settings-page .popup__header,
	.settings-page__content__inner {
	    background-color: #2E3437;
	}
	
	/* Plan */
	.settings-page .css-emvqyP {
	    color: yellow;
	    font-family: "Roboto Mono", "Fira Code", monospace;
	    font-weight: 600;
	}
	
	/* Account, Knowledge Base Settings, Danger Zone, Syncing, App Version */
	.settings-page .items-center,
	.settings-page .css-jBUFtN,
	.settings-page .css-ATSnA,
	.settings-page .css-dcfFHl,
	.settings-page .css-cSCrvK,
	.settings-page .css-exQOrH + a,
	.settings-page .checkbox,
	.settings-page .px-6,
	.settings-page .p-6 {
	    color: var(--darkmode-text);
	}
/*********** 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;
	}

/*********** 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);
	}
/*********** Rem Rating System ***********/
	[data-rem-tags~="1star"] .rem-bullet::before,
	[data-rem-tags~="2star"] .rem-bullet::before,
	[data-rem-tags~="3star"] .rem-bullet::before,
	[data-rem-tags~="4star"] .rem-bullet::before,
	[data-rem-tags~="5star"] .rem-bullet::before {
		filter: invert(1);
		border: 1px solid #CDCECE;
	}
/********************* 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;
		}
	/*********** Sidebar Top ***********/
		/* Search and ⚡️*/
		#document-sidebar_top .flex.items-center.p-2.gap-2 > div {
			border: 1px solid var(--darkmode-text);
		}

		/* 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: var(--darkmode-background-sidebar);
		}
		/* All Notes icon */
		#document-sidebar_top .css-fqRAnH {
			color: yellow;
			zoom: 125%;
		}
		/* Flashcard icon */
		#document-sidebar_top .block .css-pUlLN {
			zoom: 125%;
			color: yellow;
		}

		#document-sidebar_top .block .flex-grow {
			font-family: "Roboto Mono", "Fira code", Monospace;
			color: yellow;
		}
	/*********** Sidebar Pinned, Draft, Archive Symbol (Top Level) ***********/
		#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", Monospace !important;
			font-size: 14px !important;
			border-radius: 6px !important;
			padding: 1px !important;
			padding-top: 		1px;
			padding-bottom: 	1px;
		}
		
		/* Sidebar list item focused*/
		#document-sidebar .bg-primary-5 .RichTextViewer {
			color: white !important;
		}
		
		#document-sidebar .rounded-md.text-primary-70 {
			background-color: transparent !important;
			border: 2px solid yellow !important;
		}
		
		/* Sidebar list item icon */
		.document-list-item__folder-icon {
			color: #C7C7C7;
		}

		#document-sidebar .float-right {
			color: yellow;
		}
		
		/* Sidebar list with no child */
		.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);
		}