Design-Themen¶
Mithilfe von Design-Themen können vorhandene Komponenten an einen bestimmten visuellen Stil angepasst werden. Dabei werden im cusy Design-System meist nur eine Reihe universeller Variablen geändert und die meisten Komponenten passen sich dann automatisch an. Lediglich in Ausnahmefällen müssen einzelne Komponenten geändert werden.
Einige Vorteile des Dark-Theme:
reduzierte Blaulicht-Emission, was den Schlafrhythmus positiv beeinflusst
weniger Lichtverschmutzung, gut für nachtaktive Lebewesen und Astronomen
verringert den Stromverbrauch v.a. bei OLED-Bildschirmen
mindert Augenbelastung, besonders in dunkleren Umgebungen
erhöht Lesbarkeit für manche Menschen
kann Konzentration und Fokus verbessern
Das cusy Design-System bietet zwei verschiedene Design-Themen, wie auf der Seite Farbe gezeigt: Dark und Light. Beide Themen können in CSS angegeben werden mit:
:root {
color-scheme: light dark;
}
Um nicht die Farbe jedes Elements im DOM überschreiben zu müssen, sollten die CSS-Anweisungen bei benutzerdefinierten Eigenschaften oder Variablen beginnen:
:root {
--background-color: #161616;
--text-color: #f4f4f4;
--link-color: #78a9ff;
}
body {
background-color: var(--background-color);
color: var(--text-color);
}
a {
color: var(--link-color);
}
Das Light-Thema wird dann in einer @media
-Anweisung definiert:
@media (prefers-color-scheme: light) {
:root {
--background-color: #ffffff;
--text-color: #161616;
--link-color: #0f62fe;
}
}
Dabei ist jedoch zu beachten, dass Grafiken und Bilder auf unterschiedlichen Hintergründen meist anders dargestellt werden sollten. Für SVG-Dateien können die Farben einfach überschrieben werden, z.B. mit:
svg.activity-sparkline path {
stroke: var(--text-color);
}
Bei Fotos genügt im allgemeinen, sie etwas aufzuhellen und den Kontrast zu reduzieren:
@media (prefers-color-scheme: light) {
img {
filter: brightness(1.24) contrast(0.81);
}
}
Manchmal lassen sich bestehende Bilder jedoch nicht einfach optimieren und sollten dann durch andere Bilder ersetzt werden:
<picture>
<source
srcset="light.png"
media="(prefers-color-scheme: light)"></source>
<img src="dark.png" alt="Figure against a dark background"/>
</picture>
Schließlich stehen auch für die Darstellung von mapbox-Karten ein Dark Mode und ein Light Mode zur Verfügung. Diese können verwendet werden mit:
<picture>
<source
media="(prefers-color-scheme: light)"
srcset="https://api.mapbox.com/styles/v1/mapbox/light-v10/static…">
<img
src="https://api.mapbox.com/styles/v1/mapbox/dark-v10/static…"
alt="map">
</picture>

