Dark mode

@media (prefers-color-scheme: dark) {
...
}
:root {
--background-color: #fff;
--text-color: #333;
--link-color: #b52;
}
body {
background-color: var(--background-color);
color: var(--text-color);
}
a {
color: var(--link-color);
}
@media (prefers-color-scheme: dark) {
:root {
--background-color: #111416
--text-color: #ccc;
--link-color: #f96;
}
}
svg.activity-sparkline path {
stroke: var(--text-color);
}
header images
  1. For the gradient, there’s …gradients!
  2. background-image: linear-gradient( to right, transparent 50%, var( — background-color) 100% );
LEGO clone trooper
Brighton bandstand
Scaffolding
Tokyo
Florence
dark mode
@media (prefers-color-scheme: dark) {
img {
filter: brightness(.8) contrast(1.2);
}
}
:root {
color-scheme: light dark;
}
<meta name="supported-color-schemes" content="light dark">
<picture>
<source media=”prefers-color-scheme: dark” srcset=”https://api.mapbox.com/styles/v1/mapbox/dark-v10/static...">
<img src=”https://api.mapbox.com/styles/v1/mapbox/outdoors-v10/static..." alt=”map”>
</picture>

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jeremy Keith

Jeremy Keith

A web developer and author living and working in Brighton, England. Everything I post on Medium is a copy — the originals are on my own website, adactio.com