방문해 주셔서 감사합니다.
안녕하세요.
이번시간에는 CSS로 다크모드를 감지하고 다크모드일 때 CSS를 적용하는 방법에 대해 알아보겠습니다.
우리는 앞에서 미디어쿼리를 활용한 적이 있습니다.
반응형 웹을 만들 때 사용했었죠.
미디어 쿼리는 그 외에도 OS가 다크모드를 사용하는지 라이트모드를 사용하는지도 구분할 때 사용합니다.
prefers-color-scheme를 사용해서요.
@media(prefers-color-scheme: 모드){
CSS코드
}
모드는 dark또는 Light를 적습니다.
/* light mode */
@media(prefers-color-scheme: light){
CSS코드
}
/* dark mode */
@media(prefers-color-scheme: dark){
CSS코드
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
*{margin:0;padding:0}
@media(prefers-color-scheme: light){
html{background:#fff;color:#000}
}
@media(prefers-color-scheme: dark){
html{background:#000;color:#ccc}
}
</style>
<title>everdevel</title>
</head>
<body>
<header>
<h1>everdevel</h1>
</header>
</body>
</html>
결과는 바로 아래에서 확인하겠습니다.
제가 사용하는 MacOS에서 라이트 모드로 변경을 한 후 결과를 보면..
라이트모드 결과
제가 사용하는 MacOS에서 다크 모드로 변경을 한 후 결과를 보면..
다크모드 결과
제가 지금 다른곳에 정신이 팔려있는것 같습니다.
다음 강좌를 원하시면
아래의 요청하기 버튼을 눌러주세요.
컨텐츠의 내용을 더 보려면 바로 아래에서 확인할 수 있습니다.
컨텐츠
더보기
댓글 0개
정렬기준
