fepli Handbuch

Das Admin-Panel folgt dem hellen oder dunklen Modus des Geräts. Ein Logo als SVG kann beiden folgen, ein Logo als PNG oder WebP bleibt, wie es ist. Diese Anleitung zeigt, wie Sie ein SVG so vorbereiten, dass es auf hellem und auf dunklem Grund lesbar ist.

Voraussetzungen

Rolle Super-Admin.
Das Logo als SVG, und ein Programm, mit dem Sie die Datei als Text öffnen können, z. B. ein Texteditor.

Dieses Logo steht in der Seitenleiste des Admin-Panels und auf der Anmeldeseite. Die Logos der E-Mails und der Belege laden Sie getrennt hoch, unter E-Mail und Beleg & Rechnung: Dort sind es JPG, PNG oder GIF, und sie stehen immer auf Weiß.

Schritte

Schrift und einfarbige Flächen: `currentColor`

Was im Logo schwarz oder dunkel ist und im dunklen Modus hell werden soll, bekommt die Farbe currentColor. fepli setzt dafür die Textfarbe der Seite ein: fast schwarz im hellen Modus, weiß im dunklen.

Öffnen Sie die SVG-Datei im Texteditor.

Ersetzen Sie bei diesen Flächen die Farbe durch currentColor:

<!-- vorher -->
<path fill="#1a1a1a" d="…"/>

<!-- nachher -->
<path fill="currentColor" d="…"/>

Lassen Sie farbige Flächen, die in beiden Modi gleich bleiben sollen, wie sie sind, z. B. fill="#e11d48".

Für die meisten Logos reicht das.

Eine andere Farbe im dunklen Modus: `dark:`-Klassen

Soll eine Fläche im dunklen Modus eine bestimmte andere Farbe bekommen, geben Sie ihr Klassen statt einer festen Farbe. Die Klasse ohne Vorsatz gilt im hellen Modus, die mit dark: im dunklen:

<circle class="fill-black dark:fill-white" cx="30" cy="30" r="22"/>

Diese Klassen kennt fepli:

Klasse	Wirkung
`fill-black`, `fill-white`, `fill-current`	Füllung schwarz, weiß oder in der Textfarbe
`stroke-black`, `stroke-white`, `stroke-current`	Kontur schwarz, weiß oder in der Textfarbe
`dark:fill-black`, `dark:fill-white`, `dark:fill-current`	dieselbe Füllung, nur im dunklen Modus
`dark:stroke-black`, `dark:stroke-white`, `dark:stroke-current`	dieselbe Kontur, nur im dunklen Modus
`hidden`, `inline`	Element ausblenden oder zeigen
`dark:hidden`, `dark:inline`	Element nur im dunklen Modus ausblenden oder zeigen

Eine Klasse wirkt nur, wenn das Element keine feste Farbe trägt: Entfernen Sie fill="…" und stroke="…" an diesem Element.

Zwei Fassungen in einer Datei

Unterscheiden sich die helle und die dunkle Fassung stärker, legen Sie beide in dieselbe Datei und zeigen je eine:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 60">
  <g class="dark:hidden"><!-- Fassung für hellen Grund --></g>
  <g class="hidden dark:inline"><!-- Fassung für dunklen Grund --></g>
</svg>

Hochladen und prüfen

Öffnen Sie Einstellungen › Allgemein.
Wählen Sie bei Logo die Schaltfläche Datei wählen oder Ersetzen, dann die SVG-Datei, dann Hochladen.
Prüfen Sie die Vorschau: links das Logo auf Hell, rechts auf Dunkel.

Ergebnis

Das Logo steht in der Seitenleiste und auf der Anmeldeseite und wechselt mit dem Modus des Geräts. Hochladen gilt sofort: „Logo gespeichert.“

Gut zu wissen

Die Datei braucht ein viewBox-Attribut oder width und height am <svg>-Element. Ohne beides meldet fepli: „Diese SVG-Datei konnte nicht gelesen werden.“
fepli entfernt beim Hochladen alles, was ein Logo nicht braucht: Skripte, Verweise auf andere Server und eingebettete Schriften von dort. Wandeln Sie Schrift vor dem Export in Pfade um, sonst erscheint sie in der Schrift des Geräts.
Ein PNG oder WebP wird im dunklen Modus unverändert gezeigt. Wählen Sie dann eine Fassung mit transparentem Hintergrund, die auf beiden Gründen lesbar ist.
Höchstens 1 MB.