How to adapt theme for excalidraw/canvas note.

[Nriver]

I had a hard time to adapting my Trilium theme for the new excalidraw/canvas note. I tried to change the background color with css and it doesn't work, it seems color is controlled by js codes.

I try to mimic the way that excalidraw create its dark theme. Use a css filter to convert color from light to dark (plus some changes in css). So I think we can use a similar filter to convert to the color we need.

Then I use this filter generator to calculate the filter value. For example, my theme's main color is #C8C2AA. The generator give me this. (Please note that the result may vary, as the calculation is to find a color that close to target color, there will be a random loss.)

invert(94%) sepia(7%) saturate(651%) hue-rotate(7deg) brightness(85%) contrast(85%);

However, excalidraw uses white as base color while the calculator use black. So we need to use the inversed color. Just use 100% minus the invert value, be like this.

invert(6%) sepia(7%) saturate(651%) hue-rotate(7deg) brightness(85%) contrast(85%);

Then the css will be something like this.

.excalidraw {
    filter: invert(6%) sepia(7%) saturate(651%) hue-rotate(7deg) brightness(85%) contrast(85%);
}

The disadvantage of this method is that all the colors are filtered by css. So it't difficult to fine tune other color styles, as their colors are different from their hex values due to the filter.

I am a noob in css, if you have more intuitive and easy method or some magic tool that can help to adapt a custom theme for excalidraw in Trilium Notes, please share. 👍

[zadam]

AFAIK, tweaking the CSS filter is the only way, it's "cheap" and easy (Trilium used the same approach in early versions BTW), but limited. I've read some discussions suggesting that there might be a different theming mechanisms coming in the future.