Created
October 10, 2023 13:31
-
-
Save WebInspectInc/1ec2800043c2aac5f92d1783103c7d87 to your computer and use it in GitHub Desktop.
Rainbow-ifies folders in Obsidian, but only the root folders
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Preview of styling with the Minimal theme/Flexoki color scheme. Notice subfolders do not inherit the styling: