mirror of
https://github.com/teslamate-org/teslamate.git
synced 2026-01-24 21:06:08 +08:00
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:
@@ -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!()
|
||||
|
||||
Reference in New Issue
Block a user