다크모드 CSS

요즘은 웹도 다크모드를 사용하는 사람이 많다.
데스크탑이나 노트북에서는 시스템 내 다크모드 설정을 켜면 되지만,
개발단계에서 간편하게 확인 할 때는 크롬 개발자 모드에 세로 ... 에 들어가서 도구 더보기(more tools)에 렌더링(rendering)을 켜면
css 미디어 기능 prefers-color-scheme로 사용할 수 있다.

다크 모드 개발시에 css에 미디어쿼리로 쉽게 개발 할 수 있다.

@media (prefers-color-scheme : dark){
	.nav{
    	background: #000000;
        color: white;
    }
}

 

그리고 OS 애니메이션 기능을 꺼두었을 때 적용 방법은 아래와 같다.

@media (prefers-reduced-motion){
	css 작성
}

 

출처는 코딩애플. 요즘 보고 있는 유튜버인데 너무 재밌고 찰지게 설명 잘해주신다.

https://www.youtube.com/watch?v=TlRkmSEMV6w