Obsidian offers some CSS customization of the graph via a bridge. I used the same idea and extended the customization possibilities.

Since this may cause performance drops, the setting is available in the Performances section.

Customizable elements

Texts styles

You can modify some properties for text displayed in the graph view, by using one of the following selector:

• .graph-view.node-text
• .graph-view.link-text
• .graph-view.folder

The supported CSS modifications for any of these classes are the following:

font-family: ;
font-size: 14px;      /* needs to have the "px" unit */
font-style: normal;   /* normal | italic | oblique */
font-variant: normal; /* normal | small-caps */
font-weight: normal;  /* normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 */
letter-spacing: 0px;  /* needs to have the "px" unit */
text-shadow: ;        /* see note about text shadow below */
-webkit-text-stroke-width: 0px;
-webkit-text-stroke-color: ;    /* see note about text stroke below */

Color

The color property can be set for any of the text element. The only difference is that it is already supported for nodes names via the core plugin, hence you should use the core selector:

.graph-view.color-text {
    color: var(--graph-text);
}

For links or folder names, use the classes added by the plugin:

.graph-view.link-text,
.graph-view.folder {
    color: red; /* you can't use CSS variables defined outside of the snippet here */
}

Link labels

On top of the styling of the text itself, borders and background can be added to link labels:

.graph-view.link-text {
    background-color: ;
    border-color: ;
    border-radius: 0px;  /* needs to have the "px" unit, only supports one value */
    border-width: 0px;   /* needs to have the "px" unit */
    padding: 0px 0px 0px 0px; /* needs to have the "px" unit, supports 1, 2, 3, or 4 values */
}

Folders

On top of the styling of the text itself, some other properties can be modified for the folder elements:

.graph-view.folder {
    text-align: center;   /* center | left | right */
    border-radius: 50px;  /* needs to have the "px" unit, only supports one value */
    border-width: 2px;    /* needs to have the "px" unit */
    opacity: 0.03;
    padding: 0px 0px 0px 0px; /* needs to have the "px" unit, supports 1, 2, 3, or 4 values */
}

Targeting specific elements

Each node and folder can be specifically targeted with CSS with the data-path attribute, which contains the full path of the file/folder.

For example:

• .graph-view.node-text[data-path$=".jpg"] will target all JPG attachments labels
• .graph-view:is(.color-text, .node-text)[data-path^="ImportantStuff/"] will target nodes inside the folder ImportantStuff
• .graph-view.folder[data-path="School/" i] will target the visual box for the folders School, case-insensitive

In a similar way, each link can be targeted with the data-source and data-target attributes, set respectively to the source path and target path.

See documentation about attribute selectors for more info on how to use the selectors.

You can also use the is-current class to style the style of the current node in the local graph:

.graph-view.color-text.is-current {
    color: red;
}

.graph-view.node-text.is-current {
    font-variant: small-caps;
}

Text shadow

Offsets are not supported for the text shadow. Which means that the following are equivalent:

.graph-view.link-text {
    text-shadow: 0px 0px 10px red;
}

.graph-view.link-text {
    text-shadow: -30px 20px 10px red;
}

Current color

In CSS, the following could be written:

.graph-view.node-text {
    text-shadow: 0 0 15px currentColor;
}

and the text shadow would use the same color as the current color set for the text. Unfortunately, this is not suported with the CSS Bridge.

To achieve the same effect, you can use the variable --text-shadow-current-color for that, which will allow to use the same color as the text and therefore create a glowing effect. It suppoets the values true or currentColor (note that is not case-sensitive, so TRUE and currentcolor will work too)

.graph-view.color-text[data-path*="Ruth Shaw"] {
    color: cyan;
}

.graph-view.color-text[data-path*="Jensen Cole"] {
    color: yellow;
}

.graph-view.color-text[data-path*="Amadeus"] {
    color: fuchsia;
}

.graph-view.node-text {
    text-shadow: 0 0 15px rgba(0, 0, 0, 1);
    --text-shadow-current-color: true;
}

When using this variable, the actual color of the text-shadow property doesn't matter anymore except for its alpha component. So the RGB channels can be set to whatever as long as it's a valid syntax, and the only important value is the fourth one.

.graph-view.node-text {
    text-shadow: 0 0 15px rgba(0, 0, 0, 0.5); /* Alpha set to 0.5 */
    --text-shadow-current-color: true;
}

Text stroke

You can use the -webkit-text-stroke CSS property to set a stroke around the letters:

.graph-view.link-text {
    -webkit-text-stroke-width: 8px;
    -webkit-text-stroke-color: red;
}

Note that if no color is set, the resolved color will be black:

.graph-view.link-text {
    -webkit-text-stroke-width: 8px;
}

In order to use the background color of the graph view, the color has to be set to transparent:

.graph-view.link-text {
    -webkit-text-stroke-width: 8px;
    -webkit-text-stroke-color: transparent;
}

⚠️ Restrictions

• For performance reasons, the extended options described in this wiki page must be defined in one unique CSS snippet (it needs to be enabled) that you can specify in the settings. Make sure you don't include CSS rules that are not needed for the graph view as they might slow down the app.
• The styling is computed isolated from the rest of the app. This means that you don't have access to all the css custom properties (also known as variables) within the extended graph view customization (the core customization will work just fine)

Examples

For example, let's name extended-graph.css the snippet used to customize the graph view through this plugin.

The following rules need to be inside:

.graph-view.node-text {
    font-style: italic;
}

/* Even if .color-text is a native class, .is-current is not */
.graph-view.color-text.is-current {
    color: red;
}

.graph-view.folder {
    text-align: left;
    border-radius: 0px;
    padding: 10px;
}

.graph-view.folder[data-path*="Important"] {
    font-weight: bold;
}

.graph-view.color-text[data-path*="Important"] {
    /* Even if the color-text class is part of the core feature, the data-path attribute is not */
    color: red;
}

And the following can be kept out of the snippet to reduce computation cost:

/* Related to the graph but natively supported, no need to include it in extended-graph.css */
.graph-view.color-text {
    color: var(--color-accent);
}

/* Unrelated to the graph view */
.markdown-preview-view {
    background-color: pink;
}