다크모드는 CSS에서 어떻게 구현될까

다크모드 토글 버튼을 누르면 배경, 글자, 버튼 색까지 사이트 전체의 색상이 한꺼번에 바뀝니다. 요소마다 색상 코드를 일일이 새로 지정하는 것처럼 보이지만, 실제로는 CSS 커스텀 속성(변수)을 활용한 훨씬 효율적인 방식으로 구현되는 경우가 많습니다. 핵심 아이디어는 실제 색상값을 각 요소에 직접 적지 않고, 배경색이나 글자색 같은 역할에 이름을 붙인 변수로 한 단계 감싸는 것입니다. 예를 들어 배경색을 지정할 때 흰색 코드를 직접 쓰는 대신 배경색을 뜻하는 변수 하나를 참조하도록 만들어두면, 이후 이 변수의 값만 바꿔도 그 변수를 참조하는 모든 요소의 색이 한꺼번에 바뀝니다. 이 변수들은 보통 문서 최상단(:root)에서 라이트모드 기준값으로 한 번 정의되고, 다크모드가 활성화된 상태를 나타내는 별도의 선택자 안에서 같은 이름의 변수에 다른 색상값을 다시 정의해둡니다. 브라우저는 CSS의 특정 규칙에 따라, 더 구체적인 조건에 해당하는 값을 우선 적용하기 때문에 다크모드 조건이 활성화되면 자동으로 그쪽 값이 사용됩니다. 그렇다면 자바스크립트는 어떤 역할을 할까요. 실제 색상을 계산하거나 바꾸는 작업은 전혀 하지 않습니다. 사용자가 토글 버튼을 눌렀을 때, 자바스크립트는 그저 html이나 body 태그에 다크모드임을 나타내는 속성이나 클래스 하나를 붙였다 뗐다 하는 아주 단순한 역할만 담당합니다. 실제 색상 전환이라는 무거운 작업은 전부 CSS 쪽에서 미리 정의해둔 규칙에 따라 처리되는 것입니다. 이런 구조 덕분에 요소 하나하나의 색을 자바스크립트로 직접 바꾸는 것보다 훨씬 가볍고 빠르게 테마 전환이 이루어집니다. 최근에는 사용자가 명시적으로 설정을 바꾸지 않아도, 운영체제에 설정된 다크모드 여부를 CSS가 직접 감지해 자동으로 반영하는 기능도 널리 쓰입니다. 다만 사용자가 사이트 안에서 직접 라이트/다크를 선택한 경우에는 이 선택을 시스템 설정보다 우선 적용하고, 다음 방문 때도 유지되도록 저장해두는 것이 일반적인 사용자 경험 원칙입니다.