# Looking for the perfect color inversion CSS for embedded Excalidraw drawing

**URL:** <https://forum.obsidian.md/t/looking-for-the-perfect-color-inversion-css-for-embedded-excalidraw-drawing/73123>\
**Category:** Devs: Theme Design & Custom CSS\
**Tags:** custom-css\
**Created:** [December 15, 2023, 1:14pm UTC](https://forum.obsidian.md/t/looking-for-the-perfect-color-inversion-css-for-embedded-excalidraw-drawing/73123 "2023-12-15T13:14:19Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![totholz5D](https://forum.obsidian.md/user_avatar/forum.obsidian.md/totholz5d/32/53567_2.png) [@totholz5D](https://forum.obsidian.md/u/totholz5D)\
**Post date:** [December 15, 2023, 1:14pm UTC](https://forum.obsidian.md/t/looking-for-the-perfect-color-inversion-css-for-embedded-excalidraw-drawing/73123/1 "2023-12-15T13:14:19Z")

</div>

### What I’m trying to do

when embedding a excalidraw drawing into a note, I would like to invert only the black and the white of the drawing and leave the other colors as they are.

### **What I’ve managed to do:**

using the invert filter and the hue rotate functions I managed to write a CSS that does an inversion as described [here](https://forum.obsidian.md/t/auto-adaptive-images-for-dark-light-theme/13494) (also available in the minimal theme).

```auto
.theme-dark .excalidraw-svg {
    filter: invert(1) hue-rotate(180deg) !important;
}

```

Which works great for black and white drawing.

 ![inversion B&W](https://forum.obsidian.md/uploads/default/original/3X/8/c/8cadf983ad9e0b0a1729baabebfc98a72ec95da3.png)

But I’m not really satisfied with the hue inversion when color is involved…

 ![inversion bof](https://forum.obsidian.md/uploads/default/original/3X/e/0/e07b8fca9fdd15547d1b493794d5eb0eef0853df.png)

What I would like to do is keep the color as they are and invert only black with white and white with black

 ![inversion nice](https://forum.obsidian.md/uploads/default/original/3X/a/f/afe4f3384fd94c62de797f5da221be99d6302310.png)

I’m kind of new to CSS, and I’m wondering is this would be possible?  
As the excalidraw objects are individually described in the markdown file, is there a way to do some kind of conditional CSS that would invert only the black and the white when it encounters objects of these colors?

---

<div class="post-metadata">

**Author:** ![totholz5D](https://forum.obsidian.md/user_avatar/forum.obsidian.md/totholz5d/32/53567_2.png) [@totholz5D](https://forum.obsidian.md/u/totholz5D)\
**Post date:** [December 16, 2023, 12:33pm UTC](https://forum.obsidian.md/t/looking-for-the-perfect-color-inversion-css-for-embedded-excalidraw-drawing/73123/2 "2023-12-16T12:33:34Z")

</div>

Or wondering if another possibility would be to change the excalidraw code to name white and black as variables which values I would set in function of the color scheme (light/dark) when displaying an embedded drawing?

---

<div class="post-metadata">

**Author:** ![gino\_m](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/g/3ec8ea/32.png) [@gino\_m](https://forum.obsidian.md/u/gino_m)\
**Post date:** [December 23, 2023, 4:37pm UTC](https://forum.obsidian.md/t/looking-for-the-perfect-color-inversion-css-for-embedded-excalidraw-drawing/73123/3 "2023-12-23T16:37:15Z")

</div>

You can try [this](https://forum.obsidian.md/t/auto-adaptive-images-for-dark-light-theme/13494/7) with the finished product.

---

<div class="post-metadata">

**Author:** ![system](https://forum.obsidian.md/uploads/default/original/3X/b/e/bec35fbd23ab28909bb6bfe62cb32eb82dd34019.png) [@system](https://forum.obsidian.md/u/system)\
**Post date:** [March 22, 2024, 4:38pm UTC](https://forum.obsidian.md/t/looking-for-the-perfect-color-inversion-css-for-embedded-excalidraw-drawing/73123/4 "2024-03-22T16:38:08Z")

</div>

Closed on March 22, 2024, 4:38pm UTC

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.