# 511-Supporting Dark Mode in Your Web Content

# Background and Text Color

:root {
  color-scheme: light dark; 
  --post-title-color: #333;
  --header-bg-color: #593a78;
  --header-txt-color: white;
}
@media (prefers-color-scheme: dark) {
  :root {
    --post-title-color: white;
    --header-bg-color: #513d66;
    --header-txt-color: #eee;
  }
}

h1 {
  color: var(--post-title-color);
}
.header {
  background-color: var(--header-bg-color);
  color: var(--header-txt-color);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# Image

<picture>
  <source srcset="mojave-night.jpg" media="(prefers-color-scheme: dark)">
  <img src="mojave-day.jpg">
</picture>

1
2
3
4

# Debug

Safari 支持 Dark Mode调试