Emulieren dunkler oder heller Schemas auf der gerenderten Seite

  • Artikel

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

Viele Betriebssysteme haben eine Möglichkeit, anwendungen in dunkleren oder helleren Farben anzuzeigen. Eine Website mit einem hellen Schema in einem dunklen Betriebssystem kann schwer zu lesen sein und kann 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 in Microsoft Edge DevTools emulate CSS prefers-color-scheme( dark or light ) auswählen, anstatt den dunklen oder hellen Modus Ihres eigenen Computers zu ändern. Oder Sie können ihre Webseite automatisch den dunklen oder hellen Modus basierend auf Ihren eigenen bevorzugten Einstellungen auf Ihrem Computer auswählen, indem Sie Keine Emulation auswählen, was die Standardeinstellung ist.

Sie können diese Einstellungen im Renderingtool oder im Befehlsmenü auswählen, wie unten beschrieben.

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 erkennen, 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 unter Überprüfen auf Kontrastprobleme mit dunklem und hellem Design gezeigt.

In diesem Artikel geht es darum, das Erscheinungsbild der Webseite zu ändern, 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. Klicken Sie zum Öffnen von DevTools mit der rechten Maustaste auf die Webseite, und wählen Sie dann Untersuchen aus. Oder drücken Sie STRG+UMSCHALT+I (Windows, Linux) oder BEFEHL+WAHL+I (macOS). DevTools wird geöffnet.

  2. Wählen Sie in DevTools auf der Aktivitätsleiste oder in der Schnellansicht die Registerkarte Rendering aus. Wenn diese Registerkarte nicht angezeigt wird, klicken Sie auf die Schaltfläche Weitere Tools (Symbol weitere Tools).

  3. Wählen Sie in der Dropdownliste Emulate CSS media feature prefers-color-scheme die Option prefers-color-scheme: dark oder prefers-color-scheme: light aus:

    Emulieren des dunklen oder hellen Modus mit dem Renderingtool

    Die gerenderte Webseite wird so gerendert, als hätte der Benutzer den dunklen oder hellen Modus in ihrem Betriebssystem ausgewählt. Die Webseite verwendet das CSS, das Sie für diesen Modus angegeben haben.

  4. Ändern Sie Ihren CSS-Code, und zeigen Sie das gerenderte Ergebnis auf die gleiche Weise an wie bei jeder anderen Webseite. Weitere Informationen finden Sie unter Erste Schritte zum Anzeigen und Ändern von CSS.

  5. Wählen Sie zum Wiederherstellen der Einstellung im Renderingtool in der Dropdownliste Emulate CSS media feature prefers-color-scheme (Css-Medienfeature emulieren)die Option Keine Emulation aus. Die Einstellung Ihres eigenen Betriebssystems für den hellen oder dunklen Modus wird angewendet.

Simulieren des dunklen oder hellen Modus mithilfe des Befehlsmenüs

  1. Wenn DevTools den Fokus hat, öffnen Sie das Befehlsmenü , indem Sie STRG+UMSCHALT+P (Windows, Linux) oder BEFEHL+UMSCHALT+P (macOS) drücken.

  2. Geben Sie dunkel, hell oder emulieren ein, wählen Sie EMULATE CSS prefers-color-scheme: dark oder Emulate CSS prefers-color-scheme: light aus, und drücken Sie dann die EINGABETASTE:

    Emulieren des dunklen oder hellen Modus mithilfe der Befehle

    Die gerenderte Webseite wird so gerendert, als hätte der Benutzer den dunklen oder hellen Modus in ihrem Betriebssystem ausgewählt. Die Webseite verwendet das CSS, das Sie für diesen Modus angegeben haben.

    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. Ändern Sie Ihren CSS-Code, und zeigen Sie das gerenderte Ergebnis auf die gleiche Weise an wie bei jeder anderen Webseite. Weitere Informationen finden Sie unter Erste Schritte zum Anzeigen und Ändern von CSS.

  4. Um die Einstellung wiederherzustellen, geben Sie im Befehlsmenü emulate or scheme ein, und wählen Sie dann Do not emulate CSS prefers-color-scheme aus. Die Einstellung Ihres eigenen Betriebssystems für den hellen oder dunklen Modus wird angewendet.

Siehe auch

Das Renderingtool wird auch für die folgenden Aufgaben verwendet: