5 ms·

Looks pretty cool. I think it's great that you support light/dark mode. FWIWI, I'm also a huge fan of Excalidraw. I wanted to ask you: is there's a reason you

by afc 6mo ago

Looks pretty cool. I think it's great that you support light/dark mode. FWIWI, I'm also a huge fan of Excalidraw. I wanted to ask you: is there's a reason you use a separate svg file for each (light/dark) mode? A single SVG file using CSS can change it's own colors based on the user's preference. I have an example here: http://alejo.ch/3jj http://alejo.ch/3jj - the 3 plots should honor your mode (I put the generator code here: https://github.com/alefore/mini_svg https://github.com/alefore/mini_svg) Just figure I'd ask. If you have a good reason for using separate files, I'd love to hear it (because it probably would also apply to what I'm doing). :)

mlysk 6mo ago
My goal is that it renders on GitHub as well as on my blog. GitHub doesn’t support css based dark mode afaik
- tasuki 6mo ago
  Ah, you have a button for the toggle! Did you know that you can conform to the user's light/dark preference with CSS? Like this: :root { --varname: #FFE; } @media (prefers-color-scheme: dark) { :root { --varname: #022; } } Edit: To expand on this, I dislike light/dark toggles. If I have dark mode on, seeing a bright screen and having to search for a toggle is jarring. Just show me the colours according to my preference!
  - auraham 6mo ago
    How can you detect the system preferences in the browser?
    - tasuki 6mo ago
      I answered that in the comment you're replying to. If you want a more authoritative answer: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-color-scheme https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/A...
- pinjasaur 6mo ago
  Last I checked on this the workaround is embedding CSS inside an SVG, here's a demo: https://github.com/sindresorhus/css-in-readme-like-wat https://github.com/sindresorhus/css-in-readme-like-wat I used this on a personal project to add a README logo that is dark mode friendly: https://paul.af/github-readme-dark-mode https://paul.af/github-readme-dark-mode

by afc 6mo ago

mlysk 6mo ago

My goal is that it renders on GitHub as well as on my blog. GitHub doesn’t support css based dark mode afaik

tasuki 6mo ago
Ah, you have a button for the toggle! Did you know that you can conform to the user's light/dark preference with CSS? Like this: :root { --varname: #FFE; } @media (prefers-color-scheme: dark) { :root { --varname: #022; } } Edit: To expand on this, I dislike light/dark toggles. If I have dark mode on, seeing a bright screen and having to search for a toggle is jarring. Just show me the colours according to my preference!
- auraham 6mo ago
  How can you detect the system preferences in the browser?
  - tasuki 6mo ago
    I answered that in the comment you're replying to. If you want a more authoritative answer: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-color-scheme https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/A...
pinjasaur 6mo ago
Last I checked on this the workaround is embedding CSS inside an SVG, here's a demo: https://github.com/sindresorhus/css-in-readme-like-wat https://github.com/sindresorhus/css-in-readme-like-wat I used this on a personal project to add a README logo that is dark mode friendly: https://paul.af/github-readme-dark-mode https://paul.af/github-readme-dark-mode