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>
This commit is contained in:
Wouter Hermans
2026-01-22 11:20:50 +01:00
committed by GitHub
parent c7d808b0c7
commit a3887390c1
16 changed files with 751 additions and 87 deletions
+8 -3
View File
@@ -30,7 +30,8 @@ defmodule TeslaMate.SettingsTest do
preferred_range: :rated,
base_url: "https://testlamate.exmpale.com",
grafana_url: "https://grafana.exmpale.com",
language: "de"
language: "de",
theme_mode: :dark
}
@invalid_attrs %{
unit_of_length: nil,
@@ -38,7 +39,8 @@ defmodule TeslaMate.SettingsTest do
preferred_range: nil,
base_url: nil,
grafana_url: nil,
language: "foo"
language: "foo",
theme_mode: nil
}
test "get_global_settings!/0 returns the settings" do
@@ -49,6 +51,7 @@ defmodule TeslaMate.SettingsTest do
assert settings.base_url == nil
assert settings.grafana_url == nil
assert settings.language == "en"
assert settings.theme_mode == :system
end
test "update_global_settings/2 with valid data updates the settings" do
@@ -63,6 +66,7 @@ defmodule TeslaMate.SettingsTest do
assert settings.base_url == "https://testlamate.exmpale.com"
assert settings.grafana_url == "https://grafana.exmpale.com"
assert settings.language == "de"
assert settings.theme_mode == :dark
end
test "update_global_settings/2 with invalid data returns error changeset" do
@@ -75,7 +79,8 @@ defmodule TeslaMate.SettingsTest do
unit_of_length: ["can't be blank"],
unit_of_temperature: ["can't be blank"],
preferred_range: ["can't be blank"],
language: ["is not supported"]
language: ["is not supported"],
theme_mode: ["can't be blank"]
}
assert ^settings = Settings.get_global_settings!()