This content originally appeared on @mdo and was authored by Mark Otto
Dark mode is finally coming to CSS, and you can start experimenting with it thanks to Safari Technology Preview. With their latest release, the experimental browser includes support for the prefers-color-scheme media query. Variables in CSS are also coming, making dynamic light and dark modes for your visitors easier than ever.
Here’s an abbreviated set of the variables and media query I’ve put to use for my sites.
:root {
--body-bg: #fafafa;
--body-color: #555;
--link-color: #222;
--link-color-hover: #000;
}
@media (prefers-color-scheme: dark) {
:root {
--body-bg: #212529;
--body-color: #6c757d;
--link-color: #dee2e6;
--link-color-hover: #fff;
}
}
You should use this time to experiment with how you’d adapt your own styles to put the new media query to work. For example, picking the dark colors for my site wasn’t too difficult, but I found screenshots were far too intense for comfortable reading. A quick opacity and transition brings some added comfort while reading at night.
@media (prefers-color-scheme: dark) {
img {
opacity: .75;
transition: opacity .5s ease-in-out;
}
img:hover {
opacity: 1;
}
}
This content originally appeared on @mdo and was authored by Mark Otto
Mark Otto | Sciencx (2018-11-05T00:00:00+00:00) CSS dark mode. Retrieved from https://www.scien.cx/2018/11/05/css-dark-mode/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.