Hi everyone!
I wanted to share a couple of simple yet incredibly effective CSS snippets I’ve been using to solve a major visual pain point when working with embedded notes, articles, and images inside an Excalidraw canvas, especially during late-night sessions in dark mode.
The Problem
When you embed an Obsidian note or article frame into a canvas, its bright background severely contrasts with the rest of your dark workspace, causing immediate eye strain.
Standard CSS filters like brightness() applied to the whole leaf often wash out the elements, turning everything into a muddy, unreadable gray.
Solution 1: A Seamless 30% Tint Overlay for Embedded Notes
This snippet uses a pseudo-element overlay with mix-blend-mode: multiply. Instead of changing the elements themselves, it applies a perfectly uniform 30% dimming tint across the entire Excalidraw workspace.
The magic of the multiply blend mode ensures that white embedded frames get beautifully dimmed into the canvas depth, while the text remains sharp and highly legible instead of becoming washed out.
/* Function: Dims white frames and bright backgrounds in Excalidraw to save eyes.
Mechanism: Uses a pointer-transparent overlay with Multiply blend mode.
========================================================================== */
.workspace-leaf:has(.excalidraw) .excalidraw-wrapper::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/*
TINT COLOR: Adjust the last value (0.3) to change darkness.
0.1 = barely visible, 0.5 = heavy dimming.
*/
background: rgba(0, 0, 0, 0.3) !important;
/* INTERACTION: Ensures the veil doesn't block clicks or drawing */
pointer-events: none;
z-index: 999;
/*
BLEND MODE: 'multiply' darkens light areas while keeping text legible.
Alternative: 'darken' or 'burn' for different intensity.
*/
mix-blend-mode: multiply;
}
Solution 2 (Bonus): Smart Dimming for Dark Mode Images in Notes
As a bonus, here is another snippet I use in my vault. It globally dims images in dark mode to prevent flashbangs, but features a *smart exception for Canvas
Before:
After:
/* --------------------------------------------------------------------------
1. ALL REGULAR IMAGES (markdown notes)
-------------------------------------------------------------------------- */
/* Idle state: Adjust initial contrast and brightness here */
.theme-dark img {
/*
contrast(1.15): Values > 1 increase contrast for the initial state
brightness(0.4): Values < 1 make the image darker by default
*/
filter: opacity(1) invert(0.15) brightness(0.4) contrast(1.15);
background-color: rgba(255, 255, 255, 0.5);
mix-blend-mode: hard-lighten;
/* Transition back to idle state (Long delay: 1425ms) */
transition: all 1250ms cubic-bezier(0.1, 0.2, 0.5, 0.2) 1425ms;
}
/* Hover state: Adjust output contrast and brightness here */
.theme-dark img:hover {
background-color: rgba(255, 255, 255, 0.255) !important;
/*
invert(0): Returns colors to original
contrast(0.96): Final contrast on hover (1 is original)
brightness(0.55): Final brightness on hover
*/
filter: opacity(0.9) invert(0) brightness(0.55) contrast(0.96) !important;
/* Hover animation: Fast activation with 1500ms delay */
transition: all 1150ms cubic-bezier(0.3, 0.1, 0.375, 0.250) 1500ms;
}
/* --------------------------------------------------------------------------
2. CANVAS & EXCALIDRAW IMAGES (schemes, diagrams)
-------------------------------------------------------------------------- */
/* Idle: High contrast/low brightness for diagrams */
.theme-dark .canvas-node-container img,
.workspace-leaf:has(.excalidraw) img {
filter: invert(1) brightness(0.80) contrast(0.50);
transition: filter 0.35s ease;
}
/* Hover: Full reveal */
.theme-dark .canvas-node-container img:hover,
.workspace-leaf:has(.excalidraw) img:hover {
filter: none;
}
/* --------------------------------------------------------------------------
3. EMBEDDED IMAGES (internal-embed, image-embed, etc.)
-------------------------------------------------------------------------- */
/* Idle: Adjust base contrast (0.88) and brightness (0.78) for embeds */
.theme-dark .internal-embed img,
.theme-dark .image-embed img,
.theme-dark .markdown-embed img,
.theme-dark .external-embed img,
.theme-dark .file-embed img {
filter: invert(1) brightness(0.78) contrast(0.88);
transition: filter 0.35s ease;
}
/* Hover: Full reveal */
.theme-dark .internal-embed img:hover,
.theme-dark .image-embed img:hover,
.theme-dark .markdown-embed img:hover,
.theme-dark .external-embed img:hover,
.theme-dark .file-embed img:hover {
filter: none;
}
/* --------------------------------------------------------------------------
4. EMBEDS INSIDE CANVAS / EXCALIDRAW — override back to canvas values
-------------------------------------------------------------------------- */
/* Idle override for Canvas specifically */
.theme-dark .canvas-node-container .internal-embed img,
.theme-dark .canvas-node-container .image-embed img,
.theme-dark .canvas-node-container .markdown-embed img {
filter: invert(1) brightness(0.80) contrast(0.90);
}
.theme-dark .canvas-node-container .internal-embed img:hover,
.theme-dark .canvas-node-container .image-embed img:hover,
.theme-dark .canvas-node-container .markdown-embed img:hover {
filter: none;
}
Transition
There you can watch a video with smooth transitions, designed to prevent eye strain when moving the cursor quickly while scrolling.
A Wish for Future Releases 
While these CSS workarounds work perfectly for now, I would be absolutely thrilled if this logic could be included natively in a future release! Ideally, having a native brightness slider/toggle built directly into the plugin settings to adjust this workspace tint overlay on the fly would be an incredible quality-of-life update for night owl power-users.
Hopefully, these snippets can inspire some native implementation logic! 
I also think it would be ideal if this snippet could be integrated into Telegram, WhatsApp, Instagram, and TikTok during the night. 