Skip to content

Allow using dark / light theme as indicated by prefers-color-scheme media feature

Philipp Wolfer requested to merge phw/funkwhale:browser-darkmode into develop

Maybe something for 1.3:

This adds a theme option "default", which when chosen will select dark / light mode based on the prefers-color-scheme media feature, if supported by the browser. It also watches the browser for changes and dynamically updates the theme.

Browser implementing this usually follow the operating systems default, e.g. on macOS or Windows. That means the user can choose that Funkwhale follows their global settings. The watching of changes is interesting e.g. on macOS, where you can configure the OS to switch between light / dark mode based on day / night.

The following video demonstrate the changes. Once the theme is set to browser default it follows the changes to the browser setting (simulated in this case via developer tools):

funkwahle-auto-darkmode

Not yet sure about the icon. For now this uses the palette icon.

This isn't yet tested on different platforms.

Edited by Philipp Wolfer

Merge request reports