Make elements of a website adapt to iOS/macOS display mode changes automatically

dark-light.css

/* define some global values */
:root {
    color-scheme: light dark; /* this is required so iOS knows we support display modes at all */

    --system-color-blue: rgb(0 122 255 / 1.0);
    --system-color-green: rgb(52 199 89 / 1.0);
    --system-color-indigo: rgb(88 86 214 / 1.0);
    --system-color-orange: rgb(255 149 0 / 1.0);
    --system-color-pink: rgb(255 45 85 / 1.0);
    --system-color-purple: rgb(175 82 222 / 1.0);
    --system-color-red: rgb(255 59 48 / 1.0);
    --system-color-teal: rgb(90 200 250 / 1.0);
    --system-color-yellow: rgb(255 204 0 / 1.0);

    --system-color-gray: rgb(142 142 147 / 1.0);
    --system-color-gray2: rgb(174 174 178 / 1.0);
    --system-color-gray3: rgb(199 199 204 / 1.0);
    --system-color-gray4: rgb(209 209 214 / 1.0);
    --system-color-gray5: rgb(229 229 234 / 1.0);
    --system-color-gray6: rgb(242 242 247 / 1.0);

    @media (prefers-color-scheme: light) {
        /* do things in light mode */
    }

    @media (prefers-color-scheme: dark) {
        /* set different color values for dark mode */
        --system-color-blue: rgb(10 132 255 / 1.0);
        --system-color-green: rgb(48 209 88 / 1.0);
        --system-color-indigo: rgb(94 92 230 / 1.0);
        --system-color-orange: rgb(255 159 10 / 1.0);
        --system-color-pink: rgb(255 55 95 / 1.0);
        --system-color-purple: rgb(191 90 242 / 1.0);
        --system-color-red: rgb(255 69 58 / 1.0);
        --system-color-teal: rgb(100 210 255 / 1.0);
        --system-color-yellow: rgb(255 214 10 / 1.0);

        --system-color-gray: rgb(28 28 30 / 1.0);
        --system-color-gray2: rgb(44 44 46 / 1.0);
        --system-color-gray3: rgb(58 58 60 / 1.0);
        --system-color-gray4: rgb(72 72 74 / 1.0);
        --system-color-gray5: rgb(99 99 102 / 1.0);
        --system-color-gray6: rgb(142 142 147 / 1.0);
    }
}

/* colors set via these variables will automatically adapt to either display mode */
body {
    background-color: var(--system-color-gray);
    color: var(--system-color-gray6);
}