Skip to content

Instantly share code, notes, and snippets.

@hiorws

hiorws/gist:e300c8c8ebb5b6481eddac701abf51dc

Created December 19, 2024 08:21
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save hiorws/e300c8c8ebb5b6481eddac701abf51dc to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save hiorws/e300c8c8ebb5b6481eddac701abf51dc to your computer and use it in GitHub Desktop.
Download ZIP
ColoredSidebarItems.css
Raw
gistfile1.txt
/*------------------------------------------------------------------------------
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
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment