mirror of
https://github.com/teslamate-org/teslamate.git
synced 2026-01-24 21:06:08 +08:00
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>
91 lines
4.9 KiB
Markdown
91 lines
4.9 KiB
Markdown
# TeslaMate
|
|
|
|
[](https://www.bestpractices.dev/projects/10859)
|
|
[](https://github.com/teslamate-org/teslamate/actions/workflows/devops.yml)
|
|
[](https://github.com/teslamate-org/teslamate/actions/workflows/buildx.yml)
|
|
[](https://coveralls.io/github/teslamate-org/teslamate?branch=main)
|
|
[](https://hub.docker.com/r/teslamate/teslamate)
|
|
[](https://hub.docker.com/r/teslamate/teslamate)
|
|
[](https://hub.docker.com/r/teslamate/teslamate)
|
|
|
|
A powerful, self-hosted data logger for your Tesla.
|
|
|
|
- Written in **[Elixir](https://elixir-lang.org/)**
|
|
- Data is stored in a **Postgres** database
|
|
- Visualization and data analysis with **Grafana**
|
|
- Vehicle data is published to a local **[MQTT](https://en.wikipedia.org/wiki/MQTT)** Broker
|
|
|
|
## Documentation
|
|
|
|
The documentation is available at [https://docs.teslamate.org](https://docs.teslamate.org/)
|
|
|
|
## Features
|
|
|
|
### General
|
|
|
|
- High precision drive data recording
|
|
- No additional vampire drain: the car will fall asleep as soon as possible
|
|
- Automatic address lookup
|
|
- Easy integration into Home Assistant (via MQTT)
|
|
- Easy integration into Node-Red & Telegram (via MQTT)
|
|
- Geo-fencing feature to create custom locations
|
|
- Supports multiple vehicles per Tesla Account
|
|
- Charge cost tracking
|
|
- Import from TeslaFi and tesla-apiscraper
|
|
- Customizable theme mode (light, dark, or system default)
|
|
|
|
### Dashboards
|
|
|
|
Sample screenshots of bundled dashboards can be seen by clicking the links below.
|
|
|
|
- [Battery Health](https://docs.teslamate.org/docs/screenshots/#battery-health)
|
|
- [Charge Level](https://docs.teslamate.org/docs/screenshots/#charge-level)
|
|
- [Charges (Energy added / used)](https://docs.teslamate.org/docs/screenshots#charges)
|
|
- [Charge Details](https://docs.teslamate.org/docs/screenshots#charge-details)
|
|
- [Charging Stats](https://docs.teslamate.org/docs/screenshots#charging-stats)
|
|
- [Database Information](https://docs.teslamate.org/docs/screenshots/#database-information)
|
|
- [Drive Stats](https://docs.teslamate.org/docs/screenshots#drive-stats)
|
|
- [Drives (Distance / Energy consumed (net))](https://docs.teslamate.org/docs/screenshots/#drives)
|
|
- [Drive Details](https://docs.teslamate.org/docs/screenshots/#drive-details)
|
|
- [Efficiency (Consumption (net / gross))](https://docs.teslamate.org/docs/screenshots#efficiency)
|
|
- [Locations (addresses)](https://docs.teslamate.org/docs/screenshots/#location-addresses)
|
|
- [Mileage](https://docs.teslamate.org/docs/screenshots/#mileage)
|
|
- [Overview](https://docs.teslamate.org/docs/screenshots/#overview)
|
|
- [Projected Range (battery degradation)](https://docs.teslamate.org/docs/screenshots#projected-range)
|
|
- [States (see when your car was online or asleep)](https://docs.teslamate.org/docs/screenshots#states)
|
|
- [Statistics](https://docs.teslamate.org/docs/screenshots/#statistics)
|
|
- [Timeline](https://docs.teslamate.org/docs/screenshots/#timeline)
|
|
- [Trip](https://docs.teslamate.org/docs/screenshots/#trip)
|
|
- [Updates (History of installed updates)](https://docs.teslamate.org/docs/screenshots#updates)
|
|
- [Vampire Drain](https://docs.teslamate.org/docs/screenshots#vampire-drain)
|
|
- [Visited (Lifetime driving map)](https://docs.teslamate.org/docs/screenshots/#visited-lifetime-driving-map)
|
|
|
|
## Screenshots
|
|
|
|
Sneak peak into TeslaMate interface and bundled dashboards. See [the docs](https://docs.teslamate.org/docs/screenshots) for additional screenshots.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## Star History
|
|
|
|
<!-- markdownlint-disable MD033 -->
|
|
<a href="https://www.star-history.com/#teslamate-org/teslamate&type=date&legend=top-left">
|
|
<picture>
|
|
<source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=teslamate-org/teslamate&type=date&theme=dark&legend=top-left" />
|
|
<source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=teslamate-org/teslamate&type=date&legend=top-left" />
|
|
<img alt="Star History Chart" src="https://api.star-history.com/svg?repos=teslamate-org/teslamate&type=date&legend=top-left" />
|
|
</picture>
|
|
</a>
|
|
<!-- markdownlint-enable MD033 -->
|
|
|
|
## Credits
|
|
|
|
- Initial Author: Adrian Kumpf
|
|
- List of Contributors:
|
|
- [](https://github.com/teslamate-org/teslamate/graphs/contributors)
|
|
- Distributed under MIT License
|