mapbox / assembly

Making the hard parts of designing for the web easy.
https://www.mapbox.com/assembly/
133 stars 27 forks source link

Build with inverted colors to support dark mode #954

Open tristen opened 3 years ago

tristen commented 3 years ago

This might be a nice way of supporting dark mode in Studio: either by automatically supporting an inversion for some color:

.bg-white { background: #FFF; }

@media (prefers-color-scheme: dark) {
  .bg-white { background: #000; }
}

Or creating additional classes to target what the inversion should be:

@media (prefers-color-scheme: dark) {
  .bg-white--dark-mode { background: #FFF; }
}
samanpwbb commented 3 years ago

Here's how tailwind does dark mode: https://tailwindcss.com/docs/dark-mode