How-to: Dark Mode in WebKit

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • How-to: Dark Mode in WebKit

    Moin zusammen,

    ich nutze in einer meiner iOS-Apps WKWebViews zur Darstellung von Berichten in HTML/CSS. An dieser Stelle gab es bisher einen Bruch beim Wechsel in den Dark Mode, den ich gerade behoben habe. Sehr einfach, nicht auf meinem Mist gewachsen und Euch vielleicht schon lange bekannt - dann sorry für die Wiederholung. Aber vielleicht hilft es dem/der ein oder anderen:

    Letztlich muss man im simpelsten Fall nur ein color-schema-Property ergänzen. Möchte man Farben im Dark Mode explizit anders setzen, helfen entsprechende @media-Queries. So musste ich z. B. Tabellenhintergründe für Summenzeilen anpassen. Es geht natürlich noch vieles mehr, aber bei mir reduzierten sich die Anpassungen im CSS auf folgendes:

    CSS-Quellcode

    1. :root {
    2. color-scheme: light dark;
    3. --catsum-background-color: #eeeeee;
    4. --daysum-background-color: #dddddd;
    5. }
    6. @media (prefers-color-scheme: dark) {
    7. :root {
    8. --catsum-background-color: #333333;
    9. --daysum-background-color: #444444;
    10. }
    11. }
    12. tr.catsum {
    13. background-color: var(--catsum-background-color);
    14. }
    15. tr.daysum, tr.lastdaysum {
    16. background-color: var(--daysum-background-color);
    17. }
    Alles anzeigen
    Die entsprechenden Hinweise habe ich im WebKit-Blog gefunden.

    Schönen Rest-Sonntag, Mattes
    Diese Seite bleibt aus technischen Gründen unbedruckt.