CSS 라이트 모드, 다크 모드 CSS - 자동으로 휴대폰 설정으로 적용하는 방법
페이지 정보
조회 1,106회 작성일 22-05-25 11:43
본문
라이트 모드, 다크 모드 CSS
자동으로 휴대폰 설정으로 적용하는 방법
여기서는 prefers-color-scheme를 사용한다. 이 방법을 이용하는 이유는 스마트폰의 설정을 자동으로 적용할 수 있기 때문이다.
단, 매우 간단하게 라이트 모드와 다크 모드를 변경하는 방법을 설명하므로, 아래의 원리를 이해한 후 여러 가지 설정을 추가해야 된다.
라이트 모드, 다크 모드 CSS - 자동으로 휴대폰 설정으로 적용하는 방법
자동으로 스마트폰 다크모드 적용
일반적인 다크 모드 적용은 홈페이지에서 다크 모드를 따로 선택한다. 그런데, 스마트폰 자체를 다크 모드로 설정하고 사용하는 사람도 많다.
그렇다면, 접속하자마자 휴대폰의 설정을 감지해서 다크모드로 보여주는 방법은 없을까?
그 방법이 바로 prefers-color-scheme CSS를 사용하는 것이다.
이 방법은 @media(미디어쿼리)를 사용하는 것이므로 css 파일에 저장해서 사용한다. 단, 이 자체가 다크모드를 보여주는 것은 아니다. 엄밀히 말하자면, 감지하는 쿼리라고 보면 되겠다.
단, 휴대폰 설정을 읽어 오는 것이므로 PC모드에서는 적용되지 않는다.
다크모드 적용 CSS 코드
매우 기본적인 방법은 아래와 같다. css 파일을 불러서 아래와 같이 저장해 보자.
[code]
@media (prefers-color-scheme: dark) {
/* 다크모드 내용 */
}
[/code]
위에 보이는 prefers-color-scheme가 스마트폰의 다크 모드를 감지하는 코드다. 즉, 감지가 된다면 그 옆에 있는 dark를 실행하라는 의미가 되겠다.
그렇다면 화이트모드를 하고 싶다면? 똑 같은 원리로 아래처럼 변경하면 된다.
[code]
@media (prefers-color-scheme: light) {
[/code]
다크모드 자동 인식 후 적용 예제
그런데, 이 코드를 넣었다고 바로 다크모드가 되진 않는다. 감지만 하는 코드이기 때문이다. 그러므로 진짜 다크모드를 만들려면 여기에 추가 태그를 더 넣어줘야 한다.
[code]
@media (prefers-color-scheme: dark) {
body { background:#3f3f3f; }
p { color:#dedede }
}
[/code]
위처럼 하게 되면, 바탕 배경은 어두운 쥐색이 되고, 글자들은 밝은 회색이 된다. [저작권법 표시] 원본 출처 : 키스세븐(www.kiss7.kr)
하지만 문제도 있다. 이 방법은 일일이 모든 태그의 CSS 스타일 코드를 다 적어줘야 한다는 것이다.
그러므로, 홈페이지의 규모가 크다면 css 변수를 이용한 다크 모드를 적용하고, 일부분만 효과를 줄 때는 위의 방법을 사용하는 것이 더 편리할 것이다.