#1

Hey everyone,

In obsidian, I know that the node colour in graph view and the text are the same colour.

Os there a way to get the node colour to be different from the text colour?

They are under the same markdown code - is there a way to split it?

Regards,

Tansy

#2

I should specify I am using a obsidian nord template.

#3

The color of nodes depends on the theme that you are using. To easily change the color of nodes, just add a group under “groups” in the graph view. This was first released in v0.11.0. You can specify a path (e.g. path: "Daily Notes") to only change the color of certain nodes or change the color of all nodes by making the path /. Hope this helps!

#4

This is not true, they are customized separately. Maybe in a few themes they are the same, but they don’t have to be.

See this guide for how to customize graph view colors:

https://help.obsidian.md/Plugins/Graph+view#Custom+CSS

#5

Ok thanks. I will try and work it out without breaking my theme… as I have light and dark themes too.

I don’t know much css. :slight_smile:

#6

Is this how it is meant to look:

.graph-view.color-circle
{
color: var(–background-primary-alt) !important;
}
.graph-view.color-fill-highlight
{
color: var(–background-secondary-alt) !important;
}
.graph-view.color-line-highlight
{
color: var(–interactive-accent-rgb) !important;
}

Previously it was like this:

.graph-view.color-circle,
.graph-view.color-fill-highlight,
.graph-view.color-line-highlight
{
color: var(–interactive-accent-rgb) !important;
}

#7

There is no “right” way to do CSS since there are many ways to do the same thing, but that looks good to me. When putting code in the forum (or using markdown), you can put it between three back ticks on each side (press the same key as tilde or ~, but don’t press shift), which will format your code better. If you want the color to only work for a light or dark theme, you can put the CSS classes: .theme-dark or .theme-light before one of your other specifiers. For example, if you only wanted to make .graph-view.color-circle show when you have a dark theme, you could do:

.theme-dark .graph-view.color-circle {
    color: var(–background-primary-alt) !important;
}

If you don’t feel like messing around with CSS, you could just make some graph filters and change the colors there.

#8

I have tried the filters and it doesn’t quite work… tbh I am getting more confused. Do I need the { at the start or not…

#9

Yes—maybe this will be helpful:
https://www.w3schools.com/Css/css_syntax.asp

#10

No, sorry I feel so useless…for not understanding…

#11

Sorry I still don’t quite understand what you’re looking to achieve. Is there a specific way you can describe it, for example you want all text to be red and then graph nodes to be filled with green?

#12

@TansyBradshaw Please check your variable notation, I believe it is incorrect. They should look like this (notice the extra hyphen):

.graph-view.color-circle {
    color: var(--background-primary-alt);
}

Other thoughts…

  1. You should not need the !important flag here. Avoid using it unless necessary.
  2. You might be targeting the wrong elements. Silver’s link lists all the available classes for styling the graph. Play with them one at a time until you find the ones you want. (I usually just write something like .graph-view.color-fill {color:red;} so it stands out in a bold color I can see easily. Then once I figure out what each class does, I can change the colors to what I want.)

Please let us know how it goes!

edit - because I did not like my tone when I read later. I certainly did not mean to sound crirical!

#13

@TansyBradshaw if you can describe what you want in-depth, I can probably give you a CSS snippet that will do what you want to achieve. I would need to know if you’re using a theme and if you are, which one.

#14

image
image1375×873 248 KB

The deafult colour for the dots and the Words inc under Zettelkasten are the same colour
code line… I want to be able to change the node colour and not have it effect the links at the side. in the file explorer.

At the moment they are the same.

(ignore the colour groupings I have.

Does that make it clearer.

#15

Figured out I was using the wrong element… - I specifically want the colour of the node NOT the circle that forms around the node when you hover over it.

Sorry for muckup

#16

using Obsidian Nord with my own colours but just need the element so I can add colours later.

#17

I think you want this one, then:

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

Use this to see if what you want turns red, then replace the word “Red” with whatever color you wish - variable, name, or hex value.

This code should not affect links outside the graph.

edit - I didn’t see the second question about the file manager links.
edit2 - spelling

#19

Since I went and looked at the class names, I’ll post them here in case anyone else wants to save some clicking - here are all the (posted) class names for graph elements:

.graph-view.color-fill
.graph-view.color-fill-tag (theme-dependent)
.graph-view.color-fill-attachment (theme-dependent)
.graph-view.color-arrow
.graph-view.color-circle
.graph-view.color-line
.graph-view.color-text
.graph-view.color-fill-highlight
.graph-view.color-line-highlight
.graph-view.color-fill-unresolved

The ones that say “theme-dependent” need to have a .theme-dark or .theme-light in front of them, depending on your base choice.
Like so: .theme-light.graph-view.color-fill-tag {color: #FF000;}

2 Likes
#20

Only way I could fix it was create a snippet which seems to have done the trick…

would rather put it in the code but don’t want to break it unless anyone can advise me where it starts and ends with the graph :slight_smile:
end result

image
image927×794 136 KB

#21

@TansyBradshaw - In this case (in my opinion) you should be using a snippet.

When using a community theme (you said you’re using Nord), anytime the author makes a change to the code - any change - the entire theme is updated, and wipes out any changes you’ve made yourself. This is the purpose of snippets - to allow you to make personal theme tweaks without the risk of losing them later.

They’ll also be available to you if you choose to try out other themes later.

1 Like