Ich habe meine eigenen Folien zusammengestellt. War nicht der beste Plan, es ist wirklich ziemlich wackelig!
Klicken Sie, um die umzuschalten, oder bewegen Sie den Cursor nach unten links und klicken Sie dort auf die Button „Slideshow“.
Unten rechts gibt es eine weitere Button für den , über die Sie schweben können, um zwischen den Modi „Hell“, „Dunkel“ und „Automatisch“ umzuschalten.
Andernfalls können Sie mit Ihren Pfeiltasten herumblättern und das Wackeln genießen!
Es wurde so gestaltet, dass es im Seitenverhältnis 16:9 am besten aussieht.
wieso nicht beides? 🤔
a.k.a. Light mode Vs Dark mode.
Oder, wie einfach es ist, dunkle und helle Themen gleichzeitig zu erstellen.
moin! 👋
Sara hier. Ich bin:
ein alter Hase 🐇
(seit 1999 als Teenager Websites gebaut)
und ein Neuling 🤯
(habe 2022 vom Generell-Ingenieurwesenzur Webentwicklung gewechselt)
ein Warning
In diesen Folien gibt es Bewegungen, Animationen und abrupte Wechsel zwischen dem dunklen und hellen Modus.
Wenn ihr unter Migräne, Epilepsie oder starkem Astigmatismus leiden - das tut mir leid! 😓
Ich hoffe, dass mit den Informationen die ich Ihnen hier vorstelle, das Surfen im Internet für alle noch komfortabler wird.
dark mode vs. light mode
Wir lieben ja eine gute, polarisierende Diskussion(!)
Es gibt aber physikalische Gründe, das eine dem anderen vorzuziehen.
Und ihr dürft auch Websites mit hellem oder dunklem Design besser mögen, ohne ein guter oder logischer Grund dafür!
Deine Augen, deine Wahl! 👀
warum dark mode?
Bei einer hellen Webseite verengen sich die Pupillen.
Zu viel Kontrast zur dunklen Umgebung.
Glaskörperflocken verzerren oder blockieren die Sicht.
warum light mode?
Bei einer hellen Webseite verengen sich die Pupillen!
Es ist leichter zu fokussieren, wenn die Pupille kleiner ist.
Astigmatismus erschwert das Lesen heller Texte in dark mode.
Astigmatismus erschwert das Lesen heller Texte in dark mode.
wieso nicht beides?
GUTEFRAGe!
Beides!
Beides.
Beides ist gut.
*nicken*
der Umfang dieses Vorstellung
Beinhaltet:
Den Website auf prefers-color-scheme responsiv machen.
..gemäß den Einstellungen des Betriebssystems.
Manuelles Umschalten des color-scheme zulassen.
Die Betriebssystemeinstellungen werden ignoriert.
von vorne beginnen
Kein Styles, kein Problem!
Aber...
Dies ist schwierig, in eine ausgereifte Website zu integrieren.
Noch schwieriger, wenn alle Farben bereits zugewiesen sind.
Denk daran, wenn du das nächste neue Projekt startest 🌱
default HTML themes
Website name
Blog title
Blog post title
Blog post content
Comments
First!Great post!Very informative!
Website name
Blog title
Blog post title
Blog post content
Comments
First!Great post!Very informative!
color-scheme
Du brauchst noch kein CSS dafür!
<!-- in HTML -->
<head>
<meta name="color-scheme" content="light dark">
</head>
/* in CSS: */
:root /* or html */ {
color-scheme: light dark;
}
color-scheme demo
system colors
Hellooooooo!
How are you?
Du kannst auf die meisten Elemente color-scheme anwenden.
Aber - die müssen zuerst sowohl eine color als auch eine
background-color zugewiesen werden.
