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

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.

Ah - I see what is happening. I expected that a note with a tag would be shown as a highlighted node, but instead the tag is shown as a separate highlighted node of its own. It was my misunderstanding fo the functionality. Unfortunately it’s not helpful for my scenario but now I understand the actual usage. Thanks for your help.

Actually, What you are aiming for can be done by the new graph feature. (Actually it has been around for a while now) You can specify tag and the corresponding color of notes in graph containing those tags.

1 Like

Does anyone know the CSS to customize the color of the Orphaned notes circle in the Graph? I don’t see this line of code in the CSS file.

Can one use the color defined in the YAML frontmatter?

2 Likes

Hey Daniyal, how did you find/figure out the .graph-view attributes/modifiers (not sure what they are actually called)?

Also, could you help me find the css line for changing the color of the fill of “active pane”?

The graph view highlights the note that’s currently in the active pane. Apparently it’s yellow by default, but I’d like to be able to change it.

I went ahead and shot in the dark with “.graph-view.color-fill-active” and “.graph-view.color-fill-active-note” but they don’t work.

Sorry for the Late response, I was away for few months. @fourteen, I don’t know how we can Edit that particularly. I think it will be helpful if you ask The CSS WIZARD, Sir @Lithou.

Thanks for ping @Daniyal-Ahmed With all the things going on, I don’t get to read every single post like I used to.


@fourteen You are looking for line 4615 of the app.css which is pictured below

image

Add that to a theme/snippet and change the color like this:

.graph-view.color-fill-focused {
  color: red;
}

And you change the selected node to your desired color:

image

2 Likes

Thank you So Much!

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.