CSS 변수(CSS Variables)를 사용하면 웹 페이지의 색상, 글꼴 크기, 간격 등 다양한 스타일 속성을 효율적으로 관리할 수 있습니다. JavaScript와 연동하면 실시간 테마 전환 기능을 구현할 수 있으며, 사용자가 버튼 클릭이나 특정 이벤트에 따라 테마를 변경할 수 있습니다. 이 글에서는 CSS 변수와 JavaScript를 연동해 실시간 테마 전환 기능을 구현하는 방법을 소개합니다.

1. CSS Variables로 기본 테마 설정

CSS 변수를 사용하여 기본 테마를 설정합니다. 일반적으로 테마 전환을 위해 색상 관련 변수를 설정합니다.

1.1 CSS Variables 설정:

:root {
    --bg-color: #ffffff;
    --text-color: #000000;
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: Arial, sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
}

button {
    background-color: var(--primary-color);
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    margin: 10px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: var(--secondary-color);
}

설명:

  • :root: 전역에서 사용할 수 있는 CSS 변수를 정의합니다. 여기서 정의된 변수는 전체 문서에서 사용할 수 있습니다.
  • var(--variable-name): CSS 변수의 값을 참조하여 스타일을 적용합니다.

2. JavaScript로 테마 전환 구현

JavaScript를 사용해 CSS 변수의 값을 변경하면 실시간으로 테마를 전환할 수 있습니다.

2.1 HTML 구조:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Theme Switcher</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Theme Switcher</h1>
    <button id="light-theme-btn">Light Theme</button>
    <button id="dark-theme-btn">Dark Theme</button>

    <script src="script.js"></script>
</body>
</html>

2.2 JavaScript로 CSS Variables 변경:

document.getElementById('light-theme-btn').addEventListener('click', () => {
    document.documentElement.style.setProperty('--bg-color', '#ffffff');
    document.documentElement.style.setProperty('--text-color', '#000000');
    document.documentElement.style.setProperty('--primary-color', '#3498db');
    document.documentElement.style.setProperty('--secondary-color', '#2ecc71');
});

document.getElementById('dark-theme-btn').addEventListener('click', () => {
    document.documentElement.style.setProperty('--bg-color', '#2c3e50');
    document.documentElement.style.setProperty('--text-color', '#ecf0f1');
    document.documentElement.style.setProperty('--primary-color', '#e74c3c');
    document.documentElement.style.setProperty('--secondary-color', '#8e44ad');
});

설명:

  • document.documentElement.style.setProperty: JavaScript를 사용해 :root 요소의 CSS 변수 값을 실시간으로 변경합니다.
  • 이벤트 리스너: 버튼 클릭 시 각 테마에 맞는 CSS 변수 값을 설정하여 테마를 전환합니다.

3. 사용자 설정을 유지하는 로컬 스토리지 활용

사용자가 선택한 테마를 기억하도록 로컬 스토리지를 활용하면, 페이지를 새로고침하거나 다시 방문해도 마지막에 선택한 테마가 유지됩니다.

3.1 테마 저장 및 로드:

const setTheme = (theme) => {
    if (theme === 'light') {
        document.documentElement.style.setProperty('--bg-color', '#ffffff');
        document.documentElement.style.setProperty('--text-color', '#000000');
        document.documentElement.style.setProperty('--primary-color', '#3498db');
        document.documentElement.style.setProperty('--secondary-color', '#2ecc71');
    } else if (theme === 'dark') {
        document.documentElement.style.setProperty('--bg-color', '#2c3e50');
        document.documentElement.style.setProperty('--text-color', '#ecf0f1');
        document.documentElement.style.setProperty('--primary-color', '#e74c3c');
        document.documentElement.style.setProperty('--secondary-color', '#8e44ad');
    }
    localStorage.setItem('theme', theme); // 선택한 테마를 로컬 스토리지에 저장
}

document.getElementById('light-theme-btn').addEventListener('click', () => setTheme('light'));
document.getElementById('dark-theme-btn').addEventListener('click', () => setTheme('dark'));

// 페이지 로드 시 저장된 테마 불러오기
window.addEventListener('DOMContentLoaded', () => {
    const savedTheme = localStorage.getItem('theme') || 'light';
    setTheme(savedTheme);
});

설명:

  • localStorage.setItem: 사용자가 선택한 테마를 로컬 스토리지에 저장합니다.
  • window.addEventListener('DOMContentLoaded'): 페이지가 로드될 때 로컬 스토리지에서 저장된 테마를 불러와 적용합니다.

4. 반응형 및 접근성을 고려한 테마 전환

반응형 디자인과 접근성을 고려하여, 테마 전환 기능을 모바일 환경에서도 사용할 수 있도록 최적화할 수 있습니다.

4.1 반응형 스타일링:

button {
    width: 100%;
    max-width: 200px;
    font-size: 18px;
}

@media (max-width: 600px) {
    h1 {
        font-size: 24px;
    }

    button {
        font-size: 16px;
        padding: 8px;
    }
}

설명:

  • 반응형 디자인: 작은 화면에서는 폰트 크기와 버튼 크기를 조정하여 모바일 환경에서도 테마 전환 기능을 쉽게 사용할 수 있도록 합니다.

4.2 접근성 고려:

테마 전환 버튼에 aria-label을 추가하여 화면 읽기 프로그램이 각 버튼의 역할을 명확히 설명할 수 있도록 합니다.

<button id="light-theme-btn" aria-label="Activate Light Theme">Light Theme</button>
<button id="dark-theme-btn" aria-label="Activate Dark Theme">Dark Theme</button>

결론

CSS Variables와 JavaScript를 연동하여 실시간 테마 전환 기능을 구현하면, 사용자에게 보다 개인화된 웹 경험을 제공할 수 있습니다. 로컬 스토리지를 활용하여 사용자의 선택을 기억하고, 반응형 디자인과 접근성을 고려하여 다양한 장치와 환경에서 일관된 사용자 경험을 유지할 수 있습니다. 이 글에서 소개한 방법을 사용해, 여러분의 웹사이트에 세련된 테마 전환 기능을 추가해보세요.

'CSS' 카테고리의 다른 글

CSS로 구성하는 멀티 컬럼 레이아웃 - 신문 및 잡지 스타일 레이아웃 구현  (0) 2024.08.11
CSS로 구현하는 고급 페이지 레이아웃 테크닉 - 복잡한 웹 페이지 레이아웃 디자인  (0) 2024.08.11
CSS로 비디오 오버레이와 자막 스타일링 - 멀티미디어 콘텐츠의 스타일링  (0) 2024.08.11
CSS Grid를 사용한 격자형 레이아웃 - 포트폴리오와 갤러리 웹사이트 디자인  (0) 2024.08.11
CSS로 접근성을 고려한 커스텀 폼 스타일링 - 폼 요소의 접근성과 스타일 조화  (0) 2024.08.11

+ Recent posts

티스토리툴바