1318 investigate how to switch images between light and dark mode #1326
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
View your branch deployment here: https://mi6.github.io/ic-design-system-githubpages/branches/1318-investigate-how-to-switch-images-between-light-and-dark-mode |
Image changes based on theme for the component gallery section 1318
gd2910
force-pushed
the
1318-investigate-how-to-switch-images-between-light-and-dark-mode
branch
from
c12222f to
62d70f9
Compare
image change based on theme in the component guidance section 1318
gd2910
force-pushed
the
1318-investigate-how-to-switch-images-between-light-and-dark-mode
branch
from
62d70f9 to
f453284
Compare
SVG change based on theme in the Home Page section 1318
unrelated fixes after prettier sweep
gd2910
force-pushed
the
1318-investigate-how-to-switch-images-between-light-and-dark-mode
branch
from
f453284 to
c86e2c7
Compare
This was referenced Feb 11, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
EXAMPLE PR - DO NOT MERGE
Summary of the changes
Three commits give examples on how to change images (.svg, .png, .jpg) based on the currently used
theme.HomePage-uses React lazy and suspense to serve the SVG,Dynamically rendering SVG's for the homepage, this does not decrease the bundle size, see internal notes.gatsby-plugin-imagedoes not support SVG at this timeComponentGallery- dynamically serves the correct image by changing thesrcvalueComponentGuidance- in theMDXusing a<DoDontCaution />component it now takes an array of two strings to the light and dark image, the<DoDontCaution />handles the image logic based on theme usinggatsby-plugin-imageTEST THE CHANGES
HomePage'Developer' image changes on theme switchRelated issue
#1318