feat: add Auto/Light/Dark theme support (fixes #1702)#2496
Open
kushmunjal1kmkm wants to merge 3 commits into
Open
feat: add Auto/Light/Dark theme support (fixes #1702)#2496kushmunjal1kmkm wants to merge 3 commits into
kushmunjal1kmkm wants to merge 3 commits into
Conversation
This file contains hidden or 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
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.
Fixes #1702
Summary
This adds a three-way theme setting — Auto, Light, and Dark — to ipfs-webui.
Auto follows the OS-level
prefers-color-schemeand updates live if the OSsetting changes; Light/Dark are manual overrides, persisted across sessions.
The toggle is available in two places: a compact icon in the top bar for
quick switching, and a full selector on the Settings page.
Why I approached it this way
I know dark mode was attempted once before in #2322 and reverted in #2339
after several screens/modals were found unreadable post-merge. I read through
that history before starting, and tried to design around the specific gap
that caused the revert — rather than hand-editing individual components, I
introduced CSS custom properties for color (
--element-bg,--text,--border-color, etc., swapped per theme via a[data-theme="dark"]selector) so shared utility classes and components get themed centrally, and
went through every screen and every modal/dropdown/menu I could find, not
just the main page layouts.
What changed
ThemeContext/ThemeProvider(src/contexts/theme-context.js) — tracksthe active theme, listens for OS-level scheme changes when set to Auto,
persists the user's explicit choice to localStorage.
TopBarThemeToggleandThemeSelectorcomponents for switching the themefrom the top bar and from Settings respectively.
FileImportStatus, Breadcrumbs, PublishModal, modal.tsx, App.js header,
NodeBandwidthChart, Speedometer, WorldMap] in favor of theme-aware CSS
classes/custom properties.
themeDescriptioni18n key instead of translated text.static map image for dark mode rather than shipping a second image asset.
Explicitly out of scope for this PR
The Explore/DAG page's card styling is rendered by the separate
ipld-explorer-componentspackage and needs its own companion PR there(same pattern as the original #2322 effort) — I'm treating that as a
follow-up rather than bundling it in here, since it's a different repo with
its own release cycle.
Testing
npm run lint— passing as of <83d9e2b>npm run test:unit— passing as of <83d9e2b>npm run test:e2e— passing as of <83d9e2b>Diagnostics) plus modals/dropdowns/selection states in both Light and
Dark, including toggling OS-level dark mode live for Auto
package.json/package-lock.jsonhave no unrelateddependency changes
Open questions / things I'd appreciate a second pair of eyes on
backgroundprop I'mpassing into
@tableflip/react-dropdownis officially supported by thatlibrary vs. just being ignored — I confirmed via devtools that it renders
correctly, but wanted to flag the assumption in case there's a cleaner way."]
find it, especially given this feature's history.]
Given the history on this issue, I'd rather get feedback early and iterate
than have this merge and need another revert — happy to adjust scope,
approach, or split this into smaller PRs if that's easier to review.