How to make included canvas notes transparent and inverted?

[MrOctocat]

I currently have a dark theme for my Trilium Notes interface. When making a canvas note, the background is dark and the drawing colours are such that there is a good contrast with the dark background. When I include these canvas notes in text notes, however, the background is made white and light foreground colours are made dark, which is not aesthetic and doesn't fit in well with the rest of the notes.

How to make the background of included canvas notes transparent, and make the foreground colours adapt to Trilium's dark theme, like they do in the Excalidraw editor?

[dosubot[bot]]

Hi @MrOctocat! I'm Dosu and I’m helping the Trilium team.

This is a known issue with canvas notes in dark mode. The root cause is CSS filters (invert(80%) hue-rotate(180deg)) applied to the Excalidraw canvas in dark themes, which affects how embedded canvas notes appear.

CSS Workaround:

1. Create a new code note (type: CSS) and add the label #appCss
2. Add this CSS:

   .excalidraw.theme--dark { 
       --theme-filter: none !important; 
   }

3. Reload the frontend with Ctrl+Shift+R

This disables the dark theme filter that causes the color inversion issue. However, maintainers have noted this workaround may not be fully reliable.

One limitation to be aware of: when canvas notes are embedded in text notes, they render as static SVG images rather than interactive components, which limits theming control compared to the editor view.

There's also a related issue where custom canvas background colors don't persist properly across restarts, which may compound the problem you're experiencing.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[MrOctocat]

@dosu I'm adding a CSS note with the #appCss attribute and reloading the frontend, but my included canvas notes still have a white background.

[dosubot[bot]]

The .excalidraw.theme--dark CSS won't work for embedded canvas notes because they're rendered as <img> elements, not as live Excalidraw components. That selector only targets the editor view.

To style the container background of embedded canvas notes, try this CSS in your #appCss note instead:

/* Make the include-note container transparent for canvas notes */
.include-note-content.type-canvas {
  background-color: transparent !important;
}

.include-note:has(.type-canvas) {
  background-color: transparent !important;
}

Then reload with Ctrl+Shift+R.

Important caveat: Since the canvas note itself is served as an image through the API, if the white background is baked into the image data (rather than just the container), this CSS approach may not fully solve the issue. The underlying problem is that Trilium's canvas-to-image rendering may not preserve transparency settings from the Excalidraw editor.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[MrOctocat]

@dosu Indeed, the white background remains, and the colours are still not inverted to adapt to Trilium's dark theme. I did notice that the image export options in Excalidraw allow dark theme and backgroundless options, so there must be a way to make the automatic SVG conversion abide by these settings as well.

[dosubot[bot]]

You're right that Excalidraw supports those export options. The issue is that Trilium's exportToSvg call currently doesn't pass dark theme or transparency parameters—it just uses the basic appState without any export-specific overrides.

This is a known limitation and there are related issues being tracked:

• #5708 - Dark theme causing muted colors on embedded canvas notes (maintainers are working on a fix and tracking an upstream Excalidraw issue)
• #8325 - Canvas background color not persisting

Currently there's no CSS-only workaround since the white background is baked into the exported SVG file stored as an attachment.

A proper fix would require modifying the persistence.ts file to pass additional export options (like transparent background or dark theme settings) to the exportToSvg function. This would be a code change rather than a configuration option. You might consider commenting on #5708 with your specific use case to help inform the fix.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}