White Label

Du kannst deine evcc-Instanz unter eigener Marke ausliefern: mit deinem Logo, deinen Kontaktdaten und deinem Farbschema. Diese Seite richtet sich an Installateure und Anbieter, die vorkonfigurierte Geräte oder gehostete Installationen an ihre Kunden liefern.

Farben und Schriften

Neben Logo und Namen kannst du auch Farben und Schriften an deine Marke anpassen. EVCC_CUSTOM_CSS verweist auf eine CSS-Datei, die zusätzlich zu den Standard-Styles geladen wird. Die Oberfläche nutzt für Farben und Schriften ausgiebig CSS-Custom-Properties. Die meisten optischen Anpassungen funktionieren über das Überschreiben dieser Properties statt über das Stylen einzelner Elemente. Die verfügbaren Properties sind in der app.css definiert.

Dieses Beispiel ändert die Primärfarbe und lädt eine andere Schrift von Google Fonts:

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&display=swap");

:root {
  --evcc-dark-green: #22d3ee;
  --evcc-darker-green: #0891b2;
  --bs-body-font-family: "Space Grotesk", sans-serif;
}

Mit dieser Datei sieht die Oberfläche so aus:

Dabei gibt es ein paar Dinge zu beachten:

Es gibt keine Kompatibilitätsgarantien. Properties und Markup können sich mit jedem Release ändern. Eigene Styles sollten nach jedem Update geprüft werden, idealerweise schon mit den Nightly Releases.
Die Styles sollten im hellen und dunklen Design funktionieren.
Wichtig sind ausreichende Kontraste, z. B. bei Text auf der Primärfarbe.

Standard-Design

EVCC_CUSTOM_THEME legt das Design fest, mit dem die Oberfläche startet: auto (Standard), light oder dark. Nutzer können das Design weiterhin unter Mehr → Darstellung ändern. Ihre Auswahl wird im Browser gespeichert und hat immer Vorrang vor dieser Vorgabe.

Markenname und Logo

Variable	Wirkung
`EVCC_CUSTOM_BRAND`	Markenname im Navigationsmenü
`EVCC_CUSTOM_LOGO_LIGHT`	Logo für das helle Design
`EVCC_CUSTOM_LOGO_DARK`	Logo für das dunkle Design
`EVCC_CUSTOM_WEBSITE`	Website-Link im Versionsdialog
`EVCC_CUSTOM_EMAIL`	Support-E-Mail-Adresse
`EVCC_CUSTOM_PHONE`	Support-Telefonnummer

EVCC_CUSTOM_BRAND setzt deinen Markennamen. Er ersetzt den Eintrag evcc im Navigationsmenü.

EVCC_CUSTOM_LOGO_LIGHT und EVCC_CUSTOM_LOGO_DARK ersetzen das evcc-Logo durch dein eigenes (svg oder png). Die beiden Varianten müssen immer zusammen konfiguriert werden. Verwende möglichst svg, das bleibt in jeder Größe scharf. Das Logo wird mit 64 px Höhe angezeigt und die Breite skaliert entsprechend, daher passt ein Querformat am besten. Ein Klick auf den Markennamen im Menü öffnet den Dialog Version mit deinem Logo. EVCC_CUSTOM_WEBSITE, EVCC_CUSTOM_EMAIL und EVCC_CUSTOM_PHONE fügen diesem Dialog deine Website, Support-E-Mail-Adresse und Telefonnummer hinzu.

Versionsdialog mit eigenem Logo und Kontaktdaten

Probleme melden

Unter Hilfe benötigt? → Problem melden können Nutzer Fehler melden und Fragen stellen. Standardmäßig öffnet die Seite eine vorbefüllte GitHub Discussion oder ein GitHub Issue. Ist EVCC_CUSTOM_EMAIL gesetzt, läuft die Meldung stattdessen per E-Mail: Nutzer beschreiben ihr Problem und senden es über ihr E-Mail-Programm (mailto:) an deine Support-Adresse.

Aus technischen Gründen enthält die E-Mail keine Debug-Details (Konfiguration, Logs, Zustand). Bitte deine Nutzer bei Bedarf, die Debug-Datei auf derselben Seite herunterzuladen und an die E-Mail anzuhängen.

Der Hilfe-Dialog zeigt außerdem einen E-Mail-Button Kontakt aufnehmen statt des Links GitHub Discussions.

Konfiguration

Jede Einstellung ist eine Umgebungsvariable. Dieselben Einstellungen gibt es auch als CLI-Optionen, z. B. --custom-brand für EVCC_CUSTOM_BRAND.

Du kannst sie direkt auf der Kommandozeile, in einer systemd-Override-Datei oder in deiner Docker-Compose-Datei setzen:

EVCC_CUSTOM_BRAND="G1GA HEMS" \
EVCC_CUSTOM_LOGO_LIGHT=logo-light.svg \
EVCC_CUSTOM_LOGO_DARK=logo-dark.svg \
EVCC_CUSTOM_WEBSITE=https://example.com/hems \
EVCC_CUSTOM_EMAIL=support@example.com \
EVCC_CUSTOM_PHONE="+49 123 456789" \
EVCC_CUSTOM_CSS=custom.css \
evcc

Lege eine Override-Datei mit sudo systemctl edit evcc an, siehe Linux → Umgebungsvariablen & CLI-Optionen.

[Service]
Environment="EVCC_CUSTOM_BRAND=G1GA HEMS"
Environment="EVCC_CUSTOM_LOGO_LIGHT=/etc/branding/logo-light.svg"
Environment="EVCC_CUSTOM_LOGO_DARK=/etc/branding/logo-dark.svg"
Environment="EVCC_CUSTOM_EMAIL=support@example.com"
Environment="EVCC_CUSTOM_CSS=/etc/branding/custom.css"

Setze die Variablen in deiner Compose-Datei und mounte die Logo- und CSS-Dateien in den Container.

services:
  evcc:
    image: evcc/evcc:latest
    environment:
      - EVCC_CUSTOM_BRAND=G1GA HEMS
      - EVCC_CUSTOM_LOGO_LIGHT=/etc/branding/logo-light.svg
      - EVCC_CUSTOM_LOGO_DARK=/etc/branding/logo-dark.svg
      - EVCC_CUSTOM_EMAIL=support@example.com
      - EVCC_CUSTOM_CSS=/etc/branding/custom.css
    volumes:
      - /home/user/branding:/etc/branding

Auch die restliche Konfiguration lässt sich über Umgebungsvariablen setzen: EVCC_ gefolgt vom Parameternamen aus der evcc.yaml in Großbuchstaben, z. B. EVCC_NETWORK_HOST oder EVCC_DATABASE_DSN.

Eigenes Image

Um ein komplettes SD-Karten-Image mit deinem Branding auszuliefern, forke das Repository evcc-io/images. Das Skript userpatches/customize-image.sh konfiguriert evcc während des Image-Builds. Im Abschnitt EVCC SETUP schreibt es die systemd-Override-Datei, dort gehören deine Environment="EVCC_CUSTOM_..."-Zeilen hin.

Lizenz

Das offizielle Binary oder Docker-Image an deine Kunden auszuliefern oder zu verkaufen ist völlig in Ordnung. Halte dich dabei an die Sponsoring-Bedingungen und die Lizenz. Instanzen, die sponsoringpflichtige Integrationen nutzen, brauchen jeweils einen eigenen Sponsortoken.