본문으로 건너뛰기

라이트/다크 테마 제어하기

CSS와 JavaScript를 활용한 테마 변경

자바스크립트로 테마를 변경하는 방법을 알아볼게요.


CSS 변수를 이용한 테마 컬러 설정

CSS 변수 (또는 "커스텀 속성")는 웹페이지에서 재사용 가능한 값을 저장하는 데 사용됩니다.

이 예제에서는 테마에 따른 다양한 색상 값을 변수로 저장하여 쉽게 참조하고 변경할 수 있도록 합니다.

CSS
[data-theme='light'] {
--bg-color: #fff;
--text-color: #000;
...;
}

data-theme 기반의 스타일링

CSS에서 data-theme 속성 값을 사용하여 해당 테마에 따른 스타일을 적용합니다.

이렇게 함으로써, HTML 문서의 data-theme 속성만 변경하면 해당 테마에 따른 스타일이 자동으로 적용됩니다.

CSS
[data-theme='dark'] {
--bg-color: #111;
--text-color: #c3b6a2;
...;
}

각 테마에 대한 색상 값 정의

테마마다 다른 색상 값을 CSS 변수로 정의하여, 해당 테마가 선택될 때 이 색상 값들이 페이지 전체에 적용되도록 합니다.


테마 설정 및 data-theme 속성 변경

JavaScript를 사용하여 data-theme 속성을 동적으로 변경하고, 사용자의 테마 선택를 로컬 스토리지(Local Storage)라는 브라우저 내부 저장소에 저장하여, 사용자가 웹사이트를 재방문할 때 이전에 선택한 테마를 유지할 수 있도록 합니다.


테마 설정 및 data-theme 속성 변경

선택된 테마에 따라 data-theme 속성의 값을 변경합니다. 이 값의 변경은 JavaScript의 setAttribute 메서드를 통해 수행됩니다.

const setTheme = (theme) => {
document.documentElement.setAttribute('data-theme', theme);
};

로컬 스토리지를 활용한 사용자의 테마 설정 저장

로컬 스토리지는 웹 브라우저에 정보를 저장하는 데 사용됩니다.

사용자의 테마 선택을 로컬 스토리지에 저장함으로써, 페이지를 새로고침하거나 나중에 다시 방문할 때도 동일한 테마를 유지할 수 있습니다.

localStorage.setItem('theme', t1);

초기 테마 설정 로직

페이지가 처음 로드될 때, 로컬 스토리지에서 사용자의 테마 설정을 찾아 해당 설정을 적용합니다.

로컬 스토리지에 저장된 테마 설정이 없다면 기본값으로 'light' 테마가 설정됩니다.

const theme = localStorage.getItem('theme') || 'light';
setTheme(theme);

이렇게 CSS와 JavaScript의 결합으로 사용자 친화적인 테마 변경 기능을 제공하며, 사용자의 선택을 기억하여 재방문 시에도 동일한 경험을 제공합니다.

다음 내용이 궁금하다면?

월 12,500원 PLUS 멤버십 가입 or 강의를 등록해 주세요!