Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Make elements of a website adapt to iOS/macOS display mode changes automatically
/* 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);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment