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

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!

image

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!


@brimwats probably can speak much more to the benefits than I can as they have implemented color in their PKM and specializes in color theory

EDIT: I originally wrote this post as a plugin request but seeing the beautiful array of colors added to obsidians graph view maybe we could see more colors all around :smiley:

50 Likes

Here’s the notes i’ve taken on color theory!

Color Theory Notes

Metadata: [[2020-10-19]] #ColorTheory #Color

Sources:

  1. Color Psychology: Does It Affect How You Feel?
  • 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.
  1. https://www.creativebloq.com/web-design/12-colours-and-emotions-they-evoke-61515112

My Current Hilights

(Yellow): Important Point by Author
(Blue): Second+ Read Highlights
(Red): Important Information For me
(Purple): Literature Review Sections
(Green): Syllabi Additions

Addt’l Notes:

Color Meaning Psych Extra
Red Passionate, aggressive, important The Color Psychology of Red Passion desire power
Orange Playful, energetic, cheap The Color Psychology of Orange Spiritual Energetic Attention-Grabbing
Yellow Happy, friendly, warning The Color Psychology of Yellow Energenic, warning, cheerful, compex
Green Natural, stable, prosperous Green in Color Psychology: How Does Green Make You Feel? Calming compassionate optimistic natural
Blue Serene, trustworthy, inviting The Color Psychology of Blue Sincere Inspiring Calming
Purple Luxurious, mysterious, romantic The Color Psychology of Purple Regal Sensual Exotic Wisdom
Pink Feminine, young, innocent The Color Psychology of Pink Joyful, creative childish, refreshing
Brown Earthy, sturdy, rustic The Color Psychology of Brown strength and reliability
Black Powerful, sophisticated, edgy The Color Psychology of Black Somber, calm
White Clean, virtuous, healthy The Color Psychology of White Healthy serile clean
Grey Neutral, formal, gloomy

Color Poster as Markdown

Color Meaning Emotion Purpose
Red 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. OPTIMISTIC, INDEPENDENT, ADVENTUROUS, CREATIVITY, FUN STIMULATE, COMMUNICATE FUN, DRAW ATTENTION, EXPRESS FREEDOM, FASCINATE
Yellow 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. COMPASSION, LOVE, IMMATURE, PLAYFUL, ADMIRATION COMMUNICATE ENERGY, INCREASE PULSE, MOTIVATE ACTION, FASCINATE, ENCOURAGE CREATIVITY
Blue 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. POWER, CONTROL, AUTHORITY, DISCIPLINE, ELEGANCE HIDE FEELINGS, INTIMIDATE, RADIATE AUTHORITY, CREATE FEAR, ASSOCIATE WITH.MYSTERY

Highlight Revisions

For Calendar

Personal –

For PDFs

Colors that ZotFile can extract:
Yellow (Class): Important Point by Author
Orange (Class-Work): Annotation
Red (Work): Important Information for my Work
Green (Me) — Disagree with Author Syllabi Additions (AKA add to ToRead)
Blue (varying shades) (Me) Returns to Myself: Second+ Read Highlights
Magenta/Purple (Research) Create Zettlekasten Literature Note

(UNUSED):
Black
White
Gray
Cyan

Default Foxit Options
Dark Red 200,15,18
Light Red 255,20,24
Orange 255,191,40
Yellow 255,255,49
Light Green 138,207,87
Dark Green 0,175,84
Light Blue 0,174,238
Blue 0,111,189
Dark Blue 0,36,95
Purple 114,50,157

Default Zotfile Config Editor
{“Black”: “#000000”, “White”: “#FFFFFF”, “Gray”: “#808080”, “Red”: “#FF0000”, “Orange”: “#FFA500”, “Yellow”: “#FFFF00”, “Green”: “#00FF00”, “Cyan”: “#00FFFF”, “Blue”: “#0000FF”, “Magenta”: “#FF00FF”}

17 Likes

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.

Thanks @OliverM for bringing this up, I think it’s amazing

3 Likes

Yes! Color is a strikingly missing feature in nearly every note taking app, but it’s the most basic aspect of traditional pen and paper note taking and organization itself.

We need to be able to color (or highlight) everything: text, folders, nodes, edges. But especially the graph.

:slight_smile: Do IT In Color

5 Likes

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.

9 Likes

Sorry to hear about your computer! That’s always a pain. I would definitely love the CSS when you have time to relax. :slight_smile:

Looking forward to this, as it will hopefully facilitate my want of colouring different folders (maybe it will work with the outliner too) according to their progress status.

I’m very interested in your solution @Lithou.

I just tested this CSS and it worked well, but only highlights the folder title itself.

div.nav-folder-title[data-path="folder-name-here"],
div.nav-folder-title[data-path="folder-name-here"]:hover {
  background-color: red;
}
2 Likes

Thank you so much for this @brimwats ! An excellent resource.

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?

Coloured Folder Snippet:

Thanks to everyone for their patience. Here’s the snippet for the coloured folders.

Variables

  • Most everything is defined as variables that you can change.
  • All are defined under the “Root” section so it will remain the same for both dark/light mode
  • You can change that by creating two sets of variables, one for each mode

Folder References

  • By default, the snippet is setup to grab folders that start with the numbers 0-9 and the letters A-F.
  • This is my personal setup so my folders are always in the same order
  • You can change it to whatever your folder names are.

Here is an example for the folder that starts with a zero:

    .nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="0"],
    .nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="0"] + .nav-folder-children{
    background-color: var(--Fold0);}

If you wanted to change that to refer to a folder named “Daily Notes” you can use just an equals sign as @davecan suggested above. Make sure to replace it for both lines:

    .nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path="Daily Notes"],
    .nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path="Daily Notes"] + .nav-folder-children{
    background-color: var(--Fold0);}

Visual Examples:

These are the default colours for the folders (all currently collapsed):

Here’s a visual overview of what this snippet should look like/accomplish:

Source Code:

Colored Folders.css (8.7 KB)

Note: I haven’t done any extensive testing yet with other themes/snippets so let me know if you have any bugs.

26 Likes

I like the heading colored, but would like the 2nd level to be default. Thoughts on how to achieve this?

Not sure if this is what you want but this only colours the folder heading:

.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="0"],
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="0"] {
background-color: red;

}

1 Like

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.

Thanks for the reply, Lithou.

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.

Any pointers would be greatly appreciated :+1:

1 Like

Hey Lithou, not to harass you but did you find a way to accomplish targeting headers in the outline view? I keep trying to find a way but it eludes me…

I am only able to get the first two folders to activate in color. I tried changing the --Fold: section and still only 2. I am not sure what I might be doing wrong @Lithou ?

Update:

I figured it out. Thanks so much for creating this.

Any help would be apprreciated,
Thx,
Dan

Just started using this CSS (thanks @Lithou) and definitely an awesome addition!!! @brimwats thank you for the amazing write up!!

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?