lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

webIntroGalleryChapter2Title

webIntroGalleryChapter1Title

webIntroGalleryChapter3Title

# CSS와 JavaScript를 활용한 테마 변경

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

 

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

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

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

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

 

## data-theme 기반의 스타일링

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

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

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

 

## 각 테마에 대한 색상 값 정의

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

 

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

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

 

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

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

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

 

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

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

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

```javascript
localStorage.setItem('theme', t1);
```

 

## 초기 테마 설정 로직

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

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

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

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