CSS와 JavaScript를 활용한 테마 변경

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

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

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

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

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

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

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

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

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

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

선택된 테마에 따라 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의 결합으로 사용자 친화적인 테마 변경 기능을 제공하며, 사용자의 선택을 기억하여 재방문 시에도 동일한 경험을 제공합니다.

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!