happy cat image

everdevel

coding

login
알림X
  • 현재 댓글에 대한 답변만 표시합니다.
  • 표시할 댓글 이력이 없거나 로그인해 주세요.
























everdevel이 만든 무료 클라우드 개발환경을 소개합니다.

방문해 주셔서 감사합니다.

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>everdevel</title>
</head>
<body>
    <header>
        <h1>everdevel</h1>
    </header>
</body>
</html>

결과는 바로 아래에서 확인하겠습니다.

제가 사용하는 MacOS에서 라이트 모드로 변경을 한 후 결과를 보면..

dark mode light mode

라이트모드 결과

dark mode light mode

제가 사용하는 MacOS에서 다크 모드로 변경을 한 후 결과를 보면..

dark mode light mode

다크모드 결과

dark mode light mode

이 챕터의 마지막 페이지입니다.

제가 지금 다른곳에 정신이 팔려있는것 같습니다.

다음 강좌를 원하시면
아래의 요청하기 버튼을 눌러주세요.

농구 황제가 아닌 인간 마이클 조던의 삶, 그가 거둔 무수한 실패와 성공을 기록한 책. “우리가 몰랐던 이야기……. 빛나는 영웅의 삶 이면에 존재하던 외롭고 자존심 강한 한 남자를 매우 흥미롭게 파고들었다.” - 《퍼블리셔스 위클리》

컨텐츠의 내용을 더 보려면 바로 아래에서 확인할 수 있습니다.


    
    

강좌로 돌아가기

댓글 0개

정렬기준