Skip to content

Instantly share code, notes, and snippets.

@WebInspectInc
Created October 10, 2023 13:31
Show Gist options
  • Save WebInspectInc/1ec2800043c2aac5f92d1783103c7d87 to your computer and use it in GitHub Desktop.
Save WebInspectInc/1ec2800043c2aac5f92d1783103c7d87 to your computer and use it in GitHub Desktop.
Rainbow-ifies folders in Obsidian, but only the root folders
/* Coloured Folders
A CSS snippet by WebInspectInc
with inspiration from Lithou
This snippet colors the folders in your sidebar based on your theme colors,
with fallbacks in case your theme doesn't specify default colors
This snippet has been modified to only affect only root folders
*/
:root{
/* folder colours */
--Fold1: #f39b9b;
--Fold2: #f0ae59;
--Fold3: #f1ca5d;
--Fold4: #9dcd78;
--Fold5: #8ab6e2;
--Fold6: #aaa5db;
--Fold7: #d399cf;
--Fold8: #cda485;
--Fold9: #b9c0c7;
--FoldA: #f0aaaa;
--FoldB: #f1b86f;
--FoldC: #7acc93;
--FoldD: #87c9d9;
--FoldE: #96abde;
--FoldF: #eb9fc9;
--FoldText: #303030;
}
/* Set up explorer container margins */
.nav-files-container{margin: 0px 5px;}
/* Top Level Folder Titles */
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title {
color: var(--FoldText);
/*padding-left: 20px;*/
margin-top: 5px; /* space between top level sections */
}
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title:hover {
color: white;
}
/* active file increase font size and removes normal highlight marker */
.nav-file-title.is-active {
color: #000000;
font-weight: bold;
}
/* Folder Background Colors */
.nav-folder-children .nav-folder .nav-folder-title {
border-radius: 5px;
margin-top: 2px;
}
.mod-root > .nav-folder-children > .nav-folder:nth-child(9n+2) > .nav-folder-title {
background-color: var(--color-red, var(--Fold1));
}
.mod-root > .nav-folder-children > .nav-folder:nth-child(9n+3) > .nav-folder-title {
background-color: var(--color-orange, var(--Fold2));
}
.mod-root > .nav-folder-children > .nav-folder:nth-child(9n+4) > .nav-folder-title {
background-color: var(--color-yellow, var(--Fold3));
}
.mod-root > .nav-folder-children > .nav-folder:nth-child(9n+5) > .nav-folder-title {
background-color: var(--color-green, var(--Fold4));
}
.mod-root > .nav-folder-children > .nav-folder:nth-child(9n+6) > .nav-folder-title {
background-color: var(--color-cyan, var(--Fold5));
}
.mod-root > .nav-folder-children > .nav-folder:nth-child(9n+7) > .nav-folder-title {
background-color: var(--color-blue, var(--Fold6));
}
.mod-root > .nav-folder-children > .nav-folder:nth-child(9n+8) > .nav-folder-title {
background-color: var(--color-purple, var(--Fold7));
}
.mod-root > .nav-folder-children > .nav-folder:nth-child(9n+9) > .nav-folder-title {
background-color: var(--color-pink, var(--Fold8));
}
.mod-root > .nav-folder-children > .nav-folder:nth-child(9n+10) > .nav-folder-title {
background-color: var(--Fold9);
}
/*----file explorer smaller fonts & line height----*/
.nav-file-title,
.nav-folder-title {
cursor: pointer;
position: relative;
border-width: 1px;
border-style: solid;
border-color: transparent;
border-image: initial;
border-radius: 0px;
display: flex;
align-items: baseline;
flex-direction: row;
}
.nav-file-title {
border-radius: var(--radius-s);
}
.mod-root > .nav-folder-children > .nav-folder > .nav-folder-title {
color: var(--FoldText);
}
body:not(.is-grabbing) .tree-item-self.nav-folder-title:hover {
/* color: var(--FoldText);*/
opacity: 0.6;
}
/*rename*/
.nav-file-title-content.is-being-renamed,
.nav-folder-title-content.is-being-renamed {
cursor: text;
border-color: transparent;
background-color: white;
color: var(--FoldText);
}
@WebInspectInc
Copy link
Author

Preview of styling with the Minimal theme/Flexoki color scheme. Notice subfolders do not inherit the styling:

Screenshot from 2023-10-10 08-32-56
Screenshot from 2023-10-10 08-32-49

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment