Working on my first theme, dark purples/maroon and red and light blues. Work in progress

Plugins and Custom CSS CSS
#1

First shot at a CSS theme, I’ll throw this out there. The template provided by RemNote is a great start, but I wanted to tweak a few extra things. I’m hoping to get some feedback and show what a minimalistic CSS theme looks like. Be warned, I don’t know much CSS.

I got some inspiration, and sometime I just outright copied bits from the the Solarized Dark Theme, so thanks to the author of that theme for putting in a ton of effort.

I’m trying to figure out how to change the search bar, the 6 dot hover icon on the side of each rem, the username, and the settings, to name a few things.

/* Global */
body {
background-color: #201f1e;

}

/* Queue */
.queue {
  
}
.queue__title {
  
}
.queue__badge {
border: 1px solid #201f1e;
}

/* Hierarchy Editor */
#hierarchy-editor {

}
/* Bullets */
.rem-bullet__container {
}
.rem-bullet {
}

/* Editor */
.rem-text {
	font-family: fira code;
	color: rgba(232,232,232,255);
	font-size: 1.04rem;
	
}

/* Portals */
.portal-rem {
}
.portal-rem-top {
}

/* Reference and Tag Sections */
/* Hierarchy Editor */
#hierarchy-editor .TreeNode{
	border-color: #84660a;
    border-width: 0.1px;
    transition-timing-function: linear;
    position: relative;
    background-color: transparent;
    padding-left: 25px;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
}
#hierarchy-editor .TreeNode--dark-indent-line {
    border-color: #84660a!important;
    border-width: 0.1px;
    background-color: transparent;
}
#hierarchy-editor .TreeNode:hover {      	
	border-color: #b58900;      	
	border-width: 0.1px;      	
	transition-timing-function: linear;      	
	position: relative;      	
	background-color: transparent;      	
	padding-left: 25px;      	
	padding-top: 0px;      	
	padding-bottom: 0px;      	
	margin-top: 0px;   
}
#hierarchy-editor .TreeNode--dark-indent-line:hover {      	
	border-color: #b58900!important;      	
	border-width: 0.1px;      	
	background-color: transparent;  
}

/* Bottom Toolbar */
.hierarchy-editor-toolbar {
}

/* Rem-Level Formatting */
#rem-header--1 {
	font-family: fira code;

	}
.rem-header--2 {
	font-family: fira code;
	
}
.rem-header--3 {
	font-family: fira code;

}

/* Text-Level Formatting */
.rem-reference {
 
}

 #code-node,
 #quote,
 .quote {    
    width: calc(100% - 80px);
    font-family: "Monaco","Menlo","Consolas","Courier New";
    color: black;
    -moz-tab-size: 4;
    tab-size: 4;
    text-decoration: none!important;
    background-color: #3891a6;
    border: 1.5px solid transparent;
    border-radius: 7px;
    padding-right: 2px;
    padding-left: 2px;
    margin-right: 2px;
    margin-left: 2px;
    position: relative;
    min-height: 1rem;
}
.cloze {
}

.highlight-color--red {
	background-color: #8bafb0; 
    border-radius: 4px;
    border-left-style: solid;
    border-right-style: solid;
    border-color: rgba(0, 0, 0,0.0);
    border-width: 0px;


}
.highlight-color--yellow {
	background-color: #067890; 
    border-radius: 4px;
    border-left-style: solid;
    border-right-style: solid;
    border-color: rgba(0, 0, 0,0.0);
    border-width: 0px;
   

}
.highlight-color--orange {
	//background-color: #e3655b ;
	background-color: #76cae4; 
    border-radius: 4px;
    border-left-style: solid;
    border-right-style: solid;
    border-color: rgba(0, 0, 0,0.0);
    border-width: 0px;
	 
	}
.highlight-color--green {
	background-color: #19647e; 
    border-radius: 4px;
    border-left-style: solid;
    border-right-style: solid;
    border-color: rgba(0, 0, 0,0.0);
    border-width: 0px;

}
.highlight-color--blue {
	background-color: #3891a6; 
    border-radius: 4px;
    border-left-style: solid;
    border-right-style: solid;
    border-color: rgba(0, 0, 0,0.0);
    border-width: 0px;

}
.highlight-color--purple {
	//background-color: #390099;
	background-color: #3d348b; 
    border-radius: 4px;
    border-left-style: solid;
    border-right-style: solid;
    border-color: rgba(0, 0, 0,0.0);
    border-width: 0px;

	
}

.work-in-progress-rem {
}
.work-in-progress-tag {
}

/* Documents */
.document {
	background-color: #201f1e;
}
#document {
	background-color: #201f1e;
}
#document-parents {
background-color: #201f1e;
}

/* Document Sidebar */
#document-sidebar {
background-color: #201f1e;
border: 1px solid #b58900; 
}
.document-sidebar_top { 
}
.document-sidebar_top__logo-and-user {
}
.document-list-item__container {
}
.document-list-item {
}
.document-sidebar__buttons {
}
.navigation-bar  {     
	background-color: rgba(52,31,40,255);     
	border-bottom: 1px solid #b58900;
	border-left: 1px solid #b58900; 
 
}
.gutter {     
	background-color: #073642; 
} 

.gutter:hover {     
	background-color: #002b36; 
}
.rem-bullet, .rem-bullet--in-list {
    width: 0.4em;
	height: 0.4em;
	border-radius: 50%;
	background-color: #b58900;
	display: inline-block;
	border: 5px solid #442803;
	opacity: 1;
	box-shadow: 0px 0px 0px 1px #583400;

}

.rem-bullet__container.rem-bullet__container-H3 {
	margin-top: 1px!important;
}


.settings-page__input .text {
	color: #268bd2;
	font-size:13px;
    font-weight: 400;
}


.settings-page__input .ui.dropdown .dropdown.icon::before {
	color: #268bd2;
}

.settings-page__input .visible.menu.transition .item .ui.header.text {
	color: #2aa198;
	font-size:13px;
    font-weight: 400;
}

.settings-page__input .visible.menu.transition .active.selected.item .ui.header.text {
	color: #268bd2;
    font-weight: 400;
}
#document .document-title {
	color:#859900;    
    font-size: 20px;
    font-weight: 300!important;
    font-variant: petite-caps;
}
#document .document-title .rem-checkbox {
	margin-top: 5px;
}

.ui.button {
    cursor: pointer;
    display: inline-block;
    outline: 0;
    border: none;
    vertical-align: baseline;
    background: #839496;
    color: #002b36;
    font-family: Lato,helvetica neue,Arial,Helvetica,sans-serif;
    margin: .5rem 1rem 0 0;
    padding: 10px 20px;
    text-transform: none;
    text-shadow: none;
    line-height: 1em;
    font-style: normal;
    font-size: 14px;
    font-weight: 300;
    text-align: center;
    text-decoration: none;
    font-family: Arial;
    border-radius: 7px;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: opacity .1s ease,background-color .1s ease,color .1s ease,box-shadow .1s ease,background .1s ease;
    will-change: "";
    -webkit-tap-highlight-color: transparent;
}
.ui.button:hover {
	background-color: #93a1a1!important;
}
#documentList .title.document-list-header {
	margin-left: 0px;
}

.title.document-list-header b {
	color: #2aa198!important;
	font-size:14px;
	font-weight:500;
}

.title.document-list-header b:hover{
	color: #268bd2!important;
}

.title.document-list-header .caret.right.icon::before {
	color: #2aa198;
}

.title.document-list-header .caret.right.icon:hover:before {
	color: #268bd2;
}

.title.document-list-header b:hover.title.document-list-header .caret.right.icon::before {
	color: #268bd2;
}
.rem-text.rem-header--1,
.rem-text.rem-header--2,
.rem-text.rem-header--3 {
  	margin-top: 3px;
	border-radius: 30px;
  	border-left-style: none;
  	border-right-style: none;
  	border-color: none;
  	border-width: 6px;
  	background-color:transparent;
}
.rem-text.rem-header--1 {
	color: rgba(187,46,55,255);
}


.rem-bullet__container.rem-bullet__container-H1 {
	margin-top: -1px!important;
}
.rem-text.rem-header--2 {
	color: #268bd2;
}


.rem-bullet__container.rem-bullet__container-H2 {
	margin-top: -2px!important;
}
.rem-text.rem-header--3 {
	color: rgba(149,155,176,255);
}

.mosaic-window-body div::-webkit-scrollbar-thumb {     
	background-color:#054a5b!important; 
	border-radius: 1px!important; 
}

.mosaic-window-body div::-webkit-scrollbar {    
	 width: 8px!important;     
	 height: 1px!important; 
} 
div::-webkit-scrollbar {    
	 width: 9.8px!important;     
	 height: 1px!important; 
} 

div::-webkit-scrollbar-track {     
	background-color: #002b36!important;      
} 


div::-webkit-scrollbar-thumb:hover {   
	box-shadow: 0px 0px 4px 1px transparent inset;   
}

div::-webkit-scrollbar-thumb {     
	background-color:#054a5b; 
	border-radius: 1px!important; 
}
6 Likes
#2

After working it for a few hours today, I was able to take it a little further. I try to keep it clean, but it’s hard to stay organized when I’m learning notation.

/* Global */
body {
    background-color: #201f1e;
    
    }
    
    /* Queue */
    .queue {
      
    }
    .queue__title {
      
    }
    .queue__badge {
    border: 1px solid #201f1e;
    }
    
    /* Hierarchy Editor */
    #hierarchy-editor {
    
    }
    /* Bullets */
    .rem-bullet__container {
    }
    .rem-bullet {
    }
    
    /* Editor */
    .rem-text {
        font-family: fira code;
        color: rgba(232,232,232,255);
        font-size: 1.04rem;
        
    }
    
    /* Portals */
    .portal-rem {
    }
    .portal-rem-top {
    }
    
    /* Reference and Tag Sections */
    /* Hierarchy Editor */
    #hierarchy-editor .TreeNode{
        border-color: #84660a;
        border-width: 0.1px;
        transition-timing-function: linear;
        position: relative;
        background-color: transparent;
        padding-left: 25px;
        padding-top: 0px;
        padding-bottom: 0px;
        margin-top: 0px;
        margin-bottom: 0px;
    }
    #hierarchy-editor .TreeNode--dark-indent-line {
        border-color: #84660a!important;
        border-width: 0.1px;
        background-color: transparent;
    }
    #hierarchy-editor .TreeNode:hover {      	
        border-color: #b58900;      	
        border-width: 0.1px;      	
        transition-timing-function: linear;      	
        position: relative;      	
        background-color: transparent;      	
        padding-left: 25px;      	
        padding-top: 0px;      	
        padding-bottom: 0px;      	
        margin-top: 0px;   
    }
    #hierarchy-editor .TreeNode--dark-indent-line:hover {      	
        border-color: #b58900!important;      	
        border-width: 0.1px;      	
        background-color: transparent;  
    }
    
    /* Bottom Toolbar */
    .hierarchy-editor-toolbar {
    }
    
    /* Rem-Level Formatting */
    #rem-header--1 {
        font-family: fira code;
    
        }
    .rem-header--2 {
        font-family: fira code;
        
    }
    .rem-header--3 {
        font-family: fira code;
    
    }
    
    /* Text-Level Formatting */
    .rem-reference {
     
    }
    
     #code-node,
     #quote,
     .quote {    
        width: calc(100% - 80px);
        font-family: "Monaco","Menlo","Consolas","Courier New";
        color: black;
        -moz-tab-size: 4;
        tab-size: 4;
        text-decoration: none!important;
        background-color: #3891a6;
        border: 1.5px solid transparent;
        border-radius: 7px;
        padding-right: 2px;
        padding-left: 2px;
        margin-right: 2px;
        margin-left: 2px;
        position: relative;
        min-height: 1rem;
    }
    .cloze {
    }
    
    .highlight-color--red {
        background-color: #8bafb0; 
        border-radius: 4px;
        border-left-style: solid;
        border-right-style: solid;
        border-color: rgba(0, 0, 0,0.0);
        border-width: 0px;
    
    
    }
    .highlight-color--yellow {
        background-color: #067890; 
        border-radius: 4px;
        border-left-style: solid;
        border-right-style: solid;
        border-color: rgba(0, 0, 0,0.0);
        border-width: 0px;
       
    
    }
    .highlight-color--orange {
        //background-color: #e3655b ;
        background-color: #76cae4; 
        border-radius: 4px;
        border-left-style: solid;
        border-right-style: solid;
        border-color: rgba(0, 0, 0,0.0);
        border-width: 0px;
         
        }
    .highlight-color--green {
        background-color: #19647e; 
        border-radius: 4px;
        border-left-style: solid;
        border-right-style: solid;
        border-color: rgba(0, 0, 0,0.0);
        border-width: 0px;
    
    }
    .highlight-color--blue {
        background-color: #3891a6; 
        border-radius: 4px;
        border-left-style: solid;
        border-right-style: solid;
        border-color: rgba(0, 0, 0,0.0);
        border-width: 0px;
    
    }
    .highlight-color--purple {
        //background-color: #390099;
        background-color: #3d348b; 
        border-radius: 4px;
        border-left-style: solid;
        border-right-style: solid;
        border-color: rgba(0, 0, 0,0.0);
        border-width: 0px;
    
        
    }
    
    .work-in-progress-rem {
    }
    .work-in-progress-tag {
    }
    
    /* Documents */
    .document {
        background-color: #201f1e;
    }
    #document {
        background-color: #201f1e;
    }
    #document-parents {
    background-color: #201f1e;
    }
    
    /* Document Sidebar */
    #document-sidebar {
    background-color: #201f1e;
    border: 1px solid #b58900; 
    }
    .document-sidebar_top { 
    }
    .document-sidebar_top__logo-and-user {
    }
    .document-list-item__container {
    }
    .document-list-item {
    }
    .document-sidebar__buttons {
    }
    .navigation-bar  {     
        background-color: #341f28;     
        border-bottom: 1px solid #b58900; 
     
    }
    .gutter {     
        background-color: #073642; 
    } 
    
    .gutter:hover {     
        background-color: #002b36; 
    }
    .rem-bullet, .rem-bullet--in-list {
        width: 0.4em;
        height: 0.4em;
        border-radius: 50%;
        background-color: #b58900;
        display: inline-block;
        border: 5px solid #442803;
        opacity: 1;
        box-shadow: 0px 0px 0px 1px #583400;
    
    }
    
    .rem-bullet__container.rem-bullet__container-H3 {
        margin-top: 1px!important;
    }
    
    
    .settings-page__input .text {
        color: #268bd2;
        font-size:13px;
        font-weight: 400;
    }
    
    
    .settings-page__input .ui.dropdown .dropdown.icon::before {
        color: #268bd2;
    }
    
    .settings-page__input .visible.menu.transition .item .ui.header.text {
        color: #2aa198;
        font-size:13px;
        font-weight: 400;
    }
    
    .settings-page__input .visible.menu.transition .active.selected.item .ui.header.text {
        color: #268bd2;
        font-weight: 400;
    }
    #document .document-title {
        color: #b58900;    
        font-size: 20px;
        font-weight: 300!important;
        font-variant: petite-caps;
    }
    #document .document-title .rem-checkbox {
        margin-top: 5px;
    }
    
    .ui.button {
        cursor: pointer;
        display: inline-block;
        outline: 0;
        border: none;
        vertical-align: baseline;
        background: #839496;
        color: #002b36;
        font-family: Lato,helvetica neue,Arial,Helvetica,sans-serif;
        margin: .5rem 1rem 0 0;
        padding: 10px 20px;
        text-transform: none;
        text-shadow: none;
        line-height: 1em;
        font-style: normal;
        font-size: 14px;
        font-weight: 300;
        text-align: center;
        text-decoration: none;
        font-family: Arial;
        border-radius: 7px;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
        transition: opacity .1s ease,background-color .1s ease,color .1s ease,box-shadow .1s ease,background .1s ease;
        will-change: "";
        -webkit-tap-highlight-color: transparent;
    }
    .ui.button:hover {
        background-color: #93a1a1!important;
    }
    #documentList .title.document-list-header {
        margin-left: 0px;
    }
    
    .title.document-list-header b {
        color: #2aa198!important;
        font-size:14px;
        font-weight:500;
    }
    
    .title.document-list-header b:hover{
        color: #268bd2!important;
    }
    
    .title.document-list-header .caret.right.icon::before {
        color: #2aa198;
    }
    
    .title.document-list-header .caret.right.icon:hover:before {
        color: #268bd2;
    }
    
    .title.document-list-header b:hover.title.document-list-header .caret.right.icon::before {
        color: #268bd2;
    }
    .rem-text.rem-header--1,
    .rem-text.rem-header--2,
    .rem-text.rem-header--3 {
          margin-top: 3px;
        border-radius: 30px;
          border-left-style: none;
          border-right-style: none;
          border-color: none;
          border-width: 6px;
          background-color:transparent;
    }
    .rem-text.rem-header--1 {
        color: rgba(187,46,55,255);
    }
    
    
    .rem-bullet__container.rem-bullet__container-H1 {
        margin-top: -1px!important;
    }
    .rem-text.rem-header--2 {
        color: #268bd2;
    }
    
    
    .rem-bullet__container.rem-bullet__container-H2 {
        margin-top: -2px!important;
    }
    .rem-text.rem-header--3 {
        color: rgba(149,155,176,255);
    }
    
    .mosaic-window-body div::-webkit-scrollbar-thumb {     
        background-color:#054a5b!important; 
        border-radius: 1px!important; 
    }
    
    .mosaic-window-body div::-webkit-scrollbar {    
         width: 8px!important;     
         height: 1px!important; 
    } 
    div::-webkit-scrollbar {    
         width: 9.8px!important;     
         height: 1px!important; 
    } 
    
    div::-webkit-scrollbar-track {     
        background-color: #201f1e!important;      
    } 
    
    
    div::-webkit-scrollbar-thumb:hover {   
        box-shadow: rgb(62, 40, 48) 0px 4px 4px 4px;   
    }
    
    div::-webkit-scrollbar-thumb {     
        background-color:#341f28; 
        border-radius: 1px!important; 
    } 

    #document-sidebar__account-capsule {
       background-color: #341f28;
       box-shadow: rgb(45, 45, 45, 0.1) 0px 0px 2px 1px inset;
    }
    
    #document-sidebar__account-capsule:hover{
        background-color: rgb(62, 40, 48);
        box-shadow: rgb(45, 45, 45, 0.1) 4px 4px 4px 4px;
    }

/*Sidebar text*/
    .text-gray-100 {
      color: #757272;
    }
    .flex-grow{
      color: #757272;
    }
 .bg-gray-5, .bg-gray-10-transparent, .bg-primary-50{
  background-color: #341f28;
  color: #757272;
 }
 
 .bg-primary-50:hover, .bg-gray-5:hover, .bg-gray-10-transparent:hover, #document-sidebar__account-capsule:hover{
  background-color: #41272a;
 }
 .concept_rem_type{
      color: rgba(187,46,55,255);    
              
 }
 .rich-text-editor{
   color: #b58900;
 }css
1 Like
#3

image
image3840×2005 518 KB

3 Likes
#4

Keep in mind that 1.4 changed some things around, so stuff you copy from older themes may straight up not work, even if you write everything correctly.

3 Likes
#5

Here’s an update. Not done yet, but I have portals, flashcards, settings, tags, and a bunch more done.

Early on, I decided to write as few duplicates as possible so it runs faster. Changing colors would be as easy as copying it into VS Code and using find-replace-all on the colors. There are a plenty of variations in color, but it would still be easy to swap colors.

/* Global */
body {
    background-color: #201f1e;
    
    }
    
    /* Queue */
    .Queue.m-0.h-full.overflow-hidden, .spacedRepetition  {
      background-color: #000;
      border: 1px solid #b58900; 

 
    }
      .spacedRepetition  {
      background-color: #000;
 
    }
    .spaced-repetition__reveal-button{
      background-color: #341f28;
      border: 1px solid #b58900; 
    }
    .spaced-repetition__reveal-button > div, .select-none.text-gray-20, .spaced-repetition__prompt__breadcrumbs > span{
      color: #757272;
    }
    .rem-bullet__document, .fill-in-the-blank {
      background-color: #000!important;
      border: 1px solid #201f1e;
    }
    .queue__title {
      background-color: #000;
      
    }
    .queue__badge.rounded {
      background-color: #000;
      border: 1px solid #201f1e;
    }
    
    /* Hierarchy Editor */
    #hierarchy-editor {
    
    }
    /* Bullets */
    .rem-bullet__container {
    }
    .rem-bullet {
    }
    
    /* Editor */
    .rem-text {
        font-family: fira code;
        color: rgba(232,232,232,255);
        font-size: 1.04rem;
        
    }
    
    /* Portals */
    .portal-rem {
    }
    .portal-rem-top {
    }
    
    /* Reference and Tag Sections */
    /* Hierarchy Editor */
    #hierarchy-editor .TreeNode{
        border-color: #84660a;
        border-width: 0.1px;
        transition-timing-function: linear;
        position: relative;
        background-color: transparent;
        padding-left: 25px;
        padding-top: 0px;
        padding-bottom: 0px;
        margin-top: 0px;
        margin-bottom: 0px;
    }
    #hierarchy-editor .TreeNode--dark-indent-line {
        border-color: #84660a!important;
        border-width: 0.1px;
        background-color: transparent;
    }
    #hierarchy-editor .TreeNode:hover {      	
        border-color: #b58900;      	
        border-width: 0.1px;      	
        transition-timing-function: linear;      	
        position: relative;      	
        background-color: transparent;      	
        padding-left: 25px;      	
        padding-top: 0px;      	
        padding-bottom: 0px;      	
        margin-top: 0px;   
    }
    #hierarchy-editor .TreeNode--dark-indent-line:hover {      	
        border-color: #b58900!important;      	
        border-width: 0.1px;      	
        background-color: transparent;  
    }
    
    /* Bottom Toolbar */
    .hierarchy-editor-toolbar {
    }
    
    /* Rem-Level Formatting */
    #rem-header--1 {
        font-family: fira code;
    
        }
    .rem-header--2 {
        font-family: fira code;
        
    }
    .rem-header--3 {
        font-family: fira code;
    
    }
    
    /* Text-Level Formatting */
    .rem-reference {
     
    }
    
     #code-node,
     #quote,
     .quote {    
        width: calc(100% - 80px);
        font-family: "Monaco","Menlo","Consolas","Courier New";
        color: black;
        -moz-tab-size: 4;
        tab-size: 4;
        text-decoration: none!important;
        background-color: #3891a6;
        border: 1.5px solid transparent;
        border-radius: 7px;
        padding-right: 2px;
        padding-left: 2px;
        margin-right: 2px;
        margin-left: 2px;
        position: relative;
        min-height: 1rem;
    }
    .cloze {
    }
    
    .highlight-color--red {
        background-color: #8bafb0; 
        border-radius: 4px;
        border-left-style: solid;
        border-right-style: solid;
        border-color: rgba(0, 0, 0,0.0);
        border-width: 0px;
    
    
    }
    .highlight-color--yellow {
        background-color: #067890; 
        border-radius: 4px;
        border-left-style: solid;
        border-right-style: solid;
        border-color: rgba(0, 0, 0,0.0);
        border-width: 0px;
       
    
    }
    .highlight-color--orange {
        //background-color: #e3655b ;
        background-color: #76cae4; 
        border-radius: 4px;
        border-left-style: solid;
        border-right-style: solid;
        border-color: rgba(0, 0, 0,0.0);
        border-width: 0px;
         
        }
    .highlight-color--green {
        background-color: #19647e; 
        border-radius: 4px;
        border-left-style: solid;
        border-right-style: solid;
        border-color: rgba(0, 0, 0,0.0);
        border-width: 0px;
    
    }
    .highlight-color--blue {
        background-color: #3891a6; 
        border-radius: 4px;
        border-left-style: solid;
        border-right-style: solid;
        border-color: rgba(0, 0, 0,0.0);
        border-width: 0px;
    
    }
    .highlight-color--purple {
        //background-color: #390099;
        background-color: #3d348b; 
        border-radius: 4px;
        border-left-style: solid;
        border-right-style: solid;
        border-color: rgba(0, 0, 0,0.0);
        border-width: 0px;
    
        
    }
    
    .work-in-progress-rem {
    }
    .work-in-progress-tag {
    }
    
    /* Documents */
    .document {
        background-color: #201f1e;
    }
    #document {
        background-color: #201f1e;
    }
    #document-parents {
    background-color: #201f1e;
    }
    

    /* Document Sidebar and Pop Ups */

    #document-sidebar, .popup-menu, .css-kbbFlF, .flex.p-2 .css-ZPdGi {
      background-color: #201f1e;
      border: 1px solid #b58900; 
    }
    .flex .p-2 .pl-0, .p-2 .text-gray-100/* find icons */
{
      background-color: transparent;
      border: 1px solid transparent; 

    }
    .my-2, .six-dot, .toggle-collapse-button /*container border inside popup menu*/{
      background-color: #201f1e;
    }
    .six-dot:hover, .toggle-collapse-button:hover {
      background-color: #2e2b27;
    }
    
    .document-sidebar_top { 
    }
    .document-sidebar_top__logo-and-user {
    }
    .document-list-item__container {
    }
    .document-list-item {
    }
    .document-sidebar__buttons {
    }
    .navigation-bar  {     
        background-color: #341f28;     
        border-bottom: 1px solid #b58900; 
     
    }
    .gutter, {     
        background-color: #341f28; 
    } 
    
    .rem-bullet, .rem-bullet--in-list{
        width: 0.4em;
        height: 0.4em;
        border-radius: 50%;
        background-color: #b58900;
        display: inline-block;
        border: 5px solid #442803;
        opacity: 1;
        box-shadow: 0px 0px 0px 1px #583400;
    
    }
    
    .rem-bullet__container.rem-bullet__container-H3 {
        margin-top: 1px!important;
    }

	/*Settings and popup content*/
    .popup-content--desktop,  .popup-content--centered, .popup-content--settings{
      background-color: #201f1e;
      border: 1px solid #b58900; 
    }   
    
    .settings-page{
      background-color: #201f1e;
    }
    
    .css-czVtdR, .css-hBWTgk, .css-khYwOj, .css-ezQqrb, .css-dwIDzn{
      background-color: #201f1e;
    }
    .css-czVtdR:hover, .css-hBWTgk:hover, .css-khYwOj:hover, .css-dwIDzn:hover, .items-start.p-2.rounded-md:hover{
      background-color: #292726;
    }
    .css-dwIDzn{
      border-bottom: 1px solid #b58900;       
    }
    .css-czVtdR{
      border-top: 1px solid #b58900; 
    }
     
     .css-GbLOh{
     border: transparent;
 }     
    .settings-page__sidebar__link{
      border: 1px solid #b58900!important;
    }         
    .css-exQOrH, .pr-4, .p-4, .css-jBUFtN {
        color: #757272;
     }
    .css-emvqyP, .css-cSCrvK, .css-dcfFHl, .css-ATSnA, .css-jvHraL, .css-eNqOvF, .css-lauZrP, .css-iDvWsv, .inline-flex /*Alt text color in settings*/{
      color: #575151;
    }    
    
    .settings-page__input .ui.dropdown .dropdown.icon::before {
        color: #268bd2;
    }
    
    .settings-page__input .visible.menu.transition .item .ui.header.text {
        color: #2aa198;
        font-size:13px;
        font-weight: 400;
    }
    
    .settings-page__input .visible.menu.transition .active.selected.item .ui.header.text {
        color: #268bd2;
        font-weight: 400;
    }
    #document .document-title {
        color: #b58900;    
        font-size: 20px;
        font-weight: 300!important;
        font-variant: petite-caps;
    }
    #document .document-title .rem-checkbox {
        margin-top: 5px;
    }
    

    #documentList .title.document-list-header {
        margin-left: 0px;
    }
    
    .title.document-list-header b {
        color: #2aa198!important;
        font-size:14px;
        font-weight:500;
    }
    
    .title.document-list-header b:hover{
        color: #268bd2!important;
    }
    
    .title.document-list-header .caret.right.icon::before {
        color: #2aa198;
    }
    
    .title.document-list-header .caret.right.icon:hover:before {
        color: #268bd2;
    }
    
    .title.document-list-header b:hover.title.document-list-header .caret.right.icon::before {
        color: #268bd2;
    }
    .rem-text.rem-header--1,
    .rem-text.rem-header--2,
    .rem-text.rem-header--3 {
          margin-top: 3px;
        border-radius: 30px;
          border-left-style: none;
          border-right-style: none;
          border-color: none;
          border-width: 6px;
          background-color:transparent;
    }
    .rem-text.rem-header--1 {
        color: rgba(187,46,55,255);
    }
    
    
    .rem-bullet__container.rem-bullet__container-H1 {
        margin-top: -1px!important;
    }
    .rem-text.rem-header--2 {
        color: #268bd2;
    }
    
    
    .rem-bullet__container.rem-bullet__container-H2 {
        margin-top: -2px!important;
    }
    .rem-text.rem-header--3 {
        color: rgba(149,155,176,255);
    }
    
    .mosaic-window-body div::-webkit-scrollbar-thumb {     
        background-color:#341f28!important; 
        border-radius: 1px!important; 
    }
    
    .mosaic-window-body div::-webkit-scrollbar {    
         width: 8px!important;     
         height: 1px!important; 
    } 
    div::-webkit-scrollbar {    
         width: 9.8px!important;     
         height: 1px!important; 
    } 
    
    div::-webkit-scrollbar-track {     
        background-color: #201f1e!important;      
    } 
    
    
    div::-webkit-scrollbar-thumb:hover {   
        box-shadow: #341f28 4px 4px 4px 4px;   
    }
    
    div::-webkit-scrollbar-thumb {     
        background-color:#341f28; 
        border-radius: 1px!important; 
    } 

    #document-sidebar__account-capsule {
       background-color: #341f28;
   }
    

/*Sidebar text*/
    .text-gray-100, .show-embed-search-button--automatic, .hierarchy-editor__search-portal-section, .caret.down, .icon {
      color: #757272;
    }
    .flex-grow{
      color: #757272;
    }
    .cursor-pointer, .text-gray-60.font-inter, img{
  	  color: #757272;
    }
    .cursor-pointer:hover{
      background-color: #292726!important;
    }
    
    .group-hover-bg-hover-bg-transparent:hover{
 	  background-color: #341f28!important;
    }
   .bg-gray-5, .bg-gray-10-transparent, .bg-primary-50, input, .button.css-jAnOmY, .button.css-GbLOh, .button.css-cvJUnF, .button.css-jWWeXl, .button.css-hBMxXg, .button.css-hcODQQ, .ui.button {
    background-color: #341f28!important;
    color: #757272;
  }
  .bg-white, button, .flex.items-center{
     background-color: transparent;
     color: #757272!important;
  }
  .css-GbLOh{
    border: transparent;
  }
  .bg-primary-50:hover, .bg-gray-5:hover, .bg-gray-10-transparent:hover, #document-sidebar__account-capsule:hover, input:hover, .button.css-jAnOmY:hover, .button.css-GbLOh:hover, .button.css-cvJUnF:hover, .button.css-jWWeXl:hover, .button.css-hBMxXg:hover, .button.css-hcODQQ:hover, div::-webkit-scrollbar-thumb:hover, .ui.button:hover{
    background-color: #41272a!important;
   }
   .ui.message{
   background-color: black;
   }
 .concept_rem_type{
      color: rgba(187,46,55,255);    
              
 }
 .rich-text-editor{
   color: #b58900;
 }
   .flex.flex-grow.bg-gray-10.mx-6, .queue__progress-bar {
     background-color: #b58900;
     
   }
   .border-b{
     border-bottom: 1px solid #b58900!important;
   }
   .border-solid{
     border: 1px solid #b58900;
   }
   
   button.bg-white /*show source show tags at top of page*/{
    background-color: #201f1e!important;
   }
   .opacity-0{
    background-color: #201f1e;
    opacity: 1 ;
   }
   
   .rem-reference.button:hover, .nowrap-RichTextViewer.button>span:hover, .hierarchy-editor__tag-bar__tag.nowrap-RichTextViewer.button > svg:hover /*tags, templates*/{
     background-color: transparent;
     color: #00299E;
   }
   .nowrap-RichTextViewer.button > span, .hierarchy-editor__tag-bar__tag.nowrap-RichTextViewer.button > svg {
     color: #2156db;
   }
   /*Portals */
   div.portal-tree-node-box::before{
     background-color: #2156db!important;
   }
   div.portal-tree-node-box:hover::before{
     background-color: #00299E!important;
   }
   .notIncludedAncestor, .notIncludedAncestorClickable, .join-arrow{
    color: #757272;
   }
   .notIncludedAncestor:hover, .notIncludedAncestorClickable:hover{
    background-color: #292726!important;
  }
1 Like
#6

Thanks, I’m glad I began writing this just as the update was coming in! I’m using the browser inspector as reference. So far it’s the best method I found.

1 Like