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

Help
#1

Capture
Capture921×839 13.2 KB

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

Thanks!

5 Likes
Help with changing graph styling
#2

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

18 Likes
#3

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
#4

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
#5

Thank you so much for helping me. :purple_heart:

1 Like
#6

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

#7

No Problem!

2 Likes
#8

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

1 Like
#9

Really great, appreciate your post!

1 Like
#10

Glad to help!

#11

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
#12

that’d be interesting not sure how to do it

#13

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
#14

that’d be awesome

#15

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
Provide tags as graph CSS classes/attributes to allow coloring of graph nodes
#16

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

1 Like
#17

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

1 Like
#18

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!

#19

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).

#20

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.