반응형
요즘 웹 사이트들이 사용자의 편의성을 위해서 웹 화면의 모드 변경(*다크 모드) 기능을 제공하고 있습니다.
또는 하나의 프로토타입 구조에 마크업이나 별도의 구조 변경 없이 컬러 값, 배경색의 변경을 통해서 다양한 테마형태로 전혀 다른 분위기의 화면을 연출하고 싶은 경우도 생기게 됩니다.
이를 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 |
광고차단(애드블록)프로그램이나 브라우저를 사용중이시면 프로그램을 비활성화이나 블로그 주소를 예외 처리 해주시면 광고가 노출됩니다. 귀찮고 번거롭겠지만 광고 클릭은 저에게는 큰 힘이 됩니다. 🙇🏻♂️🙇🏻♀️
제 블로그의 모든 글은 제가 직접 작성 하고 다른 글을 참고할 때는 이전 글보다 읽기 편하게 수정해서 작성하고 있습니다. 커피 한잔 사먹고 더 열심히 좋은글로 보답하겠습니다.
오늘도 제 블로그에 와 주셔서 감사합니다. :)
제 블로그의 모든 글은 제가 직접 작성 하고 다른 글을 참고할 때는 이전 글보다 읽기 편하게 수정해서 작성하고 있습니다. 커피 한잔 사먹고 더 열심히 좋은글로 보답하겠습니다.
오늘도 제 블로그에 와 주셔서 감사합니다. :)
