logo image
메인
기술
HOME
기술

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

1
목록
#prefers-color-scheme #다크모드
요즘 다음 뉴스도 적용되었길레 조사해봤음.

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

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

chrome 76부터 지원
사파리 12.1 부터 지원
IOS 사파리 13 부터 지원
목록
댓글
  • / /
  • No Nickname
    No Comment
  • 권한이 없습니다.
    {{m_row.m_nick}}
    -
목록형 📷 갤러리형
제목
[기본형] HTML (with 부트스트랩5.3 , jquery 3.7, vue.js)
유용한 리눅스(LINUX) 명령어
[공지] 기술 게시판
일
월
화
수
목
금
토
3.31
4.1
4.2
4.3
4.4
4.5
4.6
4.7
4.8
4.9
game_tictactoe
4.10
4.11
4.12
4.13
4.14
4.15
4.16
4.17
:scope selector , querySelector 에서 this, self node 지정
4.18
4.19
4.20
4.21
4.22
4.23
ui_treemap
4.24
4.25
4.26
4.27
4.28
4.29
4.30
5.1
5.2
5.3
5.4
tag