Hell und dunkel

Ahoi zeigt jede Seite hell oder dunkel, je nachdem, was im Gerät des Besuchers eingestellt ist. Dafür ist nichts einzurichten: Alle Paletten haben beide Fassungen, und alle Blöcke, die Farben der Palette nutzen, wechseln mit. Mit wpShopGermany gilt das auch für den Shop.

Der Umschalter im Header

Im Header steht rechts ein Button mit Mond bzw. Sonne. Damit wählt der Besucher selbst hell oder dunkel, unabhängig vom Gerät.

• Die Wahl merkt sich nur der Browser des Besuchers. Ahoi setzt kein Cookie und speichert nichts auf dem Server (Datenschutz).
• Wählt der Besucher dasselbe, was sein Gerät eingestellt hat, vergisst der Browser die Wahl. Danach folgt die Seite wieder dem Gerät.
• Bildschirmleser lesen den Button als „Dunkler Modus“ mit dem Zustand „gedrückt“ oder „nicht gedrückt“. Er ist mit der Tastatur bedienbar.
• Ohne JavaScript ist der Button ausgeblendet; die Seite folgt dann dem Gerät.
• Ältere Browser, die die Farbangaben für hell und dunkel nicht kennen, zeigen die Seite hell und den Button nicht.

Umschalter entfernen oder wieder einfügen

Der Umschalter ist ein gewöhnlicher Button im Header.

• Entfernen: Design → Editor → Vorlagen öffnen, unter den Template-Teilen Header wählen und den Header „Header“ öffnen, den Umschalter anklicken und löschen. Speichern. Die Seite folgt dann immer dem Gerät.
• Wieder einfügen: An der gewünschten Stelle im Header die Vorlage Umschalter hell/dunkel einfügen (Kategorie „Header“).

Die Kasse hat einen eigenen Header mit eigenem Umschalter (Kasse).

Im Website-Editor

Auch der Website-Editor zeigt die Vorschau so, wie Ihr Gerät eingestellt ist. Unter Stile schalten Sie die Vorschau mit dem Button mit dem Mondsymbol („Dunkle Vorschau“) neben Stilbuch um (Farben und Schriften).

Eigene Farben an Blöcken

Farben aus der Palette von Ahoi wechseln von selbst zwischen hell und dunkel. Wählen Sie bei einem Block unter Farbe eine eigene Farbe für Text oder Hintergrund, gilt sie in beiden Modi gleich. Daraus folgt:

Am Block gewählt	Was passiert	Rat
eigener heller Hintergrund	Dunkel behält der Block die Farben des hellen Modus: dunkle Schrift, Links und Buttons wie hell. Eine eigene Textfarbe bleibt.	–
eigener dunkler Hintergrund, keine Textfarbe	Dunkel ist die Schrift hell. Hell steht dunkle Schrift auf dunklem Grund.	eine helle Textfarbe dazu wählen
eigene Textfarbe, kein Hintergrund	Die Farbe bleibt in beiden Modi; eine dunkle Textfarbe ist im dunklen Modus kaum lesbar. Ahoi ersetzt keine Textfarbe.	zu einer eigenen Textfarbe auch einen Hintergrund wählen

„Eigene Farbe“ heißt hier: eine selbst gewählte Farbe oder eine Farbe der Standardpalette von WordPress, etwa „Helles Cyanblau“ aus älteren Inhalten. Ahoi blendet diese Standardpalette in der Auswahl aus, Blöcke, die sie schon nutzen, behalten sie aber.

Bei einem Farbverlauf oder einem halb durchsichtigen Hintergrund passt Ahoi nichts an, weil dort nicht feststeht, ob er hell oder dunkel wirkt. Prüfen Sie solche Blöcke in beiden Modi.

Auch Links und Buttons nehmen ihre Farben aus der Palette und passen sie nicht an einen eigenen Hintergrund an. Je nach Palette und Hintergrund hebt sich ein Link dann zu wenig ab, etwa auf „Helles Cyanblau“ in mehreren Paletten. Prüfen Sie Links und Buttons auf eigenen Hintergründen deshalb mit einem Kontrastrechner (Kontrast prüfen).

Der Editor zeigt dieses Verhalten nicht, nur die Website. Prüfen Sie Blöcke mit eigenen Farben deshalb im Frontend mit dem Umschalter im Header.

Wie Ahoi mit geänderten Farben der Palette umgeht, steht unter Eigene Farben.

Bilder

Ein Bild bleibt in beiden Modi dasselbe. Ein Logo mit dunkler Schrift auf durchsichtigem Grund ist im dunklen Modus schlecht zu sehen. Dafür gibt es zwei Wege:

• Ein Logo für beide Modi: eines, das auf hellem und dunklem Grund funktioniert, oder eines mit eigenem Hintergrund.
• Zwei Fassungen: eine helle und eine dunkle, mit den Blockstilen Nur hell und Nur dunkel. Auf der Website erscheint jeweils eine davon, passend zur Wahl im Umschalter, sonst zur Einstellung des Geräts. Im Editor sind beide zu sehen.

So richten Sie zwei Fassungen des Logos ein:

1. Im Template-Teil Header den Block Website-Logo wählen und rechts unter Stile Nur hell wählen.
2. Daneben einen Bild-Block mit der dunklen Fassung einfügen und dort Nur dunkel wählen.
3. Dem Bild denselben Alternativtext geben wie dem Logo, etwa den Namen der Website, und es auf die Startseite verlinken, wie es das Website-Logo tut.
4. Speichern.

Dasselbe geht mit zwei Bild-Blöcken überall auf einer Seite.