Canvas cssclasses and :has pseudo-class

Use case or problem

Impact canvas node colours using css :has pseudo-class.

When attempting to add a css snippet that changes the colour of canvas nodes based on cssclasses value within the nodes properties, I am only able to use :has to change the colour while zoomed in beyond the threshold before the placeholder class becomes active.

When zoomed out the placeholder colour stays the same as whatever color-1, color-2 etc class is active.

At the canvas level, the cssclass added within the note is available at the markdown-preview-view level, but when we zoom out, it is replaced with canvas-node-placeholder. This means .canvas-node-placeholder::after can’t inherit anything set in this way.

Proposed solution

Also include cssclasses value set within file properties somewhere that .canvas-node-placeholder::after can inherit and be influenced using :has in css snippits.

Current workaround (optional)

To work around this I created custom colour classes and applied them dynamically to the appropriate canvas nodes with javascript + dataview depending on the values of a property in each node, this is applied everytime the canvas in question is opened.

Allowing .canvas-node-placeholder::after access to the files cssclasses simplifies this significantly.

Did you try the plugin Canvas CSS classes ?

I have the same problem.
Would you mind sharing your workaround (for beginners)?

I do not understand css or javascript, but got along copypasting stuff - up to now :wink: