mirror of
https://github.com/teslamate-org/teslamate.git
synced 2026-01-24 21:06:08 +08:00
Wouter Hermans
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>
Website
This website is built using Docusaurus 2, a modern static website generator and automatically deployed to docs.teslamate.org.
Installation
npm i
Local Development
npm start
This command starts a local development server and open up a browser window. Most changes are reflected live without having to restart the server.
Build
npm run build
This command generates static content into the build directory and can be served using any static contents hosting service.
Deployment
GIT_USER=<Your GitHub username> USE_SSH=true npm run deploy
If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the gh-pages branch.