iridescent_folders.css

/* Vibrant Folder Colors for Obsidian
 * Updated 2025-12-20 (YYYY-MM-DD): Reflects current Obsidian structure
 * Colors top-level folders based on pattern
 */

:root {
  /* Primary folder colors */
  --color-red: #e22c3c; /* deep red */
  --color-red-orange: #e9404b; /* warm red-orange */
  --color-hot-red: #e3365e; /* hot red */
  --color-orange: #ee6748; /* vivid orange */
  --color-amber: #fa9f50; /* golden amber */
  --color-yellow: #ffd85e; /* soft yellow */
  --color-lime: #97e768; /* fresh lime */
  --color-mint: #52eea3; /* bright mint */
  --color-cyan: #51e1e9; /* vibrant cyan */
  --color-cool-cyan: #43cfea; /* soft cyan */
  --color-light-blue: #54b6f8; /* sky blue */
  --color-blue: #437cf3; /* deep blue */
  --color-blue-violet: #6f51f4; /* violet-blue */
  --color-violet: #9446f8; /* electric violet */
  --color-purple: #c952ed; /* bright purple */
  --color-magenta: #e54f9b; /* neon magenta */
  --color-cool-gray: #888888; /* cool gray */
}

/* Set folder colors (do not include descendants) */
.nav-files-container > div > .nav-folder {
  --nav-item-color: var(--folder-color) !important;
  --nav-item-weight-hover: bold;
}

/* Disable folder colors for descendants */
.nav-file {
  --nav-item-color: initial;
}

/* Dim file colors (on hover) */
.nav-files-container > div > .nav-folder:hover {
  filter: brightness(0.8);
}

/* Rainbow pattern repeating every few containers (n) */
.nav-files-container > div > .nav-folder:nth-child(9n + 2) {
  --folder-color: var(--color-mint);
}
.nav-files-container > div > .nav-folder:nth-child(9n + 3) {
  --folder-color: var(--color-cyan);
}
.nav-files-container > div > .nav-folder:nth-child(9n + 4) {
  --folder-color: var(--color-light-blue);
}
.nav-files-container > div > .nav-folder:nth-child(9n + 5) {
  --folder-color: var(--color-blue);
}
.nav-files-container > div > .nav-folder:nth-child(9n + 6) {
  --folder-color: var(--color-violet);
}
.nav-files-container > div > .nav-folder:nth-child(9n + 7) {
  --folder-color: var(--color-purple);
}
.nav-files-container > div > .nav-folder:nth-child(9n + 8) {
  --folder-color: var(--color-magenta);
}
.nav-files-container > div > .nav-folder:nth-child(9n + 9) {
  --folder-color: var(--color-red);
}
.nav-files-container > div > .nav-folder:nth-child(9n + 10) {
  --folder-color: var(--color-cool-gray);
}