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: rgba(0,122,255,1);
    --system-color-green: rgba(52,199,89,1);
    --system-color-indigo: rgba(88,86,214,1);
    --system-color-orange: rgba(255,149,0,1);
    --system-color-pink: rgba(255,45,85,1);
    --system-color-purple: rgba(175,82,222,1);
    --system-color-red: rgba(255,59,48,1);
    --system-color-teal: rgba(90,200,250,1);
    --system-color-yellow: rgba(255,204,0,1);

    --system-color-gray: rgba(142,142,147,1);
    --system-color-gray2: rgba(174,174,178,1);
    --system-color-gray3: rgba(199,199,204,1);
    --system-color-gray4: rgba(209,209,214,1);
    --system-color-gray5: rgba(229,229,234,1);
    --system-color-gray6: rgba(242,242,247,1);
}

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

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

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

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