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

Resolve correct image depending on active theme #481

Closed
4 tasks done
Periecle opened this issue Jan 9, 2022 · 3 comments
Closed
4 tasks done

Resolve correct image depending on active theme #481

Periecle opened this issue Jan 9, 2022 · 3 comments
Labels
enhancement New feature or request

Comments

@Periecle
Copy link
Contributor

Periecle commented Jan 9, 2022

Checklist

Is your feature request related to a problem? Please describe

I have a lot of images that look great on the light theme, but on the dark theme look awful or vice versa.

Describe the solution you'd like

It would be great to specify different images depending on a currently selected theme.

If the theme for the image is unspecified, then behavior remains unchanged. Otherwise, the correct image should be resolved and rendered.

Describe alternatives you've considered

Currently, I don't know alternative solutions.

Additional context

image
image

@Periecle Periecle added the enhancement New feature or request label Jan 9, 2022
@digitigradeit
Copy link

Head over to the live mermaid editor

https://mermaid-js.github.io/mermaid-live-editor/edit

and you should be able to re-create these diagrams using mermaid. if you use the built-in mermaid refactoring done by chirpy, it will auto-switch from dark/light since mermaid is svg base and the mode can be passed down before the svg is rendered.

in my own testing, using a plugin like Jekyll-spaceship which has its own mermaid processor and then generates a static image that's then included before the post is converted to html (by default) , it does not have the same auto-switch method for dark/light mode.

how many is a lot of images? I am mot sure if it makes sense to re-create them by hand or not. what did you use to generate the images the first time?

@cotes2020
Copy link
Owner

cotes2020 commented Jan 24, 2022

There are currently three methods:

  1. The easiest way is to add a black background color to the image suitable for dark mode, and vice versa.

  2. As @digitigradeit mentioned, redraw the images with Mermaid

  3. Redesign the colors of images to make them look great in both dark and light modes.

    For instance:

@Periecle
Copy link
Contributor Author

Ok, that makes sense. Thank you

sanjidnet pushed a commit to sanjidnet/sanjidnet.github.io that referenced this issue Jan 9, 2023
linkliu pushed a commit to linkliu/game-tech-post-old that referenced this issue Jan 9, 2023
Gaur4vGaur added a commit to Gaur4vGaur/Gaur4vGaur.github.io that referenced this issue Feb 3, 2023
author Gaurav Gaur <Gaur4vGaur@users.noreply.github.com> 1675074395 +0000
committer Gaurav Gaur <Gaur4vGaur@users.noreply.github.com> 1675445316 +0000

parent 6c35647
author Gaurav Gaur <Gaur4vGaur@users.noreply.github.com> 1675074395 +0000
committer Gaurav Gaur <Gaur4vGaur@users.noreply.github.com> 1675445269 +0000

parent 6c35647
author Gaurav Gaur <Gaur4vGaur@users.noreply.github.com> 1675074395 +0000
committer Gaurav Gaur <Gaur4vGaur@users.noreply.github.com> 1675445201 +0000

parent 6c35647
author Gaurav Gaur <Gaur4vGaur@users.noreply.github.com> 1675074395 +0000
committer Gaurav Gaur <Gaur4vGaur@users.noreply.github.com> 1675445170 +0000

parent 6c35647
author Gaurav Gaur <Gaur4vGaur@users.noreply.github.com> 1675074395 +0000
committer Gaurav Gaur <Gaur4vGaur@users.noreply.github.com> 1675445041 +0000

progress with pipes and filters pattern

feat: add shimmer background when image loads

feat: set preview image ratio to 1.91 : 1

fix: `og:image` will be incorrect if the image uses a cross-domain URL

feat: support dark and light mode images (cotes2020#481)

refactor: unify the border radius of blocks

scope: code blocks, prompts, images, and videos

feat: add `rel="me"` to Mastodon sidebar contact links for verification (cotes2020#807)

This will enable verification with Mastodon by including the `rel="me"` attribute.
https://docs.joinmastodon.org/user/profile/#verification

Co-authored-by: Cotes Chung <11371340+cotes2020@users.noreply.github.com>

chore: hide blur edge of LQIP images

chore(tools): checkout latest tag on initialization

chore(editorconfig): keep trailing spaces in Markdown (cotes2020#830)

feat(i18n): add Czech language (cotes2020#833)

fix: correct encoding of spaces in share URLs (cotes2020#835)

Resolves cotes2020#835

fix: post's image would cover the PWA update alert

feat(i18n): add Finnish translations (cotes2020#843)

chore(bundler): deprecate `:install_if` option in Gemfile

feat(i18n): add Italian translation (cotes2020#850)

fix:  copy command line incomplete(`.gp` part)

feat(i18n): add Arabic translation (cotes2020#857)

chore(deps): liquid(v4.0.4) is compatible with ruby 3.2 (cotes2020#854)

See: jekyll/jekyll#9231

chore: ignore gem lock file in user-end

refactor: optimize tab cursor position calculation

fix: prompt with nested blockquotes renders incorrectly (cotes2020#846)

Resolves cotes2020#846

chore(release): 5.5.0

fix: the icon position of the prompts in the list is incorrect

chore(release): 5.5.1
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

3 participants