sindresorhus / generate-github-markdown-css

Generate the CSS for github-markdown-css
MIT License
380 stars 77 forks source link

Background is forced to white|black #16

Open nelson6e65 opened 2 years ago

nelson6e65 commented 2 years ago

Background (--color-canvas-default) is forced to black and white.

To use on editors, like Visual Studio Code, not all themes are black|white.

I know I can publish my own style, but it would be nice to have an extra CSS file published with transparent background in the official CDN. Like:

/* github-markdown-with-transparent-background.css */

:root {
  --color-canvas-default: #00000000;
}

.markdown-body {
  background-color: var(--color-canvas-default);
}

@media (prefers-color-scheme: dark) {
  .markdown-body {
    --color-canvas-default: #00000000;
  }
}

@media (prefers-color-scheme: light) {
  .markdown-body {
    --color-canvas-default: #ffffff00;
  }
}

So we can import it at the end, like:

imagen

nelson6e65 commented 1 year ago

CDN added: https://cdn.jsdelivr.net/gh/elegantech/github-markdown-css@transparent/github-markdown-with-transparent-background.min.css

jd-solanki commented 1 year ago

I'm also facing the same in VSCode.

@nelson6e65 I'm using your CSS, in case if you are removing it assuming no one is using it.

  "markdown.styles": [
    "https://cdn.jsdelivr.net/gh/sindresorhus/github-markdown-css/github-markdown.css",
    "https://cdn.jsdelivr.net/gh/elegantech/github-markdown-css@transparent/github-markdown-with-transparent-background.min.css"
  ],
nelson6e65 commented 1 year ago

I'm using it, too, @jd-solanki. 🤭

But in my case, I'm using github-markdown-dark.min.css, because github-markdown.css only work if you have auto color schema in your editor theme enabled and your SO.

It is available in my transparent branch (https://github.com/elegantech/github-markdown-css/commit/bfa0f5dc8c148e0a04b4ab49964dd7f1951532b2#commitcomment-95419774), but I just added manually, I don't know how to apply it as PR into this repository.

hyrious commented 1 year ago

If it were about to add to this repo, then it must be an option that alters the generating logic, like --background=transparent.

Note that it may not fully solve your original problem. As I know about VSCode, it has defined its own colors about blockquotes and other corners. In the end you will still have to write additional styles to fix it.