Info: Automatischer Dark-Mode für Websites

Manche Websites erkennen automatisch, ob der/die BesucherIn mit einem dunklen oder hellen Theme aufm Handy/PC unterwegs ist.

Dementsprechend wird die Website dann automatisch in hell oder dunkel dargestellt.

Aktuell bietet Zeta Producer diese Funktionalität nicht, kann jedoch recht einfach nachgerüstet werden, mit relativ zufriedenstellenden Ergebnissen.

Ich habe das beispielhaft für ein Handbuch einer Software von uns unter docs.zeta-test.com umgesetzt. Ggf. ist das ja auch für den/die Eine(n) oder Andere(n) für Euch interessant, deshalb hier in aller Kürze die Schritte, die ich gemacht habe:

1. Folgenden Code nehmen:

<script src="https://cdn.jsdelivr.net/npm/darkreader@4.9.34/darkreader.js" integrity="sha256-EObQGXtX/SXVfHcrCUWYXfwSGoL8A7QCWnrfQR2/kNo=" crossorigin="anonymous"></script>
<script>
    // Enable when the system color scheme is dark.
    DarkReader.auto({
        brightness: 100,
        contrast: 90,
        sepia: 10
    });
</script>

2. Dies im Feld "CSS" ganz unten einfügen. Details siehe docs.zeta-producer.com/eigenes-css-einfuegen.html

3. Website veröffentlichen.

Das war's auch schon.

Aus meiner Sicht funktioniert das vor allem gut bei sehr schlichten, strukturierten Websites wie z. B. Anleitungen oder Handbüchern.

(Technischer Hintergrund)