CSS 다크모드 라이트모드 구현하기
안녕하세요.
이번시간에는 CSS로 다크모드를 감지하고 다크모드일 때 CSS를 적용하는 방법에 대해 알아보겠습니다.
우리는 앞에서 미디어쿼리를 활용한 적이 있습니다.
반응형 웹을 만들 때 사용했었죠.
미디어 쿼리는 그 외에도 OS가 다크모드를 사용하는지 라이트모드를 사용하는지도 구분할 때 사용합니다.
prefers-color-scheme를 사용해서요.
미디어쿼리로 다크모드 라이트모드 구분하여 CSS 적용하기
@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>coreasur</title> </head> <body> <header> <h1>coreasur</h1> </header> </body> </html>
제가 사용하는 MacOS에서 라이트 모드로 변경을 한 후 결과를 보면..
라이트모드 결과
제가 사용하는 MacOS에서 다크 모드로 변경을 한 후 결과를 보면..
다크모드 결과