Add var-XX vars for easy modification of colours of specific prefixes

[flamerten]

Allow users to modify the colour of specific prefixes by changing the variable var-XX rather than the colors of specific variables.

[Tigre2325]

Hello,

It's my 1st time contributing to another project so I don't know how I can add a commit to this pull request? Because I found another way to simplify even more the modification of colors to prefixes and also adding new prefixes using CSS variables and inheritance.

Basically, the 4 styling classes (the ones that apply the color on the actual elements) could be written only once by removing the data-path attribute, and use a CSS variable (e.g. --prefix-color) inside those 4 classes. Then, we would only need to define --prefix-color once:

.nav-folder-title[data-path^="00"] {
  --prefix-color: var(--mint);
}

Automatically the correct color will be associated with the correct folder through this --prefix-color variable. To add a new prefix would be as simple as:

1. Create a copy of the following CSS block

   .nav-folder-title[data-path^="00"] {
     --prefix-color: var(--mint);
   }

2. Change the prefix (00) with your desired prefix
3. Swap out the color variable (--mint) with your desired color variable

So the end the CSS would become something like this:

/*
============================ 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!
*/

.nav-folder-title[data-path^="00"] {
  --prefix-color: var(--mint);
}
.nav-folder-title[data-path^="01"] {
  --prefix-color: var(--cyan);
}
.nav-folder-title[data-path^="02"] {
  --prefix-color: var(--light-blue);
}
.nav-folder-title[data-path^="03"] {
  --prefix-color: var(--blue);
}
.nav-folder-title[data-path^="04"] {
  --prefix-color: var(--violet);
}
.nav-folder-title[data-path^="05"] {
  --prefix-color: var(--purple);
}
.nav-folder-title[data-path^="06"] {
  --prefix-color: var(--magenta);
}
.nav-folder-title[data-path^="07"] {
  --prefix-color: var(--hot-red);
}
.nav-folder-title[data-path^="99"] {
  --prefix-color: var(--cool-gray);
}

/* -------------------------------- Styling --------------------------------- */
.nav-folder-title {
  color: var(--prefix-color);
  --nav-item-color-hover: color-mix(
    in srgb,
    var(--prefix-color) var(--fg-contrast-amount),
    var(--contrast-color)
  );
  --nav-item-background-hover: color-mix(
    in srgb,
    var(--prefix-color) var(--bg-contrast-amount),
    transparent
  );
  --background-modifier-border-focus: color-mix(
    in srgb,
    var(--prefix-color) 40%,
    transparent
  );
  --nav-collapse-icon-color: color-mix(
    in srgb,
    var(--prefix-color) 60%,
    transparent
  );
}
.nav-folder-title:hover {
  --nav-collapse-icon-color: color-mix(
    in srgb,
    var(--prefix-color) 60%,
    var(--contrast-color)
  );
}
.tree-item-children .nav-folder:has(.nav-folder-title) {
  --nav-indentation-guide-color: color-mix(
    in srgb,
    var(--prefix-color) var(--medium-contrast-amount),
    transparent
  );
}
.tree-item-children .nav-folder:has(.nav-folder-title) .nav-file-title {
  color: color-mix(
    in srgb,
    var(--prefix-color) var(--medium-contrast-amount),
    var(--default-text-color)
  );
  --nav-item-background-hover: color-mix(
    in srgb,
    color-mix(in srgb, var(--prefix-color) 50%, var(--highlight))
      var(--bg-contrast-amount),
    transparent
  );
  --background-modifier-border-focus: color-mix(
    in srgb,
    var(--prefix-color) 40%,
    transparent
  );
  --nav-item-background-active: color-mix(
    in srgb,
    var(--prefix-color) var(--active-contrast-amount),
    transparent
  );
}

And the README would be changed to this:

### Customizing Prefixes
Further down in the CSS file, you’ll see the CSS class names targeting folders, named something like `.nav-folder-title[data-path^="00"]`. If you wish to change the prefixes to any other number, letter, or word, just replace the old numbers in quotations with your new values. If you'd like to select a folder in some way other than by a prefix, [this article](https://css-tricks.com/almanac/selectors/a/attribute/) shows how to modify the selector in additional ways.

### Adding Additional Folders
If you wish to expand the list of colored folders:

1. Create a copy of the following CSS block
    ```css
    .nav-folder-title[data-path^="00"] {
      --prefix-color: var(--mint);
    }
    ```
2. Change the prefix (`00`) with your desired prefix
3. Swap out the color variable (`--mint`) with your desired color variable

You may have noticed that I’ve included several built-in color variables that are not used by default - these are from my own personal matching palette that you’re free to try out to expand your colored sidebar with!

Since I don't know how add a commit to a pull request, here are the modified CSS and README files in a ZIP: Obsidian-Colored-Sidebar.zip

---

PS: I tried to follow this tutorial to add a commit to this pull-request, but I get an error:

remote: Permission to flamerten/Obsidian-Colored-Sidebar.git denied to Tigre2325.
fatal: unable to access 'https://github.com/flamerten/Obsidian-Colored-Sidebar.git/': The requested URL returned error: 403

[Tigre2325]

The commit message would be this, though I don't know if the explanation in the body is clear enough.

Remove per prefix styling classes and use CSS inheritance

The classes applying the color to the folder can be decoupled from the
prefix by making use of CSS inheritance and CSS variables. This allows
to remove all the "duplicate" code, in which only the color varies and
instead only specify the prefix in the `data-path` attribute and the
`--prefix-color`.

This is possible because all styling classes make use of the
`.nav-folder-title` class to change the folder color based on the
prefix.