허도경, limewhale

요즘 웹 대부분은 테마가 기본적으로 적용되어 있어서 사용자의 편의에 맞게 다크 모드, 라이트 모드로 화면을 볼 수 있는 편의성을 제공하고 있습니다. React로도 이 두가지 테마 모드를 쉽게 적용할 수 있는데 오늘 이 방법을 정리해보려고 합니다. ✏️ styled-components React에서 다양한 방법으로 테마 모드를 적용할 수 있겠지만 styled-components를 이용하여 테마 모드를 적용하는 방법을 알아보려고 합니다. styled-components 설치 > npm i styled-components > npm i @types/styled-components // typescript 사용시 styled-components가 설치되어 있지 않다면 우선 터미널을 통해 styled-compon..

요즘 웹 사이트들이 사용자의 편의성을 위해서 웹 화면의 모드 변경(*다크 모드) 기능을 제공하고 있습니다. 또는 하나의 프로토타입 구조에 마크업이나 별도의 구조 변경 없이 컬러 값, 배경색의 변경을 통해서 다양한 테마형태로 전혀 다른 분위기의 화면을 연출하고 싶은 경우도 생기게 됩니다. 이를 CSS로 제어하기 위해서 모든 태그에 적용되는 CSS에 해당 테마에 맞는 컬러 값을 정의하는 것은 매우 힘든 작업이 됩니다. 이를 조금은 효율적으로 활용하기 위한 방법을 공유합니다. 그것은 :root 속성을 활용하는 방법입니다. CSS의 :root는 문서 트리의 루트 요소를 선택합니다. HTML의 루트 요소는 요소 선택자를 나타냅니다. :root { background: yellow; } CSS의 :root 선택자에..