개발자의 끄적끄적

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

개발/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;

  }

}

 

 

출처 : phpschool.com/link/tipntech/82532

반응형
저작자표시 비영리 변경금지

'개발 > html & css' 카테고리의 다른 글

[html/css] IE img label for 클릭 안될때 처리방법  (0) 2020.06.15
[html/css] 버튼 정렬 방법  (0) 2020.06.02
[HTML] referrerpolicy 으로 외부 링크 금지 이미지 회피 [펌]  (0) 2020.05.23
[css] IE에서 Input 태그안에 있는 Clear Button 지우는 법 [펌]  (0) 2020.05.14
[css] 단위별 폰트크기(px, em, %, pt)  (0) 2020.03.02
'개발/html & css' Related Articles more
Comments