Prepare the logo for dark mode

The admin panel follows the light or dark mode of the device. A logo as SVG can follow both; a logo as PNG or WebP stays as it is. This guide shows how to prepare an SVG so that it is legible on light and on dark backgrounds.

Prerequisites

Role Super admin.
The logo as SVG, and a program that opens the file as text, e.g. a text editor.

This logo appears in the sidebar of the admin panel and on the sign-in page. The logos of the emails and the receipts are uploaded separately, under Email and Receipt & invoice. There they are JPG, PNG or GIF, and they always appear on white.

Steps

Lettering and solid areas: `currentColor`

Whatever in the logo is black or dark and is to turn light in dark mode gets the colour currentColor. For this, fepli uses the text colour of the page: almost black in light mode, white in dark mode.

Open the SVG file in the text editor.

For these areas, replace the colour with currentColor:

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

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

Leave coloured areas that are to stay the same in both modes as they are, e.g. fill="#e11d48".

For most logos, this is enough.

A different colour in dark mode: `dark:` classes

If an area is to get a specific other colour in dark mode, give it classes instead of a fixed colour. The class without a prefix applies in light mode, the one with dark: in dark mode:

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

fepli knows these classes:

Class	Effect
`fill-black`, `fill-white`, `fill-current`	Fill black, white or in the text colour
`stroke-black`, `stroke-white`, `stroke-current`	Outline black, white or in the text colour
`dark:fill-black`, `dark:fill-white`, `dark:fill-current`	The same fill, in dark mode only
`dark:stroke-black`, `dark:stroke-white`, `dark:stroke-current`	The same outline, in dark mode only
`hidden`, `inline`	Hide or show the element
`dark:hidden`, `dark:inline`	Hide or show the element in dark mode only

A class takes effect only if the element has no fixed colour: remove fill="…" and stroke="…" on this element.

Two versions in one file

If the light and dark versions differ more strongly, put both in the same file and show one of them each:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 60">
  <g class="dark:hidden"><!-- version for a light background --></g>
  <g class="hidden dark:inline"><!-- version for a dark background --></g>
</svg>

Upload and check

Open Settings > General.
At Logo, select the button Choose file or Replace, then the SVG file, then Upload.
Check the preview: on the left the logo on a light background, on the right on a dark background.

Result

The logo appears in the sidebar and on the sign-in page and changes with the mode of the device. The upload takes effect immediately: “Logo saved.”

Good to know

The file needs a viewBox attribute, or width and height on the <svg> element. Without either, fepli reports: “This SVG file could not be read.”
When you upload, fepli removes everything a logo does not need: scripts, references to other servers and embedded fonts from there. Convert lettering to paths before exporting; otherwise it appears in the font of the device.
A PNG or WebP is shown unchanged in dark mode. Use a version with a transparent background that is legible on both backgrounds.
At most 1 MB.