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

This is still in Beta, and may cause performance drops. You can disable it in the settings, in the Beta section.

Please, if you try this feature and encounter any issue, report it on GitHub.

Customizable elements

Nodes names

The following rules are supported to customize node labels with the selector .graph-view.node-text:

.graph-view.node-text {
    font-family: ;
    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 */
}

For the color of the text, use the core selector:

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

Folders

You can also customize folders with the following selector (.graph-view.folder) and rules:

.graph-view.folder {
    font-family: ;
    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 */
    font-size: 14px;      /* needs to have the "px" unit */
    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

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

⚠️ 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;
}

.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;
}