티스토리 뷰

WEB/css

다크 모드 전환 스위치

silverline79 2026. 1. 14. 22:10

1. HTML 구조 (스위치 버튼)

상단 헤더 영역 적절한 곳에 이 버튼을 추가해 주세요.

HTML
 
<button id="theme-toggle" class="theme-toggle-btn" aria-label="다크 모드 전환">
    <span class="icon-sun">☀️</span>
    <span class="icon-moon">🌙</span>
</button>

2. CSS 변수 및 버튼 스타일

이미 만들어둔 디자인 시스템의 :root 변수를 활용합니다.

CSS
 
/* 기본 라이트 모드 변수 */
:root {
    --bg-main: #f1f5f9;
    --card-bg: #ffffff;
    --text-main: #1e293b;
    --border-color: #e2e8f0;
}

/* 💡 다크 모드 변수 (속성 선택자 사용) */
[data-theme="dark"] {
    --bg-main: #0f172a;
    --card-bg: #1e293b;
    --text-main: #f8fafc;
    --border-color: #334155;
}

/* 버튼 스타일 */
.theme-toggle-btn {
    cursor: pointer;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    padding: 10px;
    border-radius: 50%;
    width: 45px; height: 45px;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.3s;
}

/* 아이콘 토글 제어 */
[data-theme="dark"] .icon-sun { display: block; }
[data-theme="dark"] .icon-moon { display: none; }
.icon-sun { display: none; }
.icon-moon { display: block; }

3. 자바스크립트 코드 (테마 전환 및 기억)

이 스크립트는 사용자가 다음에 재방문했을 때도 마지막으로 설정한 모드를 기억해 줍니다.

JavaScript
 
const toggleBtn = document.getElementById('theme-toggle');
const htmlElement = document.documentElement; // <html> 태그 선택

// 1. 초기 테마 설정 확인
const savedTheme = localStorage.getItem('theme'); // 저장된 설정이 있는지 확인
const osTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; // 기기 설정 확인

// 저장된 설정이 있으면 그것을 쓰고, 없으면 기기 설정(OS)을 따름
const initialTheme = savedTheme || osTheme;
htmlElement.setAttribute('data-theme', initialTheme);

// 2. 버튼 클릭 이벤트
toggleBtn.addEventListener('click', () => {
    const currentTheme = htmlElement.getAttribute('data-theme');
    const newTheme = currentTheme === 'light' ? 'dark' : 'light';
    
    // 테마 적용
    htmlElement.setAttribute('data-theme', newTheme);
    
    // 로컬 스토리지에 저장하여 재방문 시에도 유지
    localStorage.setItem('theme', newTheme);
});

💡 작동 원리 설명

  1. data-theme 속성: 자바스크립트가 <html> 태그에 data-theme="dark"라는 꼬리표를 붙여줍니다. 그러면 CSS에서 이 꼬리표가 붙었을 때의 색상 변수값을 즉시 적용하게 됩니다.
  2. localStorage: 브라우저의 작은 저장소입니다. 사용자가 다크 모드를 선택했다는 정보를 저장해두었다가, 페이지를 새로고침하거나 나중에 다시 들어와도 해당 모드를 유지해 줍니다.
  3. prefers-color-scheme: 사용자가 윈도우나 맥 OS 설정에서 이미 다크 모드를 사용 중이라면, 사이트 첫 방문 시 자동으로 그에 맞춰 테마를 보여주는 스마트한 기능입니다.

※ 해당 내용은 Google Gmini3.0에서 작성되었습니다.

'WEB > css' 카테고리의 다른 글

조직도 css html  (0) 2026.01.29
검색영역 가로 3개 반응형  (0) 2026.01.26
clamp() 함수와 **CSS 변수(Variables)**  (0) 2026.01.14
폼(Form) 요소의 상태를 제어하거나 특정한 위치를 타겟팅할 때 유용한 선택자  (0) 2026.01.14
논리 가상 클래스 선택자 :where() / :is() / :has() / :not()  (0) 2026.01.14
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2026/02   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
글 보관함