Dark mode toggle implementation #683
Conversation
valscion
left a comment
valscion
left a comment
There was a problem hiding this comment.
This looks like a good start, thanks!
Could we default the dark mode value to what the system has decided and then allow the user to configure something else? That is, the initial value would be based on what prefers-color-scheme media query says: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-color-scheme
And once done, let's also add a changelog entry.
Bonus points if you can figure out some way of having a test for this — I don't think we have any UI-level tests so it's also fine to leave testing out of this PR.
client/store.js
Outdated
| @observable defaultSize; | ||
| @observable selectedSize; | ||
| @observable showConcatenatedModulesContent = (localStorage.getItem('showConcatenatedModulesContent') === true); | ||
| @observable darkMode = (localStorage.getItem('darkMode') === true); |
There was a problem hiding this comment.
The browser can disable access to localStorage in some environments so we should protect against getItem or setItem throwing an error. We can just fail silently and assume that dark mode is unset and thus use the system value as the default.
|
Thanks for the review! I'll update the implementation to: will push shortly.. |
- Fix PR link to point to webpack/webpack-bundle-analyzer - Add proper GitHub profile attribution @theEquinoxDev - Follow established changelog format consistency
|
Thanks for the feedback. I have updated the implementation to: Please let me know if anything else should be adjusted. Thanks for the opportunity. |
valscion
left a comment
valscion
left a comment
There was a problem hiding this comment.
Thanks! I bet people will like this feature. I think this is a great first iteration and if needed, we can iterate on the dark mode CSS later in case there's some a11y issues especially around color contrast.
|
Released in v5.1.0 |
|
Thanks for the approval and feedback! Really glad the feature has been useful. I'll definitely keep an eye on the dark mode CSS and accessibility improvements and would be happy to iterate further if needed. |
2 participants
Summary
This PR adds an optional dark/light mode toggle for the webpack-bundle-analyzer UI, addressing Issue #642.
Implementation
-Added a theme toggle button in the interface
-Implemented CSS custom properties for dark/light theme colors
-Stored theme preference using localStorage
-Updated UI components to support both modes
What kind of change does this PR introduce?
Type: Feature addition (new functionality)
Scope: User interface enhancement with theme switching capability
Tests
No tests added in this PR — functionality affects UI/theme only.
Breaking changes
None. Dark mode is optional, defaults to the existing theme.
This PR addresses the exact issue described in #642 by providing a professional dark mode implementation that enhances user experience without disrupting existing functionality. The implementation follows the project's existing patterns and maintains visual consistency across all interface elements.
Screenshots
-Dark Theme
-Light Theme
Notes
Happy to update styling or toggle placement based on feedback.
Thanks for the opportunity to work on this feature!