Dark Mode Support on BM Dashboard #4277
Open
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
…ss, ProjectSelectForm.jsx, ProjectList.jsx
✅ Deploy Preview for highestgoodnetwork-dev ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Verified PR by navigating to Dashboard → BM Dashboard and testing Dark Mode. All UI elements — background, text, buttons, dropdowns, and charts — adjust correctly to the dark theme. Color contrast and text remain clearly visible and readable across both light and dark modes. Functionality working as expected. PR4277.mp4 |
hemanthvenkat
approved these changes
Oct 26, 2025
…sibility - Add global ThemeManager component for body-level dark mode class management - Add comprehensive dark mode styles to public/index.css for all UI components - Improve text visibility with high-contrast white text (#ffffff) in dark mode - Add text shadows and enhanced color schemes for better readability - Update BMDashboard.module.css with improved dark mode text visibility - Fix CSS module policy violations by removing BMDashboard.css imports - Enhance AutoUpdate component URL handling for test environment compatibility - Add dark mode styles for cards, forms, tables, modals, navigation, and all interactive elements - Ensure consistent styling across the entire application - Support for both 'dark-mode' and 'bm-dashboard-dark' CSS classes for maximum compatibility Changes include: - Created ThemeManager.jsx for global theme state management - Enhanced App.jsx to include ThemeManager component - Fixed AutoUpdate.jsx URL parsing for test environment - Improved BMDashboard.module.css with better text contrast - Removed CSS module violations from UpdateEquipment.jsx and AddEquipmentType.jsx - Added comprehensive global dark mode styles to public/index.css - Fixed duplicate CSS selectors and linting issues
|
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.
Description
The BM Dashboard page (https://dev.highestgood.com/bmdashboard) did not support dark mode. When dark mode was enabled, the page elements—including charts, dropdowns, and text—remained styled for light mode, causing visibility and contrast issues.
This PR updates the BM Dashboard to fully support dark mode by applying theme-based styles, ensuring consistency across all UI components.
Related PRS (if any)
None
…
Main changes explained
How to test
Screenshots or videos of changes:
Note: