Access Obsidian CSS variables in plugin code

Developers: Plugin & API
1

I want to access values of some Obsidian’s CSS variables (e.g., --background-primary or --text-normal) inside my plugin code (JS/TS). How could I do so?

Thank you in advance for help!

2

How do you want to use these? Do you want your generated elements to make use of these variables? Or do you want to change the values of these variables?

3

I just want to use the styles - no need to change the values.

Specifically, the code is intended to generate an SVG file using information from some notes, and I want my SVG elements to have the same style as is currently set in Obsidian (e.g., the same background and text colors).

4

I did not manage to figure out a direct way to access Obsidian CSS variables inside JS/TS code. For now, I settled down with the following workaround:

const bodyEl = document.querySelector('body');
const exCssVar = getComputedStyle(bodyEl).getPropertyValue('--background-primary');

It worked for all the CSS variables I needed thus far. :slight_smile: