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.

Das cusy Design-System bietet zwei verschiedene Design-Themen, wie auf der Seite Farbpaletten 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>
mapbox-Karte im Light-Mode
mapbox-Karte im Dark-Mode