Colored Sidebar Items.css
1 /*------------------------------------------------------------------------------ 2 Obsidian Colored Sidebar Items by CyanVoxel v2.0.0 3 4 A colored sidebar CSS snippet inspired by 5 the "Coloured Folders" snippet by Lithou. 6 7 This snippet targets folders beginning with numbered prefixes, and applies full 8 color formatting based on the root colors listed below. The prefixes are both 9 customizable and extensible; feel free to change, add, and remove them based on 10 your own titles and vault structure! By default I have a range of 8+1 colors, 11 however I've provided some other common colors as a starting point for your own 12 customization. Just swap out the color variable names in the prefix groups. 13 14 ------------------------------------------------------------------------------*/ 15 16 :root { 17 /* ================================ Colors ================================ */ 18 --red: #e22c3c; /* Default Prefix: None */ 19 --red-orange: #e9404b; /* Default Prefix: None */ 20 --orange: #ee6748; /* Default Prefix: None */ 21 --amber: #fa9f50; /* Default Prefix: None */ 22 --yellow: #ffd85e; /* Default Prefix: None */ 23 --lime: #97e768; /* Default Prefix: None */ 24 --mint: #52eea3; /* Default Prefix: 00 */ 25 --cyan: #51e1e9; /* Default Prefix: 01 */ 26 --cool-cyan: #43cfea; /* Default Prefix: None */ 27 --light-blue: #54b6f8; /* Default Prefix: 02 */ 28 --blue: #437cf3; /* Default Prefix: 03 */ 29 --blue-violet: #6f51f4; /* Default Prefix: None */ 30 --violet: #9446f8; /* Default Prefix: 04 */ 31 --purple: #c952ed; /* Default Prefix: 05 */ 32 --magenta: #e54f9b; /* Default Prefix: 06 */ 33 --hot-red: #e3365e; /* Default Prefix: 07 */ 34 --cool-gray: #515768; /* Default Prefix: 99 */ 35 36 --default-text-color: #d0d0d0; 37 --highlight: #fff; 38 --shadow: #0b0c2c; 39 40 --nav-item-weight-hover: bold; 41 } 42 43 /* Light Theme Specific Properties */ 44 .theme-light { 45 --contrast-color: var(--shadow); 46 --default-text-color: var(--shadow); 47 --bg-contrast-amount: 70%; 48 --fg-contrast-amount: 30%; 49 --medium-contrast-amount: 60%; 50 --active-contrast-amount: 30%; 51 52 /* Darker Versions of Bright Colors for Light Theme */ 53 --yellow: color-mix(in srgb, #ffd85e 90%, var(--shadow)); 54 --lime: color-mix(in srgb, #97e768 90%, var(--shadow)); 55 --mint: color-mix(in srgb, #52eea3 85%, var(--shadow)); 56 --cyan: color-mix(in srgb, #51e1e9 85%, var(--shadow)); 57 --cool-cyan: color-mix(in srgb, #43cfea 85%, var(--shadow)); 58 --light-blue: color-mix(in srgb, #54b6f8 90%, var(--shadow)); 59 } 60 61 /* Dark Theme Specific Properties */ 62 .theme-dark { 63 --contrast-color: var(--highlight); 64 --bg-contrast-amount: 15%; 65 --fg-contrast-amount: 40%; 66 --medium-contrast-amount: 20%; 67 --active-contrast-amount: 10%; 68 } 69 70 /* All Folder Titles */ 71 .nav-folder-title { 72 font-weight: bold; 73 border-radius: 5px; 74 } 75 76 /* Narrower Padding on Desktop*/ 77 @media only screen and (min-width: 768px) { 78 .nav-file-title, 79 .nav-folder-title { 80 /* padding: 3px 5px 2px 4px !important; */ 81 padding-top: 3px !important; 82 padding-right: 5px !important; 83 padding-bottom: 2px !important; 84 padding-left: 15px; 85 } 86 } 87 88 /* 89 ============================ Folder Title Prefixes ============================= 90 The following groups of prefixes are divided by the numbering prefix that they 91 target. For example, prefix '00' targets any folder titles beginning with '00', 92 such as '00 - Maps of Content'. The only other piece of information that changes 93 between the prefix groups are the color variables. Change or expand on any of 94 these to suit your own folder structure and vault theme! 95 */ 96 97 /* ------------------------------- 00 Prefix -------------------------------- */ 98 .nav-folder-title[data-path^="00"] { 99 color: var(--mint); 100 --nav-item-color-hover: color-mix( 101 in srgb, 102 var(--mint) var(--fg-contrast-amount), 103 var(--contrast-color) 104 ); 105 --nav-item-background-hover: color-mix( 106 in srgb, 107 var(--mint) var(--bg-contrast-amount), 108 transparent 109 ); 110 --background-modifier-border-focus: color-mix( 111 in srgb, 112 var(--mint) 40%, 113 transparent 114 ); 115 --nav-collapse-icon-color: color-mix(in srgb, var(--mint) 60%, transparent); 116 } 117 .nav-folder-title[data-path^="00"]:hover { 118 --nav-collapse-icon-color: color-mix( 119 in srgb, 120 var(--mint) 60%, 121 var(--contrast-color) 122 ); 123 } 124 .tree-item-children .nav-folder:has(.nav-folder-title[data-path^="00"]) { 125 --nav-indentation-guide-color: color-mix( 126 in srgb, 127 var(--mint) var(--medium-contrast-amount), 128 transparent 129 ); 130 } 131 .tree-item-children 132 .nav-folder:has(.nav-folder-title[data-path^="00"]) 133 .nav-file-title { 134 color: color-mix( 135 in srgb, 136 var(--mint) var(--medium-contrast-amount), 137 var(--default-text-color) 138 ); 139 --nav-item-background-hover: color-mix( 140 in srgb, 141 color-mix(in srgb, var(--mint) 50%, var(--highlight)) 142 var(--bg-contrast-amount), 143 transparent 144 ); 145 --background-modifier-border-focus: color-mix( 146 in srgb, 147 var(--mint) 40%, 148 transparent 149 ); 150 --nav-item-background-active: color-mix( 151 in srgb, 152 var(--mint) var(--active-contrast-amount), 153 transparent 154 ); 155 } 156 157 /* ------------------------------- 01 Prefix -------------------------------- */ 158 .nav-folder-title[data-path^="01"] { 159 color: var(--cyan); 160 --nav-item-color-hover: color-mix( 161 in srgb, 162 var(--cyan) var(--fg-contrast-amount), 163 var(--contrast-color) 164 ); 165 --nav-item-background-hover: color-mix( 166 in srgb, 167 var(--cyan) var(--bg-contrast-amount), 168 transparent 169 ); 170 --background-modifier-border-focus: color-mix( 171 in srgb, 172 var(--cyan) 40%, 173 transparent 174 ); 175 --nav-collapse-icon-color: color-mix(in srgb, var(--cyan) 60%, transparent); 176 } 177 .nav-folder-title[data-path^="01"]:hover { 178 --nav-collapse-icon-color: color-mix( 179 in srgb, 180 var(--cyan) 60%, 181 var(--contrast-color) 182 ); 183 } 184 .tree-item-children .nav-folder:has(.nav-folder-title[data-path^="01"]) { 185 --nav-indentation-guide-color: color-mix( 186 in srgb, 187 var(--cyan) var(--medium-contrast-amount), 188 transparent 189 ); 190 } 191 .tree-item-children 192 .nav-folder:has(.nav-folder-title[data-path^="01"]) 193 .nav-file-title { 194 color: color-mix( 195 in srgb, 196 var(--cyan) var(--medium-contrast-amount), 197 var(--default-text-color) 198 ); 199 --nav-item-background-hover: color-mix( 200 in srgb, 201 color-mix(in srgb, var(--cyan) 50%, var(--highlight)) 202 var(--bg-contrast-amount), 203 transparent 204 ); 205 --background-modifier-border-focus: color-mix( 206 in srgb, 207 var(--cyan) 40%, 208 transparent 209 ); 210 --nav-item-background-active: color-mix( 211 in srgb, 212 var(--cyan) var(--active-contrast-amount), 213 transparent 214 ); 215 } 216 217 /* ------------------------------- 02 Prefix -------------------------------- */ 218 .nav-folder-title[data-path^="02"] { 219 color: var(--light-blue); 220 --nav-item-color-hover: color-mix( 221 in srgb, 222 var(--light-blue) var(--fg-contrast-amount), 223 var(--contrast-color) 224 ); 225 --nav-item-background-hover: color-mix( 226 in srgb, 227 var(--light-blue) var(--bg-contrast-amount), 228 transparent 229 ); 230 --background-modifier-border-focus: color-mix( 231 in srgb, 232 var(--light-blue) 40%, 233 transparent 234 ); 235 --nav-collapse-icon-color: color-mix( 236 in srgb, 237 var(--light-blue) 60%, 238 transparent 239 ); 240 } 241 .nav-folder-title[data-path^="02"]:hover { 242 --nav-collapse-icon-color: color-mix( 243 in srgb, 244 var(--light-blue) 60%, 245 var(--contrast-color) 246 ); 247 } 248 .tree-item-children .nav-folder:has(.nav-folder-title[data-path^="02"]) { 249 --nav-indentation-guide-color: color-mix( 250 in srgb, 251 var(--light-blue) var(--medium-contrast-amount), 252 transparent 253 ); 254 } 255 .tree-item-children 256 .nav-folder:has(.nav-folder-title[data-path^="02"]) 257 .nav-file-title { 258 color: color-mix( 259 in srgb, 260 var(--light-blue) var(--medium-contrast-amount), 261 var(--default-text-color) 262 ); 263 --nav-item-background-hover: color-mix( 264 in srgb, 265 color-mix(in srgb, var(--light-blue) 50%, var(--highlight)) 266 var(--bg-contrast-amount), 267 transparent 268 ); 269 --background-modifier-border-focus: color-mix( 270 in srgb, 271 var(--light-blue) 40%, 272 transparent 273 ); 274 --nav-item-background-active: color-mix( 275 in srgb, 276 var(--light-blue) var(--active-contrast-amount), 277 transparent 278 ); 279 } 280 281 /* ------------------------------- 03 Prefix -------------------------------- */ 282 .nav-folder-title[data-path^="03"] { 283 color: var(--blue); 284 --nav-item-color-hover: color-mix( 285 in srgb, 286 var(--blue) var(--fg-contrast-amount), 287 var(--contrast-color) 288 ); 289 --nav-item-background-hover: color-mix( 290 in srgb, 291 var(--blue) var(--bg-contrast-amount), 292 transparent 293 ); 294 --background-modifier-border-focus: color-mix( 295 in srgb, 296 var(--blue) 40%, 297 transparent 298 ); 299 --nav-collapse-icon-color: color-mix(in srgb, var(--blue) 60%, transparent); 300 } 301 .nav-folder-title[data-path^="03"]:hover { 302 --nav-collapse-icon-color: color-mix( 303 in srgb, 304 var(--blue) 60%, 305 var(--contrast-color) 306 ); 307 } 308 .tree-item-children .nav-folder:has(.nav-folder-title[data-path^="03"]) { 309 --nav-indentation-guide-color: color-mix( 310 in srgb, 311 var(--blue) var(--medium-contrast-amount), 312 transparent 313 ); 314 } 315 .tree-item-children 316 .nav-folder:has(.nav-folder-title[data-path^="03"]) 317 .nav-file-title { 318 color: color-mix( 319 in srgb, 320 var(--blue) var(--medium-contrast-amount), 321 var(--default-text-color) 322 ); 323 --nav-item-background-hover: color-mix( 324 in srgb, 325 color-mix(in srgb, var(--blue) 50%, var(--highlight)) 326 var(--bg-contrast-amount), 327 transparent 328 ); 329 --background-modifier-border-focus: color-mix( 330 in srgb, 331 var(--blue) 40%, 332 transparent 333 ); 334 --nav-item-background-active: color-mix( 335 in srgb, 336 var(--blue) var(--active-contrast-amount), 337 transparent 338 ); 339 } 340 341 /* ------------------------------- 04 Prefix -------------------------------- */ 342 .nav-folder-title[data-path^="04"] { 343 color: var(--violet); 344 --nav-item-color-hover: color-mix( 345 in srgb, 346 var(--violet) var(--fg-contrast-amount), 347 var(--contrast-color) 348 ); 349 --nav-item-background-hover: color-mix( 350 in srgb, 351 var(--violet) var(--bg-contrast-amount), 352 transparent 353 ); 354 --background-modifier-border-focus: color-mix( 355 in srgb, 356 var(--violet) 40%, 357 transparent 358 ); 359 --nav-collapse-icon-color: color-mix(in srgb, var(--violet) 60%, transparent); 360 } 361 .nav-folder-title[data-path^="04"]:hover { 362 --nav-collapse-icon-color: color-mix( 363 in srgb, 364 var(--violet) 60%, 365 var(--contrast-color) 366 ); 367 } 368 .tree-item-children .nav-folder:has(.nav-folder-title[data-path^="04"]) { 369 --nav-indentation-guide-color: color-mix( 370 in srgb, 371 var(--violet) var(--medium-contrast-amount), 372 transparent 373 ); 374 } 375 .tree-item-children 376 .nav-folder:has(.nav-folder-title[data-path^="04"]) 377 .nav-file-title { 378 color: color-mix( 379 in srgb, 380 var(--violet) var(--medium-contrast-amount), 381 var(--default-text-color) 382 ); 383 --nav-item-background-hover: color-mix( 384 in srgb, 385 color-mix(in srgb, var(--violet) 50%, var(--highlight)) 386 var(--bg-contrast-amount), 387 transparent 388 ); 389 --background-modifier-border-focus: color-mix( 390 in srgb, 391 var(--violet) 40%, 392 transparent 393 ); 394 --nav-item-background-active: color-mix( 395 in srgb, 396 var(--violet) var(--active-contrast-amount), 397 transparent 398 ); 399 } 400 401 /* ------------------------------- 05 Prefix -------------------------------- */ 402 .nav-folder-title[data-path^="05"] { 403 color: var(--purple); 404 --nav-item-color-hover: color-mix( 405 in srgb, 406 var(--purple) var(--fg-contrast-amount), 407 var(--contrast-color) 408 ); 409 --nav-item-background-hover: color-mix( 410 in srgb, 411 var(--purple) var(--bg-contrast-amount), 412 transparent 413 ); 414 --background-modifier-border-focus: color-mix( 415 in srgb, 416 var(--purple) 40%, 417 transparent 418 ); 419 --nav-collapse-icon-color: color-mix(in srgb, var(--purple) 60%, transparent); 420 } 421 .nav-folder-title[data-path^="05"]:hover { 422 --nav-collapse-icon-color: color-mix( 423 in srgb, 424 var(--purple) 60%, 425 var(--contrast-color) 426 ); 427 } 428 .tree-item-children .nav-folder:has(.nav-folder-title[data-path^="05"]) { 429 --nav-indentation-guide-color: color-mix( 430 in srgb, 431 var(--purple) var(--medium-contrast-amount), 432 transparent 433 ); 434 } 435 .tree-item-children 436 .nav-folder:has(.nav-folder-title[data-path^="05"]) 437 .nav-file-title { 438 color: color-mix( 439 in srgb, 440 var(--purple) var(--medium-contrast-amount), 441 var(--default-text-color) 442 ); 443 --nav-item-background-hover: color-mix( 444 in srgb, 445 color-mix(in srgb, var(--purple) 50%, var(--highlight)) 446 var(--bg-contrast-amount), 447 transparent 448 ); 449 --background-modifier-border-focus: color-mix( 450 in srgb, 451 var(--purple) 40%, 452 transparent 453 ); 454 --nav-item-background-active: color-mix( 455 in srgb, 456 var(--purple) var(--active-contrast-amount), 457 transparent 458 ); 459 } 460 461 /* ------------------------------- 06 Prefix -------------------------------- */ 462 .nav-folder-title[data-path^="06"] { 463 color: var(--magenta); 464 --nav-item-color-hover: color-mix( 465 in srgb, 466 var(--magenta) var(--fg-contrast-amount), 467 var(--contrast-color) 468 ); 469 --nav-item-background-hover: color-mix( 470 in srgb, 471 var(--magenta) var(--bg-contrast-amount), 472 transparent 473 ); 474 --background-modifier-border-focus: color-mix( 475 in srgb, 476 var(--magenta) 40%, 477 transparent 478 ); 479 --nav-collapse-icon-color: color-mix( 480 in srgb, 481 var(--magenta) 60%, 482 transparent 483 ); 484 } 485 .nav-folder-title[data-path^="06"]:hover { 486 --nav-collapse-icon-color: color-mix( 487 in srgb, 488 var(--magenta) 60%, 489 var(--contrast-color) 490 ); 491 } 492 .tree-item-children .nav-folder:has(.nav-folder-title[data-path^="06"]) { 493 --nav-indentation-guide-color: color-mix( 494 in srgb, 495 var(--magenta) var(--medium-contrast-amount), 496 transparent 497 ); 498 } 499 .tree-item-children 500 .nav-folder:has(.nav-folder-title[data-path^="06"]) 501 .nav-file-title { 502 color: color-mix( 503 in srgb, 504 var(--magenta) var(--medium-contrast-amount), 505 var(--default-text-color) 506 ); 507 --nav-item-background-hover: color-mix( 508 in srgb, 509 color-mix(in srgb, var(--magenta) 50%, var(--highlight)) 510 var(--bg-contrast-amount), 511 transparent 512 ); 513 --background-modifier-border-focus: color-mix( 514 in srgb, 515 var(--magenta) 40%, 516 transparent 517 ); 518 --nav-item-background-active: color-mix( 519 in srgb, 520 var(--magenta) var(--active-contrast-amount), 521 transparent 522 ); 523 } 524 525 /* ------------------------------- 07 Prefix -------------------------------- */ 526 .nav-folder-title[data-path^="07"] { 527 color: var(--hot-red); 528 --nav-item-color-hover: color-mix( 529 in srgb, 530 var(--hot-red) var(--fg-contrast-amount), 531 var(--contrast-color) 532 ); 533 --nav-item-background-hover: color-mix( 534 in srgb, 535 var(--hot-red) var(--bg-contrast-amount), 536 transparent 537 ); 538 --background-modifier-border-focus: color-mix( 539 in srgb, 540 var(--hot-red) 40%, 541 transparent 542 ); 543 --nav-collapse-icon-color: color-mix( 544 in srgb, 545 var(--hot-red) 60%, 546 transparent 547 ); 548 } 549 .nav-folder-title[data-path^="07"]:hover { 550 --nav-collapse-icon-color: color-mix( 551 in srgb, 552 var(--hot-red) 60%, 553 var(--contrast-color) 554 ); 555 } 556 .tree-item-children .nav-folder:has(.nav-folder-title[data-path^="07"]) { 557 --nav-indentation-guide-color: color-mix( 558 in srgb, 559 var(--hot-red) var(--medium-contrast-amount), 560 transparent 561 ); 562 } 563 .tree-item-children 564 .nav-folder:has(.nav-folder-title[data-path^="07"]) 565 .nav-file-title { 566 color: color-mix( 567 in srgb, 568 var(--hot-red) var(--medium-contrast-amount), 569 var(--default-text-color) 570 ); 571 --nav-item-background-hover: color-mix( 572 in srgb, 573 color-mix(in srgb, var(--hot-red) 50%, var(--highlight)) 574 var(--bg-contrast-amount), 575 transparent 576 ); 577 --background-modifier-border-focus: color-mix( 578 in srgb, 579 var(--hot-red) 40%, 580 transparent 581 ); 582 --nav-item-background-active: color-mix( 583 in srgb, 584 var(--hot-red) var(--active-contrast-amount), 585 transparent 586 ); 587 } 588 589 /* ------------------------------- 99 Prefix -------------------------------- */ 590 .nav-folder-title[data-path^="99"] { 591 color: var(--cool-gray); 592 --nav-item-color-hover: color-mix( 593 in srgb, 594 var(--cool-gray) var(--fg-contrast-amount), 595 var(--contrast-color) 596 ); 597 --nav-item-background-hover: color-mix( 598 in srgb, 599 var(--cool-gray) var(--bg-contrast-amount), 600 transparent 601 ); 602 --background-modifier-border-focus: color-mix( 603 in srgb, 604 var(--cool-gray) 40%, 605 transparent 606 ); 607 --nav-collapse-icon-color: color-mix( 608 in srgb, 609 var(--cool-gray) 60%, 610 transparent 611 ); 612 } 613 .nav-folder-title[data-path^="99"]:hover { 614 --nav-collapse-icon-color: color-mix( 615 in srgb, 616 var(--cool-gray) 60%, 617 var(--contrast-color) 618 ); 619 } 620 .tree-item-children .nav-folder:has(.nav-folder-title[data-path^="99"]) { 621 --nav-indentation-guide-color: color-mix( 622 in srgb, 623 var(--cool-gray) var(--medium-contrast-amount), 624 transparent 625 ); 626 } 627 .tree-item-children 628 .nav-folder:has(.nav-folder-title[data-path^="99"]) 629 .nav-file-title { 630 color: color-mix( 631 in srgb, 632 var(--cool-gray) var(--medium-contrast-amount), 633 var(--default-text-color) 634 ); 635 --nav-item-background-hover: color-mix( 636 in srgb, 637 color-mix(in srgb, var(--cool-gray) 50%, var(--highlight)) 638 var(--bg-contrast-amount), 639 transparent 640 ); 641 --background-modifier-border-focus: color-mix( 642 in srgb, 643 var(--cool-gray) 40%, 644 transparent 645 ); 646 --nav-item-background-active: color-mix( 647 in srgb, 648 var(--cool-gray) var(--active-contrast-amount), 649 transparent 650 ); 651 }