어제는 미디어 쿼리에 대한 기초적인 부분을 봤다면 오늘은 다크 모드 사용자에게 홈페이지를 어떻게 보여줄지 설정하는 방법을 알아보자.
prefers-color-scheme
prefers-color-scheme를 이용하여 light, dark 따로 설정 가능하다.
코드는 @media 이용하여 prefers-color-scheme: ‘모드’ 이런식으로 입력한다.
모드
light
:
사용자가 시스템에서 라이트 모드를 사용하고 있거나 아니면 모드를 선택하지 않았을 때를 나타낸다.
dark
:
사용자가 시스템에서 다크 모드를 사용하고 있을 때를 나타낸다.
미디어 쿼리 사용하기
다크 모드 예시
@media (prefers-color-scheme: dark) { ... }
CSS 파일이나 <style> 태그 안에 이 코드를 입력하고 블록 안에 CSS 선택자 입력하고 속성들을 넣어주면된다.
참고
MDN Web Docs - prefers-color-scheme
관련 포스트
반응형 디자인
유동 격자 - flex
유동 격자 - grid
유동 이미지
미디어 쿼리
미디어 쿼리 – 다크 모드 - 현재글
공부 목적 블로그