개발자의 끄적끄적

[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

반응형
Comments