Have light/dark variant of the backdrop in contrast to snippet background

[jgierer12]

Often, the gray background may not be ideal, such as when embedding into a blog with a white background. Allowing the user to set a custom background would solve this problem and make the output even more individualizable!

[WilliamDASILVA]

Indeed, I have seen similar screenshots of code with the same shadow on multiple blog posts that is embedded perfectly with the rest of the page.

Should be great to be able to change those parameter:

• The background color
• The shadow blur, distance, color
• The padding
• The border radius

[cfjedimaster]

While changing would be nice, I'd also be happy with just plain transparent. :)

[octref]

Yeah, currently it does not handle light theme well.
However I like prettier's approach: have sane defaults and offer setting only when it's absolutely necessary to.
I think it's better to have Polacode reading the snippet background color, and figure out a contrasting background color automatically.

[jgierer12]

I think there's a misunderstanding, my issue is not about light or dark themes but the grey background in the margins of the image. For example, the following image would blend in much more seamlessly if the background was white or transparent rather than grey:

[cfjedimaster]

Exactly as he said. Frankly I'm not even concerned about the colors inside the black portion, it's the gray border. Seeing it here on GitHub is a perfect example. If it was transparent, it could work anywhere. Thank you @jgierer12.

[octref]

I get what you are asking for. I was calling them snippet background (read from your theme) and background (set to #eee now). I'll just call the outer one backdrop.

[WilliamDASILVA]

Was about to say the same thing.
Tried to make a PR but didn't achieve to pass the settings parameters from extension.js to index.js; neither to access to the document object from extension.js.

const settings = vscode.workspace.getConfiguration('polacode');

In package.json:

"contributes": {
    "configuration": {
      "title": "Polacode configuration",
      "type": "object",
      "properties": {
        "polacode.backgroundColor": {
          "type": "string",
          "default": "transparent",
          "description": "A CSS value for the background color"
        },
        "polacode.outerPadding": {
          "type": "number",
          "default": 22,
          "description": "Outer padding in pixels"
        },
        "polacode.borderRadius": {
          "type": "number",
          "default": 5,
          "description": "Editor border radius in pixels"
        }
      }
    },
    "commands": [
      {
        "command": "polacode.activate",
        "title": "Polacode 📸"
      }
    ]
  },

Here is the result with the background-color: transparent; and a bigger padding to make it work well with the shadow (not being cropped)

[timpulver]

Using a transparent background is much better than an opaque one, because it looks good everywhere.

[octref]

I decided to have no backdrop for snippet with white background.

GitHub decides to give them white backdrop

Whereas Twitter gives them black:

Let's see how it goes.

Don't suggest adding options to me. I hate options.