dark mode for web on redgoose note

dark mode for web

Nest: Development Category: html/css 2019-07-09

img_5b6369346c3a6xpngxpagespeedxcextZex31AUe0.png

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;
  }
}