반응형
요즘 웹 사이트들이 사용자의 편의성을 위해서 웹 화면의 모드 변경(*다크 모드) 기능을 제공하고 있습니다.
또는 하나의 프로토타입 구조에 마크업이나 별도의 구조 변경 없이 컬러 값, 배경색의 변경을 통해서 다양한 테마형태로 전혀 다른 분위기의 화면을 연출하고 싶은 경우도 생기게 됩니다.
이를 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
반응형
'IT > HTML & CSS' 카테고리의 다른 글
| 웹 폰트(Web Font) 최적화 하기 (4) | 2022.01.18 |
|---|---|
| 아이폰(ios)에서 모멘텀(momentum) 스크롤 사용하기 (0) | 2021.12.22 |
| SVG 활용하기(feat.background) (0) | 2021.04.29 |
| SCSS/SASS 이해하기 (0) | 2021.04.15 |
| CSS방법론 : OOCSS, BEM, SMACSS 비교해보기 (0) | 2021.03.12 |
보신 글이 조금이라도 도움이 되었으면 좋겠습니다.
오늘도 제 블로그에 와 주셔서 진심으로 감사합니다. :)
오늘도 제 블로그에 와 주셔서 진심으로 감사합니다. :)
