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!

7 Likes
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

24 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
16

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

2 Likes
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.