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! 👋

a cartoon avatar of me by Andy Carolan

Sara hier. Ich bin:

  • ein alter Hase 🐇
    (seit 1999 als Teenager Websites gebaut)
  • und ein Neuling 🤯
    (habe 2022 vom Generell-Ingenieurwesen
    zur 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.

A recreation of how floaters look in vision. Another recreation of how floaters look in vision. Yet another recreation, including text 'People with severe floaters struggle to read text like this.'

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.

Recreation of dark mode showing the effects of strong astigmatism in one eye and in both eyes. Another recreation of astigmatism in dark mode. Another recreation of astigmatism in dark mode. Another recreation of astigmatism in dark mode. Another recreation of astigmatism in dark mode. Text 'I am the douche bag who makes people read white text on a black background.' Text 'I am the douche bag who makes people read white text on a black background.' - this time distorted.

wieso nicht beides?

GUTE FRAGe!

Beides!

Beides.

Beides ist gut.

*nicken*

Miguel and Tulio from The Road to El Dorado waggling their eyebrows at each other.

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!

Copyright Me, 2024

What a nice form!











Website name

Blog title

Blog post title

Blog post content

Comments

First!
Great post!
Very informative!

Copyright Me, 2024

What a nice form!











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.

andere system colors 🙄

How are you?

Yeah good, you?

Could be worse!

Nice weather, innit?

It's lovely! Storm tomorrow though.

Ooh I love a good storm!

screenshot of the same slide on FireFox

zu viel Kontrast?

Äh, was? sagen sie, die WCAG für Barrierefreiheit implementieren.

Aber einige Migränepatienten haben Probleme damit!

Neben prefers-color-scheme gibt es auch
prefers-contrast.

Mit filter: contrast() kann man den Kontrast verringern.

Kontrast verringern

Hellooooooo!
How are you?

Ahh schön, das beruhigt meine Augen und mein Gehirn.

color-mix() & transparency

How are you?
Yeah good, you?

Could be worse!
Nice weather, innit?

It's lovely! Storm tomorrow.
Ooh I love a good storm!

prefers-color-scheme

Das folgt System-Präferenz,
nicht color-scheme modus.

How are you?
Yeah good, you?

Could be worse!
Nice weather, innit?

light-dark()

Neulich in alle Browsers,
~80% Abdeckung, spannend!

How are you?
Yeah good, you?

Could be worse!
Nice weather, innit?

manuelles Umschalten ermöglichen

Willst du den Web nicht im Betriebssystem-Farbschema anzeigen? Mit prefers-color-scheme, ist das nervig.

Wir mussten es überschreiben oder CSS verdoppeln.

Das ist jetzt einfacher! 🎉

Können wir es nur mit CSS machen? 🤔

:has() rockt!

Einschränkungen

Ganz ohne JavaScript, bist du schnell eingeschränkt.

:has() ist ja magisch, aber nur pro Seite.

Gewälhter mode ist beim Blättern der Site nicht gespeichert.

Du kannst <button>s nicht verwenden, wenn du willst!

Welches JavaScript brauchen wir also?

Jeremy Keith's maxim

"JavaScript should only do what only JavaScript can do."

JavaScript sollte nur das tun, was nur JavaScript tun kann.

Jeremy Keith standing in front of a screen at a conference.

einfache Functions

juhuu, Buttons!

Supi, jetzt können wir Buttons verwenden, aber das geht noch nur pro Seite und ist weg, als die Seite neu geladen wird ♻️

Wir müssen die Präferenzen die Benutzer*innen speichern.

Wir können sessionStorage oder localStorage benutzen.

sessionStorage bleibt pro Besuch einer Domain.
localStorage bleibt zwischen den Besuchen, im Browserdaten.

zu localStorage speichern

Button-Status anzeigen

Die drei Buttons sind nett, aber was ist der aktuelle mode? 🤔

Es ist nicht allzu schwierig, mit JS eine class auf die aktive Button festzulegen.

Verwenden wir das vorhandene aria-pressed-Attribut!

Genau dafür ist es gedacht und hat den Vorteil, dass ein Screenreader auch ankündigt, welche Option gerade aktiv ist.

aria-pressed für Buttons benutzen

Zusammenfassend

color-scheme: light dark; nutzen

color-mix() mit Canvas & CanvasText testen

Mit light-dark() anfangen

Kontrasteinstellungen des Benutzers berücksichtigen

Experimentieren und spielen :)

Mitgebsel: Wahlmöglichkeit bieten

light mode dark mode
mehr Kontrast Moin! Moin!
weniger Kontrast Moin! Moin!

ich will mehr!

Come to the light-dark() Side - ich!

Improved dark mode default styling with the color-scheme CSS property and the corresponding meta tag - Thomas Steiner

What I've learned about CSS color-scheme and friends.
- Apple Annie

CSS color-scheme-dependent colors with light-dark() - Bramus

vielen Dank!

Lieben Dank für die Einladung, Joschi!

🙏💖♿


🏠 sarajoy.dev
🦋 (Bluesky) @sjoy.lol
🦣 @sarajw@front-end.social
🛝 technica11y2024nov.netlify.app