Themes

Mithilfe von Themes 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 Themes, wie auf der Seite Farbpaletten gezeigt: Dark und Light. Beide Themes 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-Theme 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