Emulieren von dunklen oder hellen Schemas auf der gerenderten Seite

Verwenden Sie das Renderingtool , um zu sehen, wie Ihre Webseite mit verschiedenen Anzeigeoptionen oder Sehschwächen aussieht.

Viele Betriebssysteme bieten eine Möglichkeit, jede Anwendung in dunkleren oder helleren Farben anzuzeigen. Eine Website mit einem hellen Schema in einem Betriebssystem im dunklen Modus kann schwer lesbar sein und für einige Benutzer ein Problem mit der Barrierefreiheit sein.

Um zu testen, wie eine Webseite gerendert wird, wenn der Benutzer den dunklen oder hellen Modus ausgewählt hat, können Sie anstelle der Einstellung für den dunklen oder hellen Modus Ihres eigenen Computers "Emulieren" auswählen: "CSS bevorzugt das Farbschema "Dunkel" oder "Hell" in Microsoft Edge DevTools. Sie können dies über das Renderingtool oder über das Befehlsmenü tun, wie unten beschrieben.

Alternativ können Sie festlegen, dass Ihre Webseite automatisch den dunklen oder hellen Modus basierend auf Ihren eigenen bevorzugten Einstellungen auf Ihrem Computer auswählt, indem Sie "Keine Emulation" auswählen, was die Standardeinstellung ist.

Um die CSS anzugeben, die sowohl für helle als auch für dunkle Schemas verwendet werden soll, verwenden Sie die CSS-Medienabfrage "Prefers-Color-Scheme ", um zu ermitteln, ob der Benutzer Ihr Produkt lieber in einem dunklen oder hellen Farbschema anzeigen möchte, und wählen Sie dann automatisch Ihr eigenes benutzerdefiniertes CSS im hellen oder dunklen Modus aus. Beispiel-CSS-Code wird in "Auf Kontrastprobleme mit dunklem Design und hellem Design überprüfen" angezeigt.

In diesem Artikel geht es um das Ändern der Darstellung der Webseite, die sich in der Entwicklung befindet. Informationen zum Ändern der Darstellung von DevTools finden Sie unter Anwenden von Farbdesigns auf DevTools.

Emulieren des dunklen oder hellen Modus mit dem Renderingtool

  1. Öffnen Sie in DevTools das Renderingtool . Klicken Sie dazu auf der Hauptsymbolleiste oder in der Schublade auf das Symbol " Weitere Tools (+), und wählen Sie dann "Rendern" aus.

    Wenn das Renderingtool bereits geöffnet, aber ausgeblendet ist, klicken Sie auf der Symbolleiste auf das Symbol " Weitere Registerkarten ", >>, und wählen Sie dann " Rendern" aus.

  2. Wählen Sie in der Dropdownliste " Emulieren von CSS-Medien " die Option "prefers-color-scheme: dark " oder "prefers-color-scheme: light" aus.

    Emulieren des dunklen oder hellen Modus mit dem Renderingtool.

  3. Aktualisieren Sie die Seite, um das gerenderte Ergebnis anzuzeigen.

    Jetzt können Sie Ihr CSS ändern und das gerenderte Ergebnis auf die gleiche Weise wie für jede andere Webseite anzeigen. Siehe Erste Schritte Anzeigen und Ändern von CSS.

  4. Um die Einstellung wiederherzustellen, wählen Sie im Renderingtool in der Dropdownliste "Prefers-color-scheme" des Emulieren-CSS-Medienfeatures "Keine Emulation" aus. Wenn Sie die Seite aktualisieren, wird Ihre eigene Betriebssystem- oder Browsereinstellung für den hellen oder dunklen Modus angewendet.

Emulieren des dunklen oder hellen Modus mithilfe des Befehlsmenüs

  1. Wenn DevTools den Fokus hat, öffnen Sie das Befehlsmenü, indem Sie (Windows, Linux) oder Command``P++Shift(macOS) auswählen.Ctrl+Shift+P

  2. Geben Sie Dunkel, Hell oder Emulieren ein, wählen Sie "Rendering: Emulieren von CSS prefers-color-scheme: dark " oder "Rendering: Emulate CSS prefers-color-scheme: light" aus, und drücken Sie dann die EINGABETASTE.

    Emulieren des dunklen oder hellen Modus mithilfe der Befehle "Rendering: Emulieren von CSS prefers-color-scheme" im Befehlsmenü.

    Wählen Sie einen Renderingbefehl anstelle eines Darstellungsbefehls aus. Die Renderingbefehle wirken sich auf die gerenderte Webseite aus, die sich in der Entwicklung befindet. Die Darstellungsbefehle wirken sich stattdessen auf den DevTools-Teil des Fensters aus.

  3. Aktualisieren Sie die Seite, um das gerenderte Ergebnis anzuzeigen.

    Jetzt können Sie Ihr CSS ändern und das gerenderte Ergebnis auf die gleiche Weise wie für jede andere Webseite anzeigen. Siehe Erste Schritte Anzeigen und Ändern von CSS.

  4. Um die Einstellung wiederherzustellen, geben Sie im Befehlsmenü "Emulieren " oder " Schema " ein, und wählen Sie dann "Rendern" aus: Css prefers-color-scheme nicht emulieren. Wenn Sie die Seite aktualisieren, wird Ihre eigene Betriebssystem- oder Browsereinstellung für den hellen oder dunklen Modus angewendet.

Weitere Informationen

Das Renderingtool wird auch für Folgendes verwendet: