CSS:prefers-color-scheme
prefers-color-scheme CSS 미디어 특성은 사용자의 시스템이 라이트 테마나 다크 테마를 사용하는지 탐지하는 데에 사용됩니다.
Dark Mode Tricks
CSS Custom Properties may be useful
This reminds me of an excellent post by Marcin Wichary where he explores a similar technique and goes one step further by adding all sorts of filters to make sure they have a much higher contrast.
html {
--text-color-normal: #0a244d;
--text-color-light: #8cabd9;
}
html[data-theme='dark'] {
--text-color-normal: hsl(210, 10%, 62%);
--text-color-light: hsl(210, 15%, 35%);
--text-color-richer: hsl(210, 50%, 72%);
--text-color-highlight: hsl(25, 70%, 45%);
}
Dark mode by default
Remember you can reverse it and go dark by default but change to a light theme if a user specifically wants it:
body {
background-color: black;
color: white;
}
@media screen and (prefers-color-scheme: light) {
body {
background-color: white;
color: black;
}
}