IT/HTML & CSS

CSS를 이용한 테마 컬러 변경 적용하기(feat.다크 모드)

라임웨일 2021. 11. 22. 10:49
반응형

 

요즘 웹 사이트들이 사용자의 편의성을 위해서 웹 화면의 모드 변경(*다크 모드) 기능을 제공하고 있습니다.

또는 하나의 프로토타입 구조에 마크업이나 별도의 구조 변경 없이 컬러 값, 배경색의 변경을 통해서 다양한 테마형태로 전혀 다른 분위기의 화면을 연출하고 싶은 경우도 생기게 됩니다. 

 

이를 CSS로 제어하기 위해서 모든 태그에 적용되는 CSS에 해당 테마에 맞는 컬러 값을 정의하는 것은 매우 힘든 작업이 됩니다. 이를 조금은 효율적으로 활용하기 위한 방법을 공유합니다.

 

그것은 :root 속성을 활용하는 방법입니다.

CSS의 :root는 문서 트리의 루트 요소를 선택합니다. HTML의 루트 요소는 <html>요소 선택자를 나타냅니다.

:root {
  background: yellow;
}

CSS의 :root 선택자에 하위 속성을 더블 대쉬(--)를 이용하여 원하는 값을 변수에 담에 전역에 사용할 수 있습니다. 

우리는 다크 모드와 라이트 모드의 컬러값 분기를 해당 속성을 이용하여 만들겁니다. 

:root,
:root.light {
  --bg-color: #fff;
  --text-color: #222;
}

:root.dark {
  --bg-color: #222;
  --text-color: #eee;
}

 

원하는 값을 변수에 적용했으면 해당 값을 이제 화면에 적용합니다. 미리 선언해 놓았던 변수 값은 var 속성 값을 이용하여 화면에 적용합니다.

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

그러면 우리가 원하는 라이트 모드와 다크모드를 모두 적용한 화면이 완성됩니다.

 

 

 

참고 : https://webdesign.tutsplus.com/tutorials/color-schemes-with-css-variables-and-javascript--cms-36989

반응형