Clever Geek Handbook

Dunkler Modus: Hallo Dunkelheit, mein alter Freund

Der Dunkelmodus bleibt ein wichtiger Trend im Website- und App-Design. Wir haben einen großartigen Artikel zu diesem Thema gefunden und beschlossen, die Übersetzung zu teilen. Die Meinung der Benutzer, die Implementierung und Unterstützung des Dark-Modus sowie Empfehlungen für Entwickler finden Sie weiter unten im Artikel. Auf welcher Seite bist du?


Nur ein Hype oder eine Notwendigkeit? Erfahren Sie mehr über den Dunkelmodus. Ich zeige Ihnen, wie Sie die Unterstützung des Dunkelmodus zum Nutzen Ihrer Benutzer hinzufügen können!



Einführung



Zu diesem Thema führte ich eine umfangreiche Studie durch und studierte die Geschichte des Themas. Wenn Sie nur im Dunkelmodus arbeiten möchten, können Sie den ersten Abschnitt überspringen.



Dunkler Modus, bevor er zum Mainstream wurde



Green Screen ( Quelle )



Die Geschichte sei zyklisch. In der Situation im dunklen Modus sind wir wieder da, wo alles begann. In den frühen Tagen von PCs war der Dunkelmodus die einzige Option: Monochrome CRT-Monitore, die durch Bestrahlung eines phosphoreszierenden Bildschirms mit Elektronenstrahlen betrieben wurden, und der in frühen CRTs verwendete Leuchtstoff war grün. Da der Text grün angezeigt wurde und der Rest des Bildschirms schwarz war, wurden diese Modelle häufig als grüne Bildschirme bezeichnet .



Dunkel auf Weiß ( Quelle )



Anschließend zeigten Farb-CRT-Displays mithilfe von roten, grünen und blauen Leuchtstoffen mehrere Farben. Sie erzeugten Weiß, indem sie alle drei Leuchtstoffe gleichzeitig aktivierten. Mit dem Aufkommen modernerer Desktop-Publishing- und WYSIWYG- Technologie ist die Idee, ein virtuelles Dokument wie ein echtes Blatt Papier aussehen zu lassen, populär geworden.



Browser WorldWideWeb ( Quelle )



Zu diesem Zeitpunkt im Design wurde der Trend "Dunkel auf Weiß" geboren, der auf den ersten Websites im Netzwerk implementiert wurde - sie ähnelten eher Textdokumenten.



Der weltweit erste Browser, WorldWideWeb (stellen Sie sich vor, CSS wurde noch nicht erfunden ), hat Webseiten auf diese Weise gerendert . Unterhaltsame Tatsache: Der zweite Line Mode Browser (Terminal-basierter Browser) war bei Dunkelheit grün. Heutzutage werden Webseiten und Anwendungen normalerweise mit dunklem Text auf hellem Hintergrund erstellt, was die akzeptierte Norm ist. Dieses Farbschema ist in die Stylesheets moderner Benutzeragenten integriert, darunter beispielsweise Chrome....





Verwenden von Smartphones ( Quelle ) Die



Zeiten der CRT-Monitore sind lange vorbei. Wir verbrauchen und erstellen jetzt eine große Menge an Inhalten auf Mobilgeräten, die hintergrundbeleuchtete LCDs oder energieeffiziente AMOLED-Displays verwenden. Kleinere und praktischere Computer, Tablets und Smartphones haben zu neuen Mustern des Benutzerverhaltens geführt. In unserer Freizeit verschwinden wir in sozialen Netzwerken, programmieren zum Spaß oder spielen Computerspiele. Dies geschieht normalerweise nach der Arbeit am Abend bei schwachem Licht oder sogar nachts im Bett vor dem Schlafengehen. Je mehr Menschen ihre Geräte im Dunkeln benutzen, desto beliebter wird der Dunkle Modus.



Warum den dunklen Modus wählen?



Aus ästhetischen Gründen

Wenn Menschen gefragt werden, warum sie den dunklen Modus mögen , lauten die beliebtesten Antworten "Es ist angenehmer für die Augen" oder "Dunkler Modus ist schön". Apple sagt in seiner Entwicklerdokumentation für den Dunklen Modus offen: "Die Wahl von Dunkel oder Hell für die meisten Benutzer basiert auf ästhetischen Vorlieben und ist möglicherweise für die Lichtverhältnisse nicht relevant."



Erfahren Sie in der Studie mehr darüber, warum Menschen den dunklen Modus lieben und wie man ihn benutzt.





System 7 CloseView ( Quelle )



Dark Mode als Barrierefreiheits-Tool für Menschen mit Behinderungen

Einige Benutzer müssen den Dunkelmodus verwenden: Sehbehinderte Benutzer verwenden beispielsweise den Dunkelmodus als Eingabehilfen. Die früheste Verwendung des Dunkelmodus als Eingabehilfen, die ich finden konnte, war die CloseView-Funktion in System 7 mit der Möglichkeit, das Farbschema von Schwarz auf Weiß und Weiß auf Schwarz zu ändern. Obwohl System 7 eine Farboberfläche unterstützte, war die Standardbenutzeroberfläche Schwarzweiß.



Diese inversionsbasierte Methode hat ihre Schwächen gezeigt, nachdem die Anzahl der Farben in der Benutzeroberfläche erhöht wurde. Sarit Szpiro und ein Forscherteam führten eine Umfrage durchBenutzer darüber, wie sehbehinderte Menschen mit Computergeräten umgehen. Als Ergebnis stellte sich heraus, dass alle Befragten keine invertierten Farben mochten, aber viele bevorzugten hellen Text auf dunklem Hintergrund. Apple adressiert diese Benutzerpräferenz mit Smart Invert , das die Farben auf dem Display ändert, ausgenommen Bilder, Medien und einige Anwendungen, die dunkle Farbstile verwenden.



Eine spezielle Form der Sehbehinderung ist das Computer-Vision-Syndrom, auch als digitale Augenbelastung bekannt. Diese Begriffe bedeutenverschiedene Sehprobleme, die mit der häufigen Verwendung von Computern (Desktops, Laptops und Tablets) und anderen elektronischen Geräten (Smartphones und E-Books) verbunden sind. Wissenschaftler spekulieren, dass die Verwendung elektronischer Geräte durch Jugendliche, insbesondere nachts, mit einem erhöhten Risiko für Schlafstörungen, Schlaflosigkeit und Schlafentzugssyndrom verbunden ist. Nach anderen Studien ist die Wirkung von blauem Licht beteiligt an der Regulation des zirkadianen Rhythmusund der Schlafzyklus und eine unregelmäßige Lichtumgebung können zu Schlafentzug führen, der die Stimmung und Effizienz einer Person bei der Ausführung von Aufgaben beeinflusst. Sie können die negativen Auswirkungen begrenzen, indem Sie die Menge an blauem Licht reduzieren, indem Sie die Farbtemperatur des Displays anpassen (Funktionen wie iOS Night Shift oder Android Night Light ) oder indem Sie helles oder unregelmäßiges Licht im Allgemeinen mit Dark Theme oder Mode verhindern.



Energiesparen im Dunkelmodus bei AMOLED-Displays



Es ist bekannt, dass der Dunkelmodus bei AMOLED-Displays viel Strom spart. Untersuchungen an beliebten Google-Apps wie YouTube haben gezeigt, dass die Energieeinsparung bis zu 60% betragen kann. Das folgende Video enthält weitere Details zu diesen Studien und Energieeinsparungen für jede Anwendung.







So aktivieren Sie den Dunkelmodus im Betriebssystem



Nachdem ich erläutert habe, warum der Dunkelmodus für viele Benutzer so wichtig ist, werfen wir einen Blick darauf, wie Sie ihn anpassen können.





Einstellungen für dunkle Designs unter Android Q



Betriebssysteme, die den dunklen Modus oder das dunkle Thema unterstützen, können normalerweise in den Einstellungen aktiviert werden. Unter macOS X befindet sich dies im Abschnitt "Allgemein" der Systemeinstellungen und wird als Darstellung ( Screenshot ) bezeichnet. Unter Windows 10 befindet es sich unter Farben mit der Bezeichnung "Wählen Sie Ihre Farbe" ( Screenshot ). Für Android Q können Sie den Modus auf Als dunkles Thema anzeigen ( Screenshot ) und in iOS 13 die Farbe der Benutzeroberfläche im Abschnitt Anzeige & Helligkeit ( Screenshot ) ändern .



- prefers-color-scheme



Noch ein bisschen Theorie, bevor ich fortfahre. Mithilfe von Medienabfragen können Autoren die Werte und Eigenschaften eines Benutzeragenten oder Geräts unabhängig vom Rendern des Dokuments testen und abfragen. Sie werden in der CSS-Medienregel verwendet, um Stile bedingt auf ein Dokument und in einigen anderen Kontexten und Sprachen wie HTML und JavaScript anzuwenden. Medienabfragen der Stufe 5 führen sogenannte vom Benutzer bevorzugte Medieneigenschaften ein. Dies ist ein Signal für Websites, die vom Benutzer bevorzugte Art der Anzeige von Inhalten zu ermitteln.



Mit dem CSS-Medieneigenschaftssatz mit reduzierter Bewegungsreduzierung kann bestimmt werden, ob der Benutzer das Betriebssystem auffordert, den Umfang der verwendeten Animation zu minimieren. Ich habe bereitsschrieb früher über bevorzugt-reduzierte-Bewegung .



Die CSS-Medieneigenschaft "Bevorzugtes Farbschema" wird verwendet, um zu bestimmen, welches Thema, hell oder dunkel, von einer Person auf dem Betriebssystem verwendet wird. Es funktioniert mit folgenden Werten:

  • Keine Präferenz : Zeigt an, dass der Benutzer dem System keine Präferenzen mitgeteilt hat. Dieses Schlüsselwort wird in einem logischen Kontext als falsch ausgewertet .
  • hell : Zeigt an, dass der Benutzer dem System mitgeteilt hat, dass er eine Seite mit einem hellen Thema (dunkler Text auf hellem Hintergrund) bevorzugt.
  • dunkel : Zeigt an, dass der Benutzer dem System mitgeteilt hat, dass er eine Seite mit einem dunklen Thema bevorzugt (heller Text auf dunklem Hintergrund).


Unterstützung für den dunklen Modus



Finden Sie heraus, ob der Dunkelmodus vom Browser unterstützt wird



Da der Dunkelmodus über eine Medienabfrage kommuniziert wird, können Sie leicht überprüfen, ob der aktuelle Browser den Dunkelmodus unterstützt, indem Sie herausfinden, ob die Medienabfrage mit dem bevorzugten Farbschema geeignet ist . Beachten Sie, dass ich keinen Wert einstelle, sondern nur die Medienabfrage auf Übereinstimmung überprüfe. 



if (window.matchMedia('(prefers-color-scheme)').media !== 'not all') {
  console.log(' Dark mode is supported');
}


Zum Zeitpunkt des Schreibens wird das bevorzugte Farbschema sowohl auf dem Desktop als auch auf dem Handy (sofern verfügbar) in Chrome und Edge ab Version 76, Firefox ab Version 67 und Safari ab Version 12.1 unter macOS und ab Version 13 unter iOS unterstützt. Bei allen anderen Browsern können Sie Informationen in dem Artikel finden Kann ich Unterstützung Tabellen .



Es ist ein benutzerdefiniertes <dark-mode-toggle> -Element verfügbar , das älteren Browsern die Unterstützung des Dunkelmodus hinzufügt. Ich werde darüber weiter schreiben .



Dunkler Modus in der Praxis



Lassen Sie uns einen Blick darauf werfen, wie die Unterstützung im dunklen Modus in der Praxis aussieht. Genau wie im Film "Highlander" kann es am Ende nur einen geben: dunkel oder hell! Warum konzentriere ich mich darauf? Weil diese Tatsache die Ladestrategie beeinflusst. Bitte zwingen Sie Benutzer nicht, CSS in einer kritischen Renderphase für einen Modus herunterzuladen, der derzeit nicht verwendet wird. Um die Ladegeschwindigkeit zu optimieren, habe ich mein CSS im Beispiel in drei Teile aufgeteilt, um das Laden von unkritischem CSS zu verzögern :



  • style.css enthält allgemeine Regeln, die auf der gesamten Site verwendet werden
  • dark.css enthält die Regeln, die für den Dunkelmodus benötigt werden
  • light.css enthält die Regeln, die nur für den Lichtmodus benötigt werden.


Ladestrategie



Die letzten beiden, light.css und dark.css, werden selektiv über eine <link media> -Anforderung geladen.



Zunächst nicht alle Browser unterstützt die vorzieht-Farbschema CSS - Medien Eigenschaft (mit dem gefundenen Beispiel oben ), wird dies durch die Auswahl des Standard light.css über ein Element in unserem Inline - Skript gelöst wird (Licht ist eine willkürliche Wahl, ich könnte auch dunkel Standard). Um zu vermeiden , unstyled Inhalt erscheint , blende ich den Seiteninhalt bis light.css geladen wird. 



<script>
  // If `prefers-color-scheme` is not supported, fall back to light mode.
  // In this case, light.css will be downloaded with `highest` priority.
  if (window.matchMedia('(prefers-color-scheme)').media === 'not all') {
    document.documentElement.style.display = 'none';
    document.head.insertAdjacentHTML(
        'beforeend',
        '<link rel="stylesheet" href="/light.css" onload="document.documentElement.style.display = ``">'
    );
  }
</script>
<!--
  Conditionally either load the light or the dark stylesheet. The matching file
  will be downloaded with `highest`, the non-matching file with `lowest`
  priority. If the browser doesn't support `prefers-color-scheme`, the media
  query is unknown and the files are downloaded with `lowest` priority (but
  above I already force `highest` priority for my default light experience).
-->

<link rel="stylesheet" href="/dark.css" media="(prefers-color-scheme: dark)">

<link rel="stylesheet" href="/light.css" media="(prefers-color-scheme: no-preference), (prefers-color-scheme: light)">
<!-- The main stylesheet -->
<link rel="stylesheet" href="/style.css">


Stylesheet-Architektur



Ich verwende CSS-Variablen , die es ermöglichen, dass style.css generisch ist. Alle Einstellungen für den Hell- oder Dunkelmodus erfolgen in zwei anderen Dateien: dark.css und light.css. Im Folgenden finden Sie ein Beispiel, das ausreichen sollte, um die allgemeine Idee zu erläutern. Ich deklariere zwei Variablen, -⁠-⁠Farbe und -⁠-⁠Hintergrundfarbe, die ein Dunkel-auf-Licht- und ein Hell-auf-Dunkel-Basisthema erzeugen. 



/* light.css:  dark-on-light */
:root {
  --color: rgb(5, 5, 5);
  --background-color: rgb(250, 250, 250);
}
/* dark.css:  light-on-dark */
:root {
  --color: rgb(250, 250, 250);
  --background-color: rgb(5, 5, 5);
}


Dann verwende ich in style.css diese Variablen im body {...} . Da sie in der CSS-Pseudoklasse definiert sind : root - ein Selektor, der das <html> -Element in HTML darstellt und mit dem HTML- Selektor identisch ist, mit der Ausnahme, dass seine Spezifität höher ist: Variablen werden kaskadiert, wodurch die Definition globaler CSS-Variablen ermöglicht wird. 



/* style.css */
:root {
  color-scheme: light dark;
}
body {
  color: var(--color);
  background-color: var(--background-color);
}


Im obigen Beispiel haben Sie wahrscheinlich die Eigenschaft Farbschema mit Hell-Dunkel- Werten bemerkt, die durch ein Leerzeichen getrennt sind.



Die Eigenschaft teilt dem Browser mit, welche Farbthemen meine Anwendung unterstützt, und ermöglicht es ihm, spezielle Variationen des Stylesheets des Benutzeragenten zu aktivieren. Dies ist beispielsweise nützlich, damit der Browser Formularfelder mit dunklem Hintergrund und hellem Text anzeigen, Bildlaufleisten anpassen oder themenbasierte Hervorhebungsfarben aktivieren kann. Die Details der Farbschemaeigenschaft sind im CSS- Farbanpassungsmodul Stufe 1 angegeben .



Erfahren Sie mehr über das Farbschema .



Alles andere ist nur CSS-Styling für den Rest des Markups, das ich auf meiner Site habe. Die semantische Organisation von Stilen hilft sehr bei der Arbeit mit dem dunklen Modus. Anstelle von -⁠-⁠Highlight-Yellow sollten Sie beispielsweise die Variable -⁠-⁠accent-color benennen , da „Yellow“ im Dunkelmodus möglicherweise nicht gelb ist oder umgekehrt. Unten finden Sie ein Beispiel für einige weitere Variablen, die ich verwende. 



/* dark.css */
:root {
  --color: rgb(250, 250, 250);
  --background-color: rgb(5, 5, 5);
  --link-color: rgb(0, 188, 212);
  --main-headline-color: rgb(233, 30, 99);
  --accent-background-color: rgb(0, 188, 212);
  --accent-color: rgb(5, 5, 5);
}
/* light.css */
:root {
  --color: rgb(5, 5, 5);
  --background-color: rgb(250, 250, 250);
  --link-color: rgb(0, 0, 238);
  --main-headline-color: rgb(0, 0, 192);
  --accent-background-color: rgb(0, 0, 238);
  --accent-color: rgb(250, 250, 250);
}


Detaillierte Analyse



Im folgenden Feld Glitch sehen Sie ein Beispiel, das in der Praxis alles verwendet, was oben beschrieben wurde. Versuchen Sie, den Dunkelmodus in den Einstellungen Ihres Betriebssystems umzuschalten, und sehen Sie, wie die Seite reagiert.



Auswirkungen auf die Download-Geschwindigkeit



Wenn Sie mit diesem Beispiel genug spielen , können Sie sehen, warum ich meine dark.css und light.css über Medienabfragen lade . Versuchen Sie, den Dunkelmodus umzuschalten und die Seite neu zu laden: Bestimmte, derzeit nicht übereinstimmende Stylesheets werden noch geladen, jedoch mit der niedrigsten Priorität, damit sie nicht mit den Ressourcen konkurrieren, die die Site derzeit benötigt.



Finden Sie heraus, warum Browser Stylesheets mit nicht übereinstimmenden Medienabfragen laden .



Die helle Website lädt die





dunklen Stile mit der niedrigsten Priorität: Die dunkle Website lädt die hellen Stile mit der niedrigsten Priorität:





Die Standardwebsite mit einem hellen Skin in einem Browser, der das bevorzugte Farbschema nicht unterstützt, lädt die dunklen Stile mit der niedrigsten Priorität:





So reagieren Sie auf Änderungen im Dunkelmodus



Wie bei jeder Änderung der Medienabfrage können Sie eine Änderung des Dunkelmodus über JavaScript abonnieren. Damit können Sie zum Beispiel , um dynamisch ändern das Seitensymbol oder ändern <meta name = „Thema-Farbe“> , die die Farbe der URL - Leiste in Chrom bestimmt. Das obige Beispiel zeigt, was in Aktion beschrieben wird. Öffnen Sie die Demo auf einer separaten Registerkarte , um zu sehen, wie sich das Thema und die Symbolfarbe ändern . 



const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
  darkModeMediaQuery.addListener((e) => {
    const darkModeOn = e.matches;
    console.log(`Dark mode is ${darkModeOn ? ' on' : '️ off'}.`);
  });


Best Practices für den dunklen Modus



Vermeiden Sie



reines Weiß Möglicherweise haben Sie ein kleines Detail bemerkt: Ich verwende kein reines Weiß. Um zu verhindern, dass der umgebende dunkle Inhalt leuchtet, habe ich stattdessen ein etwas dunkleres Weiß gewählt, etwa RGB (250, 250, 250) .



Ändern der Farbe und Abdunkeln von Fotos



Wenn Sie die beiden folgenden Screenshots vergleichen, werden Sie feststellen, dass sich nicht nur das Hauptthema von dunkel zu hell zu hell zu dunkel geändert hat, sondern dass das Bild etwas anders aussieht. Meine Umfrage ergab, dass die meisten Benutzer etwas weniger helle und gesättigte Bilder bevorzugen, wenn der Dunkelmodus aktiv ist. Ich nenne das Umfärben.



Bildfarben werden im dunklen Modus stumpfer







Bildfarben im Lichtmodus Sie können Bilder mit einem CSS-Filter neu einfärben. Ich verwende einen CSS-Selektor, der zu allen Bildern passt, deren URLs nicht .svg enthalten. Die Idee ist, dass ich Vektorgrafiken (Icons) anders behandeln kann, mehr dazu im nächsten Abschnitt . Beachten Sie, wie ich die CSS-Variable wieder verwende, damit ich meinen Filter später schnell ändern kann.



Erfahren Sie mehr über Benutzereinstellungen aus der Forschung .



Da das Neulackieren nur im Dunkelmodus erforderlich ist, dh wenn dark.css aktiv ist, gibt es in light.css keine entsprechenden Regeln. 



/* dark.css */
--image-filter: grayscale(50%);
img:not([src*=".svg"]) {
  filter: var(--image-filter);
}


Anpassen der Intensität der Neufärbung des Dunkelmodus mit JavaScript



Wir sind unterschiedlich, und jede Person hat ihre eigenen Vorstellungen davon, wie der Dunkelmodus genau aussehen soll. Wenn ich mich an die oben beschriebene Neufärbemethode halte, kann ich die Graustufenintensität leicht zu einer Benutzerpräferenz machen, die durch JavaScript geändert wird , und indem ich sie auf 0% setze, kann ich die Neufärbung vollständig deaktivieren. Beachten Sie, dass document.documentElement einen Link zum Stammelement des Dokuments bereitstellt, dh zu demselben Element, auf das ich mit der CSS-Pseudoklasse root verweisen kann . 



const filter = 'grayscale(70%)';
document.documentElement.style.setProperty('--image-filter', value);


Invertieren Sie Vektoren und Symbole



Für Vektorgrafiken (in meinem Fall als Symbole verwendet, auf die ich über <img> -Elemente verweise ) verwende ich eine andere Umfärbemethode. Während Forschung hat gezeigt , dass die Menschen nicht wie Foto - Inversion, es funktioniert sehr gut für die meisten Symbole. Ich verwende wieder CSS-Variablen, um den Inversionsgrad in normalen und : Schwebezuständen zu bestimmen .



: Icon wird in dunklen Modus invertiert







Icon in Lichtmodus:







Beachten Sie, wie ich wieder nur Invert - Symbole in dark.css aber nicht light.css , und wie : Hover In zwei Fällen werden unterschiedliche Inversionsintensitäten erzielt, damit das Symbol je nach vom Benutzer ausgewähltem Modus etwas dunkler oder etwas heller erscheint. 



/* dark.css */
--icon-filter: invert(100%);
--icon-filter_hover: invert(40%);
img[src*=".svg"] {
  filter: var(--icon-filter);
}
/* light.css */
--icon-filter_hover: invert(60%);
/* style.css */
img[src*=".svg"]:hover {
  filter: var(--icon-filter_hover);
}


Verwenden Sie currentColor für Inline-SVG



Anstatt inverse Filter für Inline-SVG-Bilder zu verwenden, können Sie das Schlüsselwort currentColor hinzufügen , das den Farbwert des Elements darstellt.



Auf diese Weise können Sie einen Farbwert für Eigenschaften festlegen, die ihn standardmäßig nicht erhalten. Wenn currentColor als Wert für die SVG- Füll- oder Strichattribute verwendet wird , wird der Wert von der geerbten Farbeigenschaft übernommen. Dies funktioniert auch für <svg> <use href = "…"> </ svg> , sodass Sie separate Ressourcen haben können und currentColor weiterhin im Kontext angewendet wird. Beachten Sie, dass dies nur für Inline oder <use href = "..."> funktioniertSVG, jedoch nicht für SVG, die als src-Bilder oder über CSS bezeichnet werden. Weitere Details hier . 



<!-- Some inline SVG -->
<svg xmlns="http://www.w3.org/2000/svg"
    stroke="currentColor"
>
  […]
</svg>


Reibungslose Übergänge zwischen den Modi



Der Wechsel von dunkel zu hell oder umgekehrt kann geglättet werden, da Farbe und Hintergrund animierbare CSS-Eigenschaften sind . Die Animation ist so einfach wie das Deklarieren von zwei Übergängen für zwei Eigenschaften. Das folgende Beispiel veranschaulicht die allgemeine Idee. 



body {
  --duration: 0.5s;
   --timing: ease;
  color: var(--color);
  background-color: var(--background-color);
  transition:
    color var(--duration) var(--timing),
    background-color var(--duration) var(--timing);
}


Künstlerisches Design mit dunklem Modus



Während ich aus Gründen der Ladeleistung im Allgemeinen empfehle, ausschließlich mit dem bevorzugten Farbschema im Medienattribut der Elemente zu arbeiten (und nicht in den Stylesheets inline), gibt es Situationen, in denen Sie möglicherweise tatsächlich mit dem bevorzugten Farbschema in Ihrem HTML-Code arbeiten möchten. der Code. Dekoration ist eine solche Situation. Künstlerisches Design - das gesamte visuelle Design der Seite: Wie wirkt sich die Website auf den Benutzer aus, welche Gefühle ruft sie hervor?



Im Dunkelmodus muss der Designer entscheiden, welches Bild ausgewählt werden soll und ob die Bilder neu eingefärbt werden sollen.geeignet. Mit dem Element <picture> kann das angezeigte Bild <source> vom Medienattribut abhängig gemacht werden. Im folgenden Beispiel zeige ich die westliche Hemisphäre für den Dunkelmodus und die östliche Hemisphäre für den Hellmodus oder, wenn keine Einstellungen angegeben sind, die Standardeinstellung für die östliche Hemisphäre. Die Bilder veranschaulichen natürlich nur mein Beispiel . Schalten Sie den Dunkelmodus Ihres Geräts ein, um den Unterschied zu erkennen. 



<picture>
  <source srcset="western.webp" media="(prefers-color-scheme: dark)">
  <source srcset="eastern.webp" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)">
  <img src="eastern.webp">
</picture>


Dunkelmodus deaktiviert



Wie oben erwähnt, wählen die meisten Benutzer den Dunklen Modus basierend auf ihrem Geschmack und ihren ästhetischen Vorlieben. Einige Benutzer möchten, dass ihre Benutzeroberfläche und ihre Webseiten so dunkel sind, wie sie es gewohnt sind. Aktionsplan: Warten Sie zuerst auf das Signal, das der Browser über das bevorzugte Farbschema sendet, und lassen Sie die Benutzer dann die Einstellungen auf Systemebene überschreiben, wenn sie möchten.



Benutzerdefiniertes Element <Dunkelmodusmodus>



Natürlich können Sie solchen Code selbst erstellen, aber Sie können einfach ein vorgefertigtes Element (Webkomponente) verwenden, das ich speziell für diesen Zweck erstellt habe. Es heißt <dark-mode-toggle> und fügt Ihrer Seite einen Umschalter (dunkler Modus: Ein / Aus) oder einen Themenumschalter (Thema: Hell / Dunkel) hinzu, den Sie vollständig anpassen können. Die Demo unten zeigt das Element in Aktion (oh, und ich habe es in allen anderen Beispielen oben diskret verwendet ). 



<dark-mode-toggle
    legend="Theme Switcher"
    appearance="switch"
    dark="Dark"
    light="Light"
    remember="Remember this"
></dark-mode-toggle>


<dunkle-mode-toggle> im hellen Modus:







<dark-mode-toggle> im dunklen Modus:







Klicken oder berühren Sie die Steuerelemente für den dunklen Modus in der oberen rechten Ecke der Demo unten. Wenn Sie die Kontrollkästchen im dritten und vierten Steuerelement aktivieren, sehen Sie, wie Ihre Moduswahl auch beim erneuten Laden von Seiten gespeichert wird. Auf diese Weise können Ihre Besucher ihr Betriebssystem im dunklen Modus halten, Ihre Website jedoch im hellen Modus genießen oder umgekehrt.



Fazit



Das Arbeiten mit und das Aufrechterhalten des dunklen Modus macht Spaß! Neue Gestaltungsmöglichkeiten eröffnen sich. Die Wahl eines dunklen Modus kann Ihren Benutzer glücklicher machen. Ja, es gibt Fallstricke, strenge Tests sind erforderlich, aber der Dunkelmodus ist eine großartige Gelegenheit, um zu zeigen, dass Sie sich um Ihre Benutzer kümmern. Die in diesem Artikel erwähnten Best Practices und ein Life-Hack wie das benutzerdefinierte <dark-mode-toggle> -Element sollten Ihnen dabei helfen, einen fantastischen dunklen Modus zu erstellen.



Nützliche Links



Medienabfrage mit bevorzugtem Farbschema :





Farbschema- Meta-Tag :





dark mode:





:





More articles:


All Articles