Colored Sidebar Items.css

/*------------------------------------------------------------------------------
               Obsidian Colored Sidebar Items by CyanVoxel v2.0.0               

                   A colored sidebar CSS snippet inspired by
                   the "Coloured Folders" snippet by Lithou.

This snippet targets folders beginning with numbered prefixes, and applies full
color formatting based on the root colors listed below. The prefixes are both
customizable and extensible; feel free to change, add, and remove them based on
your own titles and vault structure! By default I have a range of 8+1 colors,
however I've provided some other common colors as a starting point for your own
customization. Just swap out the color variable names in the prefix groups.

------------------------------------------------------------------------------*/

:root {
  /* ================================ Colors ================================ */
  --red: #e22c3c;                /* Default Prefix: None */
  --red-orange: #e9404b;         /* Default Prefix: None */
  --orange: #ee6748;             /* Default Prefix: None */
  --amber: #fa9f50;              /* Default Prefix: None */
  --yellow: #ffd85e;             /* Default Prefix: None */
  --lime: #97e768;               /* Default Prefix: None */
  --mint: #52eea3;               /* Default Prefix: 00 */
  --cyan: #51e1e9;               /* Default Prefix: 01 */
  --cool-cyan: #43cfea;          /* Default Prefix: None */
  --light-blue: #54b6f8;         /* Default Prefix: 02 */
  --blue: #437cf3;               /* Default Prefix: 03 */
  --blue-violet: #6f51f4;        /* Default Prefix: None */
  --violet: #9446f8;             /* Default Prefix: 04 */
  --purple: #c952ed;             /* Default Prefix: 05 */
  --magenta: #e54f9b;            /* Default Prefix: 06 */
  --hot-red: #e3365e;            /* Default Prefix: 07 */
  --cool-gray: #515768;          /* Default Prefix: 99 */

  --default-text-color: #d0d0d0;
  --highlight: #fff;
  --shadow: #0b0c2c;

  --nav-item-weight-hover: bold;
}

/* Light Theme Specific Properties */
.theme-light {
  --contrast-color: var(--shadow);
  --default-text-color: var(--shadow);
  --bg-contrast-amount: 70%;
  --fg-contrast-amount: 30%;
  --medium-contrast-amount: 60%;
  --active-contrast-amount: 30%;

  /* Darker Versions of Bright Colors for Light Theme */
  --yellow: color-mix(in srgb, #ffd85e 90%, var(--shadow));
  --lime: color-mix(in srgb, #97e768 90%, var(--shadow));
  --mint: color-mix(in srgb, #52eea3 85%, var(--shadow));
  --cyan: color-mix(in srgb, #51e1e9 85%, var(--shadow));
  --cool-cyan: color-mix(in srgb, #43cfea 85%, var(--shadow));
  --light-blue: color-mix(in srgb, #54b6f8 90%, var(--shadow));
}

/* Dark Theme Specific Properties */
.theme-dark {
  --contrast-color: var(--highlight);
  --bg-contrast-amount: 15%;
  --fg-contrast-amount: 40%;
  --medium-contrast-amount: 20%;
  --active-contrast-amount: 10%;
}

/* All Folder Titles */
.nav-folder-title {
  font-weight: bold;
  border-radius: 5px;
}

/* Narrower Padding on Desktop*/
@media only screen and (min-width: 768px) {
  .nav-file-title,
  .nav-folder-title {
    /* padding: 3px 5px 2px 4px !important; */
    padding-top: 3px !important;
    padding-right: 5px !important;
    padding-bottom: 2px !important;
    padding-left: 15px;
  }
}

/*
============================ Folder Title Prefixes =============================
The following groups of prefixes are divided by the numbering prefix that they
target. For example, prefix '00' targets any folder titles beginning with '00',
such as '00 - Maps of Content'. The only other piece of information that changes
between the prefix groups are the color variables. Change or expand on any of
these to suit your own folder structure and vault theme!
*/

/* ------------------------------- 00 Prefix -------------------------------- */
.nav-folder-title[data-path^="00"] {
  color: var(--mint);
  --nav-item-color-hover: color-mix(
    in srgb,
    var(--mint) var(--fg-contrast-amount),
    var(--contrast-color)
  );
  --nav-item-background-hover: color-mix(
    in srgb,
    var(--mint) var(--bg-contrast-amount),
    transparent
  );
  --background-modifier-border-focus: color-mix(
    in srgb,
    var(--mint) 40%,
    transparent
  );
  --nav-collapse-icon-color: color-mix(in srgb, var(--mint) 60%, transparent);
}
.nav-folder-title[data-path^="00"]:hover {
  --nav-collapse-icon-color: color-mix(
    in srgb,
    var(--mint) 60%,
    var(--contrast-color)
  );
}
.tree-item-children .nav-folder:has(.nav-folder-title[data-path^="00"]) {
  --nav-indentation-guide-color: color-mix(
    in srgb,
    var(--mint) var(--medium-contrast-amount),
    transparent
  );
}
.tree-item-children
  .nav-folder:has(.nav-folder-title[data-path^="00"])
  .nav-file-title {
  color: color-mix(
    in srgb,
    var(--mint) var(--medium-contrast-amount),
    var(--default-text-color)
  );
  --nav-item-background-hover: color-mix(
    in srgb,
    color-mix(in srgb, var(--mint) 50%, var(--highlight))
      var(--bg-contrast-amount),
    transparent
  );
  --background-modifier-border-focus: color-mix(
    in srgb,
    var(--mint) 40%,
    transparent
  );
  --nav-item-background-active: color-mix(
    in srgb,
    var(--mint) var(--active-contrast-amount),
    transparent
  );
}

/* ------------------------------- 01 Prefix -------------------------------- */
.nav-folder-title[data-path^="01"] {
  color: var(--cyan);
  --nav-item-color-hover: color-mix(
    in srgb,
    var(--cyan) var(--fg-contrast-amount),
    var(--contrast-color)
  );
  --nav-item-background-hover: color-mix(
    in srgb,
    var(--cyan) var(--bg-contrast-amount),
    transparent
  );
  --background-modifier-border-focus: color-mix(
    in srgb,
    var(--cyan) 40%,
    transparent
  );
  --nav-collapse-icon-color: color-mix(in srgb, var(--cyan) 60%, transparent);
}
.nav-folder-title[data-path^="01"]:hover {
  --nav-collapse-icon-color: color-mix(
    in srgb,
    var(--cyan) 60%,
    var(--contrast-color)
  );
}
.tree-item-children .nav-folder:has(.nav-folder-title[data-path^="01"]) {
  --nav-indentation-guide-color: color-mix(
    in srgb,
    var(--cyan) var(--medium-contrast-amount),
    transparent
  );
}
.tree-item-children
  .nav-folder:has(.nav-folder-title[data-path^="01"])
  .nav-file-title {
  color: color-mix(
    in srgb,
    var(--cyan) var(--medium-contrast-amount),
    var(--default-text-color)
  );
  --nav-item-background-hover: color-mix(
    in srgb,
    color-mix(in srgb, var(--cyan) 50%, var(--highlight))
      var(--bg-contrast-amount),
    transparent
  );
  --background-modifier-border-focus: color-mix(
    in srgb,
    var(--cyan) 40%,
    transparent
  );
  --nav-item-background-active: color-mix(
    in srgb,
    var(--cyan) var(--active-contrast-amount),
    transparent
  );
}

/* ------------------------------- 02 Prefix -------------------------------- */
.nav-folder-title[data-path^="02"] {
  color: var(--light-blue);
  --nav-item-color-hover: color-mix(
    in srgb,
    var(--light-blue) var(--fg-contrast-amount),
    var(--contrast-color)
  );
  --nav-item-background-hover: color-mix(
    in srgb,
    var(--light-blue) var(--bg-contrast-amount),
    transparent
  );
  --background-modifier-border-focus: color-mix(
    in srgb,
    var(--light-blue) 40%,
    transparent
  );
  --nav-collapse-icon-color: color-mix(
    in srgb,
    var(--light-blue) 60%,
    transparent
  );
}
.nav-folder-title[data-path^="02"]:hover {
  --nav-collapse-icon-color: color-mix(
    in srgb,
    var(--light-blue) 60%,
    var(--contrast-color)
  );
}
.tree-item-children .nav-folder:has(.nav-folder-title[data-path^="02"]) {
  --nav-indentation-guide-color: color-mix(
    in srgb,
    var(--light-blue) var(--medium-contrast-amount),
    transparent
  );
}
.tree-item-children
  .nav-folder:has(.nav-folder-title[data-path^="02"])
  .nav-file-title {
  color: color-mix(
    in srgb,
    var(--light-blue) var(--medium-contrast-amount),
    var(--default-text-color)
  );
  --nav-item-background-hover: color-mix(
    in srgb,
    color-mix(in srgb, var(--light-blue) 50%, var(--highlight))
      var(--bg-contrast-amount),
    transparent
  );
  --background-modifier-border-focus: color-mix(
    in srgb,
    var(--light-blue) 40%,
    transparent
  );
  --nav-item-background-active: color-mix(
    in srgb,
    var(--light-blue) var(--active-contrast-amount),
    transparent
  );
}

/* ------------------------------- 03 Prefix -------------------------------- */
.nav-folder-title[data-path^="03"] {
  color: var(--blue);
  --nav-item-color-hover: color-mix(
    in srgb,
    var(--blue) var(--fg-contrast-amount),
    var(--contrast-color)
  );
  --nav-item-background-hover: color-mix(
    in srgb,
    var(--blue) var(--bg-contrast-amount),
    transparent
  );
  --background-modifier-border-focus: color-mix(
    in srgb,
    var(--blue) 40%,
    transparent
  );
  --nav-collapse-icon-color: color-mix(in srgb, var(--blue) 60%, transparent);
}
.nav-folder-title[data-path^="03"]:hover {
  --nav-collapse-icon-color: color-mix(
    in srgb,
    var(--blue) 60%,
    var(--contrast-color)
  );
}
.tree-item-children .nav-folder:has(.nav-folder-title[data-path^="03"]) {
  --nav-indentation-guide-color: color-mix(
    in srgb,
    var(--blue) var(--medium-contrast-amount),
    transparent
  );
}
.tree-item-children
  .nav-folder:has(.nav-folder-title[data-path^="03"])
  .nav-file-title {
  color: color-mix(
    in srgb,
    var(--blue) var(--medium-contrast-amount),
    var(--default-text-color)
  );
  --nav-item-background-hover: color-mix(
    in srgb,
    color-mix(in srgb, var(--blue) 50%, var(--highlight))
      var(--bg-contrast-amount),
    transparent
  );
  --background-modifier-border-focus: color-mix(
    in srgb,
    var(--blue) 40%,
    transparent
  );
  --nav-item-background-active: color-mix(
    in srgb,
    var(--blue) var(--active-contrast-amount),
    transparent
  );
}

/* ------------------------------- 04 Prefix -------------------------------- */
.nav-folder-title[data-path^="04"] {
  color: var(--violet);
  --nav-item-color-hover: color-mix(
    in srgb,
    var(--violet) var(--fg-contrast-amount),
    var(--contrast-color)
  );
  --nav-item-background-hover: color-mix(
    in srgb,
    var(--violet) var(--bg-contrast-amount),
    transparent
  );
  --background-modifier-border-focus: color-mix(
    in srgb,
    var(--violet) 40%,
    transparent
  );
  --nav-collapse-icon-color: color-mix(in srgb, var(--violet) 60%, transparent);
}
.nav-folder-title[data-path^="04"]:hover {
  --nav-collapse-icon-color: color-mix(
    in srgb,
    var(--violet) 60%,
    var(--contrast-color)
  );
}
.tree-item-children .nav-folder:has(.nav-folder-title[data-path^="04"]) {
  --nav-indentation-guide-color: color-mix(
    in srgb,
    var(--violet) var(--medium-contrast-amount),
    transparent
  );
}
.tree-item-children
  .nav-folder:has(.nav-folder-title[data-path^="04"])
  .nav-file-title {
  color: color-mix(
    in srgb,
    var(--violet) var(--medium-contrast-amount),
    var(--default-text-color)
  );
  --nav-item-background-hover: color-mix(
    in srgb,
    color-mix(in srgb, var(--violet) 50%, var(--highlight))
      var(--bg-contrast-amount),
    transparent
  );
  --background-modifier-border-focus: color-mix(
    in srgb,
    var(--violet) 40%,
    transparent
  );
  --nav-item-background-active: color-mix(
    in srgb,
    var(--violet) var(--active-contrast-amount),
    transparent
  );
}

/* ------------------------------- 05 Prefix -------------------------------- */
.nav-folder-title[data-path^="05"] {
  color: var(--purple);
  --nav-item-color-hover: color-mix(
    in srgb,
    var(--purple) var(--fg-contrast-amount),
    var(--contrast-color)
  );
  --nav-item-background-hover: color-mix(
    in srgb,
    var(--purple) var(--bg-contrast-amount),
    transparent
  );
  --background-modifier-border-focus: color-mix(
    in srgb,
    var(--purple) 40%,
    transparent
  );
  --nav-collapse-icon-color: color-mix(in srgb, var(--purple) 60%, transparent);
}
.nav-folder-title[data-path^="05"]:hover {
  --nav-collapse-icon-color: color-mix(
    in srgb,
    var(--purple) 60%,
    var(--contrast-color)
  );
}
.tree-item-children .nav-folder:has(.nav-folder-title[data-path^="05"]) {
  --nav-indentation-guide-color: color-mix(
    in srgb,
    var(--purple) var(--medium-contrast-amount),
    transparent
  );
}
.tree-item-children
  .nav-folder:has(.nav-folder-title[data-path^="05"])
  .nav-file-title {
  color: color-mix(
    in srgb,
    var(--purple) var(--medium-contrast-amount),
    var(--default-text-color)
  );
  --nav-item-background-hover: color-mix(
    in srgb,
    color-mix(in srgb, var(--purple) 50%, var(--highlight))
      var(--bg-contrast-amount),
    transparent
  );
  --background-modifier-border-focus: color-mix(
    in srgb,
    var(--purple) 40%,
    transparent
  );
  --nav-item-background-active: color-mix(
    in srgb,
    var(--purple) var(--active-contrast-amount),
    transparent
  );
}

/* ------------------------------- 06 Prefix -------------------------------- */
.nav-folder-title[data-path^="06"] {
  color: var(--magenta);
  --nav-item-color-hover: color-mix(
    in srgb,
    var(--magenta) var(--fg-contrast-amount),
    var(--contrast-color)
  );
  --nav-item-background-hover: color-mix(
    in srgb,
    var(--magenta) var(--bg-contrast-amount),
    transparent
  );
  --background-modifier-border-focus: color-mix(
    in srgb,
    var(--magenta) 40%,
    transparent
  );
  --nav-collapse-icon-color: color-mix(
    in srgb,
    var(--magenta) 60%,
    transparent
  );
}
.nav-folder-title[data-path^="06"]:hover {
  --nav-collapse-icon-color: color-mix(
    in srgb,
    var(--magenta) 60%,
    var(--contrast-color)
  );
}
.tree-item-children .nav-folder:has(.nav-folder-title[data-path^="06"]) {
  --nav-indentation-guide-color: color-mix(
    in srgb,
    var(--magenta) var(--medium-contrast-amount),
    transparent
  );
}
.tree-item-children
  .nav-folder:has(.nav-folder-title[data-path^="06"])
  .nav-file-title {
  color: color-mix(
    in srgb,
    var(--magenta) var(--medium-contrast-amount),
    var(--default-text-color)
  );
  --nav-item-background-hover: color-mix(
    in srgb,
    color-mix(in srgb, var(--magenta) 50%, var(--highlight))
      var(--bg-contrast-amount),
    transparent
  );
  --background-modifier-border-focus: color-mix(
    in srgb,
    var(--magenta) 40%,
    transparent
  );
  --nav-item-background-active: color-mix(
    in srgb,
    var(--magenta) var(--active-contrast-amount),
    transparent
  );
}

/* ------------------------------- 07 Prefix -------------------------------- */
.nav-folder-title[data-path^="07"] {
  color: var(--hot-red);
  --nav-item-color-hover: color-mix(
    in srgb,
    var(--hot-red) var(--fg-contrast-amount),
    var(--contrast-color)
  );
  --nav-item-background-hover: color-mix(
    in srgb,
    var(--hot-red) var(--bg-contrast-amount),
    transparent
  );
  --background-modifier-border-focus: color-mix(
    in srgb,
    var(--hot-red) 40%,
    transparent
  );
  --nav-collapse-icon-color: color-mix(
    in srgb,
    var(--hot-red) 60%,
    transparent
  );
}
.nav-folder-title[data-path^="07"]:hover {
  --nav-collapse-icon-color: color-mix(
    in srgb,
    var(--hot-red) 60%,
    var(--contrast-color)
  );
}
.tree-item-children .nav-folder:has(.nav-folder-title[data-path^="07"]) {
  --nav-indentation-guide-color: color-mix(
    in srgb,
    var(--hot-red) var(--medium-contrast-amount),
    transparent
  );
}
.tree-item-children
  .nav-folder:has(.nav-folder-title[data-path^="07"])
  .nav-file-title {
  color: color-mix(
    in srgb,
    var(--hot-red) var(--medium-contrast-amount),
    var(--default-text-color)
  );
  --nav-item-background-hover: color-mix(
    in srgb,
    color-mix(in srgb, var(--hot-red) 50%, var(--highlight))
      var(--bg-contrast-amount),
    transparent
  );
  --background-modifier-border-focus: color-mix(
    in srgb,
    var(--hot-red) 40%,
    transparent
  );
  --nav-item-background-active: color-mix(
    in srgb,
    var(--hot-red) var(--active-contrast-amount),
    transparent
  );
}

/* ------------------------------- 99 Prefix -------------------------------- */
.nav-folder-title[data-path^="99"] {
  color: var(--cool-gray);
  --nav-item-color-hover: color-mix(
    in srgb,
    var(--cool-gray) var(--fg-contrast-amount),
    var(--contrast-color)
  );
  --nav-item-background-hover: color-mix(
    in srgb,
    var(--cool-gray) var(--bg-contrast-amount),
    transparent
  );
  --background-modifier-border-focus: color-mix(
    in srgb,
    var(--cool-gray) 40%,
    transparent
  );
  --nav-collapse-icon-color: color-mix(
    in srgb,
    var(--cool-gray) 60%,
    transparent
  );
}
.nav-folder-title[data-path^="99"]:hover {
  --nav-collapse-icon-color: color-mix(
    in srgb,
    var(--cool-gray) 60%,
    var(--contrast-color)
  );
}
.tree-item-children .nav-folder:has(.nav-folder-title[data-path^="99"]) {
  --nav-indentation-guide-color: color-mix(
    in srgb,
    var(--cool-gray) var(--medium-contrast-amount),
    transparent
  );
}
.tree-item-children
  .nav-folder:has(.nav-folder-title[data-path^="99"])
  .nav-file-title {
  color: color-mix(
    in srgb,
    var(--cool-gray) var(--medium-contrast-amount),
    var(--default-text-color)
  );
  --nav-item-background-hover: color-mix(
    in srgb,
    color-mix(in srgb, var(--cool-gray) 50%, var(--highlight))
      var(--bg-contrast-amount),
    transparent
  );
  --background-modifier-border-focus: color-mix(
    in srgb,
    var(--cool-gray) 40%,
    transparent
  );
  --nav-item-background-active: color-mix(
    in srgb,
    var(--cool-gray) var(--active-contrast-amount),
    transparent
  );
}