개발/html & css
[HTML] prefers-color-scheme . html에 다크모드에 맞춰서 스타일 변경하기 [펌]
효벨
2020. 5. 27. 09:51
728x90
반응형
[HTML] prefers-color-scheme . html에 다크모드에 맞춰서 스타일 변경하기 [펌]
요즘 다음 뉴스도 적용되었길레 조사해봤음.
prefers-color-scheme 값은 light와 dark 만 가질 수 있다.
나머지 다른 값들은 무시됨.
chrome 76부터 지원
사파리 12.1 부터 지원
IOS 사파리 13 부터 지원
[ ▼ 참고 Source ]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.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; } } |
반응형