Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Transparent Background setting ignored in embedded png #108

Open
christsven opened this issue Nov 2, 2023 · 4 comments
Open

Transparent Background setting ignored in embedded png #108

christsven opened this issue Nov 2, 2023 · 4 comments

Comments

@christsven
Copy link

christsven commented Nov 2, 2023

Hello,

I am trying to use .excalidraw.png files in a markdown file with transparent backgrounds, but the auto export seems to ignore the option. Changing the other options works just fine, and the transparency option worked exactly the first time and after that it sadly kept the dark (or light) background. I couldn't reproduce the first successful export either, unfortunately, so I can't say why it did or what changed. It doesn't work with light or dark mode enabled.

Reinstalling the extension also didn't fix the problem.
I am using the v3.6.1 of this extension.
Visual Studio Code v1.83.1.

Just for reference, here is my settings.json:

{
    "excalidraw.image": {
      "exportScale": 1,
      "exportWithBackground": false,
      "exportWithDarkMode": true
    }
  }
@ivansimunic
Copy link

Facing the same problem, but on .excalidraw.svg files.

@graf-semmel
Copy link

graf-semmel commented Feb 20, 2024

I ran into the same issue but figured that it could be caused by VSCode itself or another extension. I am using Marp for my slides which has editor preview.

The settings

    "excalidraw.image": {
        "exportScale": 2,
        "exportWithBackground": true,
        "exportWithDarkMode": true
    }

The markdown

---
marp: true
theme: default
backgroundColor: yellow
class:
  - lead
  - invert
---

# Slide 1

![auto](test.excalidraw.svg)

The rendering result in VSCode
image

Marp allows to change the rendering styles directly through CSS.

---
marp: true
theme: default
backgroundColor: yellow
class:
  - lead
  - invert
---

<style>
img { 
  background: transparent;
}
</style>

# Slide 1

![auto](test.excalidraw.svg)

Now the image BG is transparent.
image

@subnetz
Copy link

subnetz commented Mar 26, 2024

I have the same problem.
The settings in settings.json (either workspace settings or user settings) gets ignored.

With the settings

  "excalidraw.theme": "dark",
  "excalidraw.image": {
    "exportScale": 1,
    "exportWithBackground": false,
    "exportWithDarkMode": true
  }

it gets exported with a dark background

@arnaudsylvestre
Copy link

A simple workaround : use exportBackground instead of exportWithBackground in your settings.json

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants