[HTML] prefers-color-scheme . html에 다크모드에 맞춰서 스타일 변경하기 [펌]

개발/html & css

효벨 2020. 5. 27. 09:51

728x90

요즘 다음 뉴스도 적용되었길레 조사해봤음.

prefers-color-scheme 값은 light와 dark 만 가질 수 있다.
나머지 다른 값들은 무시됨.

chrome 76부터 지원
사파리 12.1 부터 지원
IOS 사파리 13 부터 지원

[ ▼ 참고 Source ]

.themed {

display: block;

width: 10em;

height: 10em;

background: black;

color: white;

}

/* light 모드일 때의 스타일 재선언 */

@media (prefers-color-scheme: light) {

.themed {

background: white;

color: black;

}

/* dark 모드일 때의 스타일 재선언 */

@media (prefers-color-scheme: dark) {

.themed {

background: black;

color: white;

}