Theme CSS

Learn how to customize the appearance of the Obsidian interface by building your own theme. When you're ready, you can share your theme with the Obsidian community by submitting it. For an in-depth guide on how to submit your plugin, refer to How to add your theme to the community theme store on the Obsidian Hub. Read more here.

## Page Inspection

Obsidian uses many application-specific classes to label display elements. How can you determine what these are to create your own styling?

This is where the page inspector tool is invaluable. To open the page inspector, enter, `Ctrl + Shift + i` and you will see a screen similar to this.

To find details of a specific element on the page,

* Choose the ‘select’ icon on the menu
* Select the item of interest in the note

The relevant code in the inspector will be highlighted,

We can see that the ‘Page Inspection’ text above has two CSS classes assigned, cm-header and cm-header-1 applied.

At the far right of the inspector, the CSS files area is displayed. The contents of the CSS can be changed interactively to help you test your CSS.

## Graph view

Since the graph is rendered using `<canvas>` and WebGL, CSS is unable to affect things like nodes and links. To customize graph view, we have provided a bridge to use CSS colors for customizing WebGL.

Since version 0.12.12, the selected / current focused file can be highlighted in a different color. This can be configured through the css class `.graph-view.color-fill-focused`, or disabled if you set the color to `transparent`.

### The following CSS classes are supported:

```
.graph-view.color-fill
.graph-view.color-fill-focused (use transparent to disable)
.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

```

\* theme-dependent means you may have to add `.theme-dark` or `.theme-light` to style it for different themes. See Defaults for explanation.

### The following CSS rules are supported:

```
 .graph-view.color-class {
	/* Supports all CSS color directives, like #HEX, rgb and rgba */
	color:   #FFF;
	color:   #FFFFFF;
	color:   rgb(0, 0, 0);
	color:   rgba(0, 0, 0, 1);
	/* Opacity (similar to rgba) will make the color transparent */
	opacity: 0.5;
}

```

### Defaults

These CSS rules are the ones Obsidian uses by default. You may override any of them using an identical or more specific CSS rule. This applies especially to `.color-fill-tag` and `.color-fill-attachment` As a last resort, add `!important` to the end of your rule.

```
.graph-view.color-fill,
.theme-dark .graph-view.color-fill-tag,
.theme-light .graph-view.color-fill-tag,
.theme-dark .graph-view.color-fill-attachment,
.theme-light .graph-view.color-fill-attachment,
.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 {}

```

Template:References

* https://patrickberry.medium.com/working-with-css-in-obsidian-f9c573ff0065