feat: add optional dark mode feature #5065
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
This PR adds an optional dark mode to TeslaMate with three appearance options: - Light (default): Always use light theme - Follow System: Automatically match OS/browser dark mode preference - Dark: Always use dark theme Key features: - Database-persisted theme preference in GlobalSettings - Comprehensive dark mode styling for all UI components - Monochrome map tiles in dark mode (Tesla-inspired aesthetic) - Instant theme switching without page reload - No flash of wrong theme on page load - Defaults to light mode for existing users Technical implementation: - New theme_mode field in settings table (migration included) - CSS custom properties for theme colors - JavaScript theme detection and system preference monitoring - LiveView hook for instant theme changes - Inverted OSM map tiles with grayscale filter for dark mode Maintains backward compatibility - existing installations will default to light mode and users can opt-in to dark mode.
✅ Deploy Preview for teslamate ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
- Dutch: Thema, Weergave, Licht, Donker, Volg systeem - French: Thème, Apparence, Clair, Sombre, Suivre le système - German: Design, Darstellung, Hell, Dunkel, Systemeinstellung folgen
JakobLichterfeld
changed the title
JakobLichterfeld
requested changes
Dec 10, 2025
Member
There was a problem hiding this comment.
Thanks for your contribution! It is very much appreciated, as #461 and #2729 /#2730 were never finished.
Currently, we only have the status bar sync to system; see #2840.
From my point of view:
- We should default to
system, as this is the best and default state-of-the-art UX - Add a test for the new setting
- Add it to the README and docs and Screenshots
priv/repo/migrations/20251207212310_add_theme_mode_to_settings.exs
Outdated
Show resolved
Hide resolved
JakobLichterfeld
added
enhancement
JakobLichterfeld
requested changes
Dec 22, 2025
Member
JakobLichterfeld
left a comment
JakobLichterfeld
left a comment
There was a problem hiding this comment.
Thanks for processing the findings.
Beside of the small .gitignore finding, this PR is near perfect, thanks so much!
JakobLichterfeld
approved these changes
Dec 29, 2025
Member
JakobLichterfeld
left a comment
JakobLichterfeld
left a comment
There was a problem hiding this comment.
Perfect, ty!
After some tests on my side, it will be merged.
Member
|
I did find one thing during testing: In Geo-Fence view, the buttons on the right are not superb visible in dark mode: |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
This PR adds an optional dark mode to TeslaMate with three appearance options:
Key features:
Technical implementation:
Maintains backward compatibility - the migration sets the default to "system", providing the best out-of-box experience by respecting user preferences.