Adding Color to Obsidian--- A Rainbow of Possibility! - Feature archive

I’m sure this has been suggested before, but I still see no actual implementation of this, so I decided to compile a few concepts and work-around implementations in hopes that someone may find some interest in picking this up!
Finally this is a beautiful implementation by @Lithou using CSS which I think looks absolutely phenomenal and something that would really beautify (and streamline) knowledge managers around the world!
Color Theory Notes
Research has demonstrated in many cases that the mood-altering effects of color may only be temporary. A blue room may initially cause feelings of calm, but the effect dissipates after a short period of time.
Color psychology suggests that various shades can have a wide range of effects, from boosting our moods to causing anxiety.
Color psychology suggests that various shades can have a wide range of effects, from boosting our moods to causing anxiety.
Color Poster as Markdown
The color of passion and drama. This color attracts the most attention and is associated with strong emotions such as love and anger. Red is the color used universally to signify danger, courage, strength, and power. Red is stimulating, vibrant and exciting. Red inspires desire with a strong link to sexuality and increased appetites.
EXCITEMENT ENERGY PASSION COURAGE ATTENTION
STIMULATE, CREATE URGENCY, DRAW ATTENTION, CAUTION, ENCOURAGE
Orange
The color of encouragement. The combination of yellow and red makes orange convey excitement, warmth and enthusiasm. Social and inviting, this is the color of the extrovert, exuding happiness and joy, releasing inhibitions. Need to be inspired into action or have a positive outlook on life? Orange is a motivating and encouraging color.
The color of optimism. Yellow is a compelling color that conveys youthful, fresh energy. This color of sunshine is uplifting and illuminating and associated with success and confidence. Yellow stimulates the left side of the brain, helping with clear thinking and quick decision making. Yellow grabs attention because the eye sees yellow first. The downside of yellow is that it can induce anxiety
ENTHUSIASM, OPPORTUNITY, SPONTANITY, HAPPINESS, POSITIVITY
STIMULATE, RELAX, AWAKE AWARENESS, ENERGIZE, AFFECT MOOD
Pink
The color of sensitivity — The passion of red combined with the purity of white create this color associated with love, tranquillity and femininity. Pink has associations with tenderness and nurturing while conveying a sense of safety and even vulnerability. Seeing the world through “rose (pink) colored glasses” is holds a negative connotation as being associated with being unrealistic and overly optimistic.
The color of trust. Blue, the shade of the sea and the sky, is thought to induce calm and convey tranquillity, serenity and peace. The popular color instils confidence and inspires feelings of trust, loyalty, integrity and responsibility. Cool blue is conservative and can also be perceived as aloof. Blue tends to suppress the appetite — there are not many foods associated with blue in nature.
TRUST, RESPONSIBILITY, HONESTY, LOYALITY, INNER SECURITY
REDUCE STRESS, CREATE CALMNESS, RELAX, SECURE, CREATE ORDER
Green
The color of growth and health. Think of nature and see green in all its glory expressing renewal and life. Green has a strong association as a refreshing and peaceful color. It evokes feeling of abundance and a plentiful environment while providing a restful and secure feeling. The prosperity signified by green can be negatively perceived as materialistic and possessive.
SAFETY, HARMONY, STABILITY, RELIABLILITY, BALANCE
RELAX, BALANCE, REVITALIZE, ENCOURAGE, POSSESS
Violet
The color of spirituality. The energy of red with the calm of blue combine to create violet, a color that inspires reflection and self awareness. It is the color of the sensitive, compassionate intuitive soul — the introvert. Also, violet has long been associated with royalty, and characteristics of quality and luxury. Overuse of violet can invoke irritability and arrogance.
IMAGINATION, SPIRITUALITY, COMPASSION, SENSIVITY, MYSTERY
ENCOURAGE CREATIVITY, INSPIRE, COMBINE WISDOM, IMPRESS WITH LUXURY
Brown
The color of the earth. Stability and a solid foundation is the message that emanates from the color brown. This color relates to things that are natural and simple. Brown is thought to be dull, but is reliable and wholesome. Although frugal and stingy, brown is a color of safety and quiet confidence; warm and reassuring. Sadly, brown is among the least favourite colors, but conveys honesty and sincerity. On its own, brown seems unsophisticated, but when combined with others can become quite elegant.
RELIABILITY. STABILITY, HONESTY. COMFORT, NATURAL
STABILIZE, IMPLY COMMON SENSE, SUPPRESS EMOTIONS, CREATE WARMTH
Grey
The color of compromise. Grey is considered to be an unemotional, detatched color seeking to avoid attention. It conveys gloom and depression. Very conservative, grey has a stabilizing effect as it is very neutral, but can also conjure up feelings of frustration. Grey is linked with maturity and protection, being reliable and practical. Grey would not be considered a glamorous colour, yet is still elegant.
NEUTRAL. PRACTICAL. CONSERVATIVE, FORMAL, QUIET
DEPRESS ENERGY, ASSOCIATE TIMELESS, COMMUNICATE, MATURATION
Black
The color of mystery. Black is actually the lack of colour. It covers, hides and implies that there is a barrier. A strong and powerful color, black is formal and sophisticated, sexy and secretive. It is the color of things that are scary and evil. Black conveys pessimism and a lack of hope. While black has many negative associations, it is a colour that signifies power and control. It is considered unfriendly and intimidating, yet still refined, elegant and confident. Black is helpful to other colours, being a strong contrast and making them stand out more.
This idea in general is amazing, there’s no arguing with how useful color can be to carry meaning, like @brimwats 's awesome note obviously demonstrate.
When it comes to this being a feature vs a plugin, Ideally it’d be amazing to have this as a Core plugin, since that would make it of course more stable.
However with all the amounts of work that the devs have, I think this might have to be a community plugin. Those are just my thoughts, but of course if it’s possible to make this a core part of obsidian it would be even better.
So my coloured folders was initially achievable through CSS, but a change to the Obsidian code broke it. A request to the devs and a few updates later, it’s fixed again, although works in a slightly different (potentially better depending on your use case) way. I’ll update the CSS and post it if anyone is interested, but it will allow you to color any folder based on its contents. That makes it super flexible, but will still require a CSS snippet that you adapt to your specific use case.
I’m in the process of recovering from some hardware failure on my computer, but should be back up and running this weekend. I’ll keep you posted.
Ah sorry to hear that! When you can do post the CSS for the color here and maybe some of our super talented coders might be able to hack it into something akin to a plugin. I know that @kepano was able to great a plugin for toggling CSS functions so I imagine something like that could be possible?
Thanks for this Lithou. Do you know of any way to target specific headers in the Outline view? It appears that there isn’t, as there is no data path to them, just a label in a div; I don’t think there is any way to target a text label in CSS.
You are correct that you cannot target headers based on text. Could you explain your use case for this? There might be an alternative method.
For example if you wanted your introduction to be a specific color (say blue). You can’t target an outline item based on the text “introduction”. However, since the outline is laid out in a nested format, you can target items by where they fall in the outline.
So if your introduction is always the first H1 item or it’s always the first H2 item under the second H2 item, then you can target it that way. It’s not as robust, of course, but there are some ways you can do it.
I’m wanting to use it as a status indicator. When I’m working on assignments (and other things), I like to break them down into smaller sections and then colour code them according to current state of progress - it’s a quick visual way to see what needs to be done and was something I used when using Scrivener previously.
So, if I was able to colour the items according to their H size, then that would work as I could just assign H2 to H6 to represent different status colours - it might break the structure overview of the outliner but I’m less concerned about that.
QQ: Does the Colored Folders.css go in the css-snippets file folder? Which is inside the plugins file folder? Does anything else need to happen (besides making sure the CSS Snippet Manager is installed), in order for this stylesheet to work?