Schon länger wollte ich einen Dunkelmodus für Websites entwickeln, die auf modernen WordPress-Block-Themes basieren.
Dark-Mode-Plugins gibt es zwar viele. Die meisten tauschen jedoch Stylesheets aus, überschreiben grosse Teile des CSS oder versuchen, bestehende Farben automatisch umzukehren. Das funktioniert oft, fühlt sich aber nicht nach dem WordPress von heute an.
Moderne Block-Themes definieren ihre Gestaltung bereits über theme.json. Deshalb entstand die Idee, nicht das Design zu ersetzen, sondern jeder Farbe einfach ein dunkles Gegenstück zu geben.
Genau das macht Dark Palette.
Anstatt ein separates Dark Theme zu erstellen, definierst du einmal eine dunkle Variante deiner bestehenden Farbpalette. Sobald der Dunkelmodus aktiviert wird, ersetzt Dark Palette die Farben deines Themes automatisch durch ihre dunklen Gegenstücke. So bleibt das Design deiner Website erhalten und wirkt trotzdem harmonisch im Dunkelmodus.
Besucherinnen und Besucher können über den Appearance Toggle zwischen Hell, Dunkel und Automatisch wechseln. Die gewählte Einstellung wird gespeichert, bereits vor dem Laden der Seite angewendet und berücksichtigt standardmässig auch die Systemeinstellung des Geräts.
Gleichzeitig bietet Dark Palette eine sehr feine Kontrolle darüber, wo der Dunkelmodus verfügbar sein soll. Er lässt sich für einzelne Beiträge oder Seiten, ganze Templates, Archivseiten, Suchergebnisse, passwortgeschützte Inhalte, 404-Seiten, den WordPress-Login oder den WooCommerce-Checkout deaktivieren. Ist der Dunkelmodus auf einer Seite nicht verfügbar, kannst du entscheiden, ob der Umschalter ausgeblendet, eine Information angezeigt oder ein deaktivierter Umschalter mit Erklärung eingeblendet werden soll. Die Standardmeldung richtet sich automatisch nach der Sprache deiner WordPress-Installation, individuelle Meldungen können global oder pro Seite definiert werden.
Damit das Erstellen einer dunklen Farbpalette einfacher wird, enthält Dark Palette eine Live-Vorschau. Während du die dunklen Gegenstücke deiner Farben anpasst, aktualisiert sich die Vorschau sofort und zeigt, wie Hintergründe, Texte, Links, Buttons und Akzentfarben zusammenwirken.
Dark Palette ist vollständig mehrsprachig und orientiert sich automatisch an der Sprache deiner WordPress-Installation. Aktuell sind Englisch, Deutsch, Französisch, Italienisch und Spanisch integriert – sowohl im WordPress-Adminbereich als auch im Block-Editor.
Mein Ziel war es nicht, einfach ein weiteres Dark-Mode-Plugin zu entwickeln. Ich wollte ein Plugin schaffen, das sich so anfühlt, als würde es von Anfang an zu modernem WordPress gehören.
Ich hoffe, dass Dark Palette dabei hilft, Websites zu gestalten, die sowohl tagsüber als auch nachts angenehm zu nutzen sind.
Mehr Informationen zu Dark Palette findest du auf meiner Portfolio-Website. Dort stelle ich regelmässig die Projekte vor, an denen ich gerade arbeite.
Der vollständige Quellcode ist auf GitHub verfügbar. Dort kannst du das Plugin herunterladen, Fehler melden, neue Funktionen vorschlagen oder selbst zur Weiterentwicklung beitragen.