# Dark Mode

## HTML Image

To show a different image in dark mode.

<picture>
   <source srcset="dark.png" media="(prefers-color-scheme: dark)">
   <img src="bright.png">
</picture>

## CSS

The `prefers-color-scheme` CSS media feature is used to detect if the user has requested the system use a light or dark color theme.

.day { background: #eee; color: black; }
.night { background: #333; color: white; }

@media (prefers-color-scheme: dark) {
   .day.dark-scheme { background: #333; color: white; }
   .night.dark-scheme { background: black; color: #ddd; }
}

@media (prefers-color-scheme: light) {
   .day.light-scheme { background: white; color: #555; }
   .night.light-scheme { background: #eee; color: black; }
}

## JavaScript

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
   // dark mode
}

## Resource
[prefers-color-scheme - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme)

###### tags: `UI` `UX` `CSS` `JavaScript`