mirror of
https://github.com/teslamate-org/teslamate.git
synced 2026-01-24 21:06:08 +08:00
Wouter HermansandWarp
a3887390c1
* 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>
109 lines
2.3 KiB
Plaintext
109 lines
2.3 KiB
Plaintext
---
|
|
id: screenshots
|
|
title: Screenshots
|
|
sidebar_label: Screenshots
|
|
---
|
|
|
|
import useBaseUrl from "@docusaurus/useBaseUrl";
|
|
|
|
:::info
|
|
TeslaMate supports customizable themes. You can choose between light mode, dark mode, or system default (which automatically follows your device's appearance settings) in the Settings page.
|
|
:::
|
|
|
|
## Web Interface
|
|
|
|
<img alt="Web Interface" src={useBaseUrl("screenshots/web_interface.png")} />
|
|
|
|
## Battery Health
|
|
|
|
<img
|
|
alt="Visited addresses"
|
|
src={useBaseUrl("screenshots/battery-health.png")}
|
|
/>
|
|
|
|
## Charge Level
|
|
|
|
<img alt="Charge Level" src={useBaseUrl("screenshots/charge-level.png")} />
|
|
|
|
## Charges
|
|
|
|
<img alt="Charges" src={useBaseUrl("screenshots/charging-history.png")} />
|
|
|
|
## Charge Details
|
|
|
|
<img alt="Charge Details" src={useBaseUrl("screenshots/charging.png")} />
|
|
|
|
## Charging Stats
|
|
|
|
<img alt="Charge Stats" src={useBaseUrl("screenshots/charging-stats.png")} />
|
|
|
|
## Database Information
|
|
|
|
<img alt="Database Information" src={useBaseUrl("screenshots/db-info.png")} />
|
|
|
|
## Drive Stats
|
|
|
|
<img alt="Drive Stats" src={useBaseUrl("screenshots/drive-stats.png")} />
|
|
|
|
## Drives
|
|
|
|
<img alt="Drives" src={useBaseUrl("screenshots/drives.png")} />
|
|
|
|
## Drive Details
|
|
|
|
<img alt="Drive Details" src={useBaseUrl("screenshots/drive.png")} />
|
|
|
|
## Efficiency
|
|
|
|
<img alt="Efficiency" src={useBaseUrl("screenshots/efficiency.png")} />
|
|
|
|
## Location (addresses)
|
|
|
|
<img alt="Location (addresses)" src={useBaseUrl("screenshots/locations.png")} />
|
|
|
|
## Mileage
|
|
|
|
<img alt="Mileage" src={useBaseUrl("screenshots/mileage.png")} />
|
|
|
|
## Overview
|
|
|
|
<img alt="Overview" src={useBaseUrl("screenshots/overview.png")} />
|
|
|
|
## Projected Range
|
|
|
|
<img
|
|
alt="Projected Range"
|
|
src={useBaseUrl("screenshots/projected-range.png")}
|
|
/>
|
|
|
|
## States
|
|
|
|
<img alt="States" src={useBaseUrl("screenshots/states.png")} />
|
|
|
|
## Statistics
|
|
|
|
<img alt="Statistics" src={useBaseUrl("screenshots/statistics.png")} />
|
|
|
|
## Timeline
|
|
|
|
<img alt="Timeline" src={useBaseUrl("screenshots/timeline.png")} />
|
|
|
|
## Trip
|
|
|
|
<img alt="Trip" src={useBaseUrl("screenshots/trip.png")} />
|
|
|
|
## Updates
|
|
|
|
<img alt="Updates" src={useBaseUrl("screenshots/updates.png")} />
|
|
|
|
## Vampire Drain
|
|
|
|
<img alt="Vampire Drain" src={useBaseUrl("screenshots/vampire_drain.png")} />
|
|
|
|
## Visited (Lifetime driving map)
|
|
|
|
<img
|
|
alt="Lifetime driving map"
|
|
src={useBaseUrl("screenshots/lifetime_driving_map.png")}
|
|
/>
|