OS에서 다크모드를 지원하기 시작하다보니 웹에서도 슬슬 지원하기 시작하나보다.
페북 글에서 우연히 웹에서 다크모드에 관한 글을 보게 되었는데 좀 조사를 해봤다.
다음 링크에서 좀더 디테일하게 알 수 있고, css나 js로 처리할 수 있는 방법이 많다.
https://web.dev/prefers-color-scheme
다음 링크는 css로 다크모드 사용하기
https://css-tricks.com/dark-modes-with-css/
다음 링크에서 다크모드 지원 브라우저에 대하여 알 수 있다.
https://developer.mozilla.org/ko/docs/Web/CSS/@media/prefers-color-scheme
다음은 css media query로 다크모드 분기하는 방법
body {
background-color: lime;
}
@media (prefers-color-scheme: dark) {
body {
background-color: red;
}
}