Is there a way to change the color of the nodes in graph view?

Any css code to change the colors? I can’t seem to figure it out.

Thanks!

6 Likes

Now what you should do is copy the individual blocks of code into the css file called obsidian on your vault ! first you should enable custom css on appearance and plugin tab
Now to change different colors just paste the hexcode after the # to change the colors !
I recommend going to https://encycolorpedia.com/ to find suitable color hexcodes!

for tag color :

.theme-dark .graph-view.color-fill-tag {
color: #5dbcd2;
}

for file attachment color:

.theme-dark .graph-view.color-fill-attachment {
color: #d669bc;
}

for unresolved (not made but linked)notes:

.theme-dark .graph-view.color-fill-unresolved {
color: #9e8aff;
Opacity:1;
}

For color of arrow if you enable it in graph settings

.theme-dark .graph-view.color-arrow {
color: #d669bc;
}

now

the node settings and string settings:

For the color of node

.graph-view.color-fill {
color: #fcf601;
}

for the color of the strings attaching nodes together:

.graph-view.color-line {
color: #26798c;
}

for text on the nodes ( name of notes ) :

.graph-view.color-text {
color: #cccccc;
}

Also the node color but when you hover on the node:

.graph-view.color-fill-highlight {
color: #26798c;
}

Also the line color which join the notes but when you hover on the node:

.graph-view.color-line-highlight {
color: #5dbcd2;
}

hope

it helps

23 Likes

thanks @Daniyal-Ahmed for the awesome comment with detail info, I’ll definetly be using that

there’s also info in the help vault

and I couldn’t open that link to hex colors, but I found a similar one https://encycolorpedia.com/

1 Like

Yes, that’s the one link, Sorry I somewhat didn’t know the exact URL! It was kind of in my head but I’m glad you got it!
I’ll Update it NOW!

2 Likes

Thank you so much for helping me. :purple_heart:

1 Like

@Daniyal-Ahmed awesome, wasn’t sure if it was the same one, thanks for the recommendation it’s a cool site!

No Problem!

2 Likes

Yeah ! Getting Hex codes on the go for css is Quite helpful!

1 Like

Really great, appreciate your post!

1 Like

Glad to help!

Can I change the color of the specific node?

For example to add some CSS code to the end of [[Sun 20 1101]]:

.graph-view.color-fill {
  color: #ff0000;
}

and it will change it to red.

2 Likes

that’d be interesting not sure how to do it

I don’t know about that functionality but if it could be implemented, I am suggesting that the color of the node on graph of any note could be declared by adding a tag of the color name directly in the note! That will be good !

1 Like

that’d be awesome

It would be amazing to be able to color all nodes that have a specific tag. eg so I would color all my nodes tagged with #people so I can see all the people color-coded in the graph.

1 Like

oh that’s literally this Provide tags as graph CSS classes/attributes to allow coloring of graph nodes

2 Likes

Thank you @Daniyal-Ahmed! You made my first venture into customization incredibly easy.

1 Like

It would be very accessible if someone made a tutorial like this for a whole theme! It would help a lot of people. Pleased to help!

Thank you for the helpful post, can you explain what the “fill tag” does? I added and enabled this CSS as a snippet, and then added a tag to one of my notes, and enabled “Tags” in the graph view, but nothing changed in the resulting graph (and no change after reloading either).

That is unusual! Can you do the following;

  1. In the Appearance tab, Enable custom css.
  2. Make sure you are using a valid hex code.