study/프론트엔드

GatsbyJS에서 사용자 테마 및 다크 모드 설정하기

octo54 2025. 3. 18. 00:35
반응형

GatsbyJS에서 사용자 테마 및 다크 모드 설정하기

다크 모드는 사용자의 눈 피로를 줄이고, 배터리 절약 효과가 있는 UI 기능입니다.
이번 글에서는 GatsbyJS에서 다크 모드 및 사용자 테마 설정을 추가하는 방법을 단계별로 설명하겠습니다. 🚀

1. Gatsby에서 다크 모드를 적용하는 방법

✅ 다크 모드 구현 방식 비교

방식 설명 사용 예시

CSS 변수 활용 :root에서 다크/라이트 모드 색상 정의 기본적인 테마 전환
React useState 활용 상태(State) 관리로 다크 모드 토글 사용자 인터랙션 반영
localStorage 사용 사용자의 다크 모드 설정 저장 사이트 재방문 시 테마 유지
gatsby-plugin-use-dark-mode 활용 플러그인을 사용하여 간편하게 적용 빠르고 간단한 다크 모드

🚀 이번 글에서는 CSS 변수, useState, localStorage를 활용한 다크 모드 구현 방법을 다룹니다.

2. 다크 모드 스타일 설정 (CSS 변수 활용)

반응형

먼저, CSS 변수를 사용하여 다크 모드 스타일을 설정합니다.

✅ CSS 전역 변수 추가 (src/styles/global.css)

:root {
  --bg-color: white;
  --text-color: black;
}

[data-theme="dark"] {
  --bg-color: black;
  --text-color: white;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s ease, color 0.3s ease;
}

✅ 설명

  • :root에서 기본(라이트 모드) 색상을 정의
  • [data-theme="dark"] 속성을 사용하여 다크 모드 색상 지정
  • body에 var(--bg-color), var(--text-color)을 적용

🚀 이제 CSS 변수만으로 다크 모드를 구현할 준비가 되었습니다!

3. 다크 모드 토글 버튼 만들기

이제 React의 useState와 localStorage를 활용하여 다크 모드를 제어하는 버튼을 추가하겠습니다.

✅ src/components/ThemeToggle.js 추가

import React, { useState, useEffect } from "react";

const ThemeToggle = () => {
  const [theme, setTheme] = useState(
    typeof window !== "undefined" ? localStorage.getItem("theme") || "light" : "light"
  );

  useEffect(() => {
    document.documentElement.setAttribute("data-theme", theme);
    localStorage.setItem("theme", theme);
  }, [theme]);

  const toggleTheme = () => {
    setTheme(prevTheme => (prevTheme === "light" ? "dark" : "light"));
  };

  return (
    <button onClick={toggleTheme}>
      {theme === "light" ? "🌙 다크 모드" : "☀️ 라이트 모드"}
    </button>
  );
};

export default ThemeToggle;

✅ 설명

  • useState를 사용하여 현재 테마를 저장 (light 또는 dark)
  • useEffect를 사용하여 테마 변경 시 data-theme 속성을 업데이트
  • localStorage를 활용하여 사용자가 선택한 테마를 저장하고 유지

🚀 이제 사용자가 다크 모드 버튼을 클릭하면 즉시 테마가 변경됩니다!

4. 다크 모드 버튼을 네비게이션에 추가

이제 다크 모드 버튼을 사이트 공통 레이아웃에 추가합니다.

✅ src/components/Layout.js 수정

import React from "react";
import ThemeToggle from "./ThemeToggle";

const Layout = ({ children }) => {
  return (
    <div>
      <nav>
        <h1>My Gatsby Site</h1>
        <ThemeToggle />
      </nav>
      <main>{children}</main>
    </div>
  );
};

export default Layout;

🚀 이제 모든 페이지에서 다크 모드 전환 버튼을 사용할 수 있습니다!

5. 다크 모드 초기 설정 (OS 시스템 테마 감지)

운영체제(OS)의 다크 모드 설정을 자동으로 감지하려면 window.matchMedia()를 활용할 수 있습니다.

📌 초기 테마 설정 추가 (ThemeToggle.js 수정)

const getInitialTheme = () => {
  if (typeof window !== "undefined") {
    const savedTheme = localStorage.getItem("theme");
    if (savedTheme) return savedTheme;
    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
  }
  return "light";
};

const ThemeToggle = () => {
  const [theme, setTheme] = useState(getInitialTheme);

  useEffect(() => {
    document.documentElement.setAttribute("data-theme", theme);
    localStorage.setItem("theme", theme);
  }, [theme]);

  const toggleTheme = () => {
    setTheme(prevTheme => (prevTheme === "light" ? "dark" : "light"));
  };

  return (
    <button onClick={toggleTheme}>
      {theme === "light" ? "🌙 다크 모드" : "☀️ 라이트 모드"}
    </button>
  );
};

✅ 설명

  • getInitialTheme() 함수에서 로컬 스토리지에 저장된 테마를 먼저 확인
  • 저장된 테마가 없으면 운영체제(OS) 설정에 따라 자동 적용

🚀 이제 브라우저가 다크 모드를 기본으로 설정하면 Gatsby도 다크 모드로 시작됩니다!

6. Gatsby 플러그인 활용 (gatsby-plugin-use-dark-mode)

더 간단한 방법으로 다크 모드를 적용하려면 gatsby-plugin-use-dark-mode를 사용할 수도 있습니다.

✅ 플러그인 설치

npm install gatsby-plugin-use-dark-mode

✅ gatsby-config.js에서 플러그인 활성화

module.exports = {
  plugins: [`gatsby-plugin-use-dark-mode`]
};

✅ 다크 모드 적용 (ThemeToggle.js 수정)

import React from "react";
import useDarkMode from "use-dark-mode";

const ThemeToggle = () => {
  const darkMode = useDarkMode(false);

  return (
    <button onClick={darkMode.toggle}>
      {darkMode.value ? "☀️ 라이트 모드" : "🌙 다크 모드"}
    </button>
  );
};

export default ThemeToggle;

🚀 이제 몇 줄의 코드만으로 다크 모드 기능을 구현할 수 있습니다!

7. 결론

이번 글에서는 GatsbyJS에서 다크 모드 및 사용자 테마 설정을 추가하는 방법을 배웠습니다.
✔ CSS 변수(:root)를 활용한 다크 모드 스타일링 적용
✔ React useState와 localStorage를 사용하여 다크 모드 상태 저장
✔ 운영체제(OS) 설정에 따라 자동 다크 모드 적용 (window.matchMedia())
✔ gatsby-plugin-use-dark-mode를 활용한 간편한 다크 모드 구현

🚀 다음 글에서는 GatsbyJS에서 사용자 인증(Login) 기능을 추가하는 방법을 다루겠습니다!

추천 태그

GatsbyJS,Gatsby 다크 모드,Gatsby UI 최적화,Gatsby 다크 모드 구현,Gatsby CSS 변수,Gatsby useState,Gatsby localStorage,Gatsby 테마 설정,Gatsby 다크 모드 플러그인,Gatsby 성능 최적화