mirror of https://github.com/teslamate-org/teslamate.git synced 2026-01-24 21:06:08 +08:00

Files

Wouter Hermans a3887390c1 feat: add optional dark mode feature (#5065 )

* Add optional dark mode feature

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.

* Run treefmt to fix code formatting

* Extract translation strings for theme settings

* Add Dutch, French, and German translations for theme settings

- Dutch: Thema, Weergave, Licht, Donker, Volg systeem
- French: Thème, Apparence, Clair, Sombre, Suivre le système
- German: Design, Darstellung, Hell, Dunkel, Systemeinstellung folgen

* Address review feedback: default to system theme, add tests and documentation

* Fix white background showing at bottom in dark mode

* Make footer sticky at bottom of viewport

* Remove WARP.md from .gitignore

* Fix visibility of inverted light buttons in dark mode

Improved contrast for edit/delete buttons in Geo-Fences table
by adding proper dark mode styling for is-inverted is-light buttons.

Co-Authored-By: Warp <agent@warp.dev>

* Add icon color inheritance for inverted light buttons

Ensure edit (blue) and delete (red) button icons are colored properly.

Co-Authored-By: Warp <agent@warp.dev>

* CI: use master as default branch in reusable workflows

Fix paths-filter and PR triggers by replacing hardcoded 'main' with 'master'.

Co-Authored-By: Warp <agent@warp.dev>

* Revert CI branch changes per maintainer request

Restore 'main' references in reusable workflows. No CI changes in this PR.

Co-Authored-By: Warp <agent@warp.dev>

* Dark mode: hide empty table header background in car summary

Add .thead-transparent class to the summary table and override thead bg to match
card surface, avoiding the apparent 'divider' under the title in dark mode.

Co-Authored-By: Warp <agent@warp.dev>

* Dark mode: fix tabs hover/active styles for boxed tabs in Settings

Ensure hover doesn’t turn tabs white; use surface/surface-light colors and proper borders for .tabs.is-boxed.

Co-Authored-By: Warp <agent@warp.dev>

* Dark mode: override Bulma active navbar dropdown item background

Ensure .navbar-dropdown .navbar-item.is-active uses dark surface color instead of light-mode whitesmoke.

Co-Authored-By: Warp <agent@warp.dev>

---------

Co-authored-by: Warp <agent@warp.dev>

2026-01-22 11:20:50 +01:00