# 티스토리 블로그에 다크모드 적용하기 (Magazine 테마, 자동 감지)

최근 웹사이트들은 사용자 편의를 위해 다크모드를 기본 제공하는 경우가 많습니다.
다크모드는 눈부심을 줄이고, OLED 화면에서는 전력 소모를 줄이는 장점이 있습니다.
티스토리에서도 직접 CSS를 수정하면 다크모드를 쉽게 구현할 수 있습니다.

제 블로그에서도 달이나 해 버튼을 누르면 구현되도록 만들어보았습니다.

 

(1) 관리자 페이지 이동

• 티스토리 관리자 → 스킨 편집 메뉴로 들어갑니다.
• HTML/CSS 편집이 가능한 스킨 편집기를 엽니다.

(2) CSS 변수 추가하기

/* 기본(라이트) 모드 */
body {
  background-color: #ffffff;
  color: #000000;
}

/* 다크모드 */
body.dark-mode {
  background-color: #121212;
  color: #e0e0e0;
}

/* 추가 스타일 (예시) */
body.dark-mode a {
  color: #80cbc4; /* 링크 색상 */
}

body.dark-mode header, 
body.dark-mode footer {
  background-color: #1f1f1f;
}

이렇게 CSS 변수를 정의해두면, 다크모드일 때 자동으로 색상이 변경됩니다.

 

*주의할 점 : 다른 스킨일 경우 html 구조가 다르기 때문에 제대로 설정이 되지않을 수 있습니다.

 

(3)토글 버튼 추가하기

스킨HTML에 버튼 하나를 넣습니다. 위치는 자유롭지만 저는 header에 버튼메뉴 옆에 두었습니다.

<button id="themeToggle">🌙 다크모드</button>

 

(4) 자바스크립트로 테마 전환 기능 추가

(function() {
    const body = document.body;
    const toggleBtn = document.getElementById("themeToggle");

    const savedTheme = localStorage.getItem("theme");
    if (savedTheme === "dark") {
        body.classList.add("dark-mode");
        if (toggleBtn) toggleBtn.textContent = "☀️";
    }

    if (toggleBtn) {
        toggleBtn.addEventListener("click", function() {
            body.classList.toggle("dark-mode");

            if (body.classList.contains("dark-mode")) {
                localStorage.setItem("theme", "dark");
                this.textContent = "☀️";
            } else {
                localStorage.setItem("theme", "light");
                this.textContent = "🌙";
            }
        });
    }
})();

이렇게 하면 버튼을 누를 때마다 라이트/다크 모드가 전환되고, 로컬스토리지에 저장되어 재접속 시에도 모드가 유지됩니다.

 

추가 기능

위에서는 토글 버튼으로 다크모드 전환하는 방법을 다뤘는데

CSS만으로도 브라우저/OS 다크모드 설정을 자동으로 감지해서 적용할 수 있습니다.

/* 라이트 모드 기본 */
body {
  background-color: #ffffff;
  color: #000000;
}

/* 브라우저가 다크모드일 경우 */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: #e0e0e0;
  }
}

이렇게 작성해두면,

• 사용자가 라이트 모드 브라우저 → 흰색 배경 적용
• 사용자가 다크 모드 브라우저 → 검정색 배경 적용

자동으로 테마가 전환됩니다.

 

토글 기능 + 자동 감지 혼합하기

만약 자동 감지를 기본으로 하고, 사용자가 직접 다크모드를 켜거나 끌 수 있도록 하고 싶다면
아래처럼 localStorage + matchMedia를 같이 쓰면 됩니다.

(function() {
  const body = document.body;
  const toggleBtn = document.getElementById("darkModeToggle");

  // 저장된 테마 불러오기
  let savedTheme = localStorage.getItem("theme");

  // 저장된 테마가 없으면 브라우저 설정 따라가기
  if (!savedTheme) {
    if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
      savedTheme = "dark";
    } else {
      savedTheme = "light";
    }
  }

  // 테마 적용 함수
  function applyTheme(theme) {
    if (theme === "dark") {
      body.classList.add("dark-mode");
      if (toggleBtn) toggleBtn.textContent = "☀️";
    } else {
      body.classList.remove("dark-mode");
      if (toggleBtn) toggleBtn.textContent = "🌙";
    }
  }

  // 초기 적용
  applyTheme(savedTheme);

  // 토글 이벤트
  if (toggleBtn) {
    toggleBtn.addEventListener("click", function() {
      const newTheme = body.classList.contains("dark-mode") ? "light" : "dark";
      applyTheme(newTheme);
      localStorage.setItem("theme", newTheme);
    });
  }
})();

이렇게 하면:

처음 접속 → 브라우저 모드를 따라감

버튼으로 전환 → 사용자가 선택한 모드가 저장됨

다음 접속 시 → 저장된 모드가 우선 적용됩니다.