AstroPaper 테마 색상 커스터마이징

이 글에서는 웹사이트의 라이트 및 다크 모드를 활성화/비활성화하는 방법을 설명합니다. 또한, 전체 웹사이트의 색상 테마를 커스터마이징하는 방법도 다룹니다.

라이트 및 다크 모드 활성화/비활성화

AstroPaper 테마는 기본적으로 라이트 모드와 다크 모드를 모두 포함합니다. 즉, 라이트 모드용과 다크 모드용으로 두 가지 색상 테마가 있습니다. 이 기본 동작은 SITE 설정 객체에서 비활성화할 수 있습니다.

export const SITE = {
  website: "https://astro-paper.pages.dev/", // replace this with your deployed domain
  author: "Sat Naing",
  profile: "https://satnaing.dev/",
  desc: "A minimal, responsive and SEO-friendly Astro blog theme.",
  title: "AstroPaper",
  ogImage: "astropaper-og.jpg",
  lightAndDarkMode: true,
  postPerIndex: 4,
  postPerPage: 4,
  scheduledPostMargin: 15 * 60 * 1000, // 15 minutes
  showArchives: true,
  showBackButton: true, // show back button in post detail
  editPost: {
    enabled: true,
    text: "Suggest Changes",
    url: "https://github.com/satnaing/astro-paper/edit/main/",
  },
  dynamicOgImage: true,
  lang: "en", // html lang code. Set this empty and default will be "en"
  timezone: "Asia/Bangkok", // Default global timezone (IANA format) https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
} as const;src/config.ts

라이트 및 다크 모드를 비활성화하려면 SITE.lightAndDarkMode를 false로 설정하세요.

초기 색상 테마 선택

기본적으로 SITE.lightAndDarkMode를 비활성화하면 시스템의 prefers-color-scheme만 적용됩니다.

따라서, prefers-color-scheme 대신 초기 색상 테마를 선택하려면 theme.ts의 initialColorScheme 변수에 색상 테마를 설정해야 합니다.

// Initial color scheme
// Can be "light", "dark", or empty string for system's prefers-color-scheme
const initialColorScheme = ""; // "light" | "dark"

function getPreferTheme(): string {
  // get theme data from local storage (user's explicit choice)
  const currentTheme = localStorage.getItem("theme");
  if (currentTheme) return currentTheme;

  // return initial color scheme if it is set (site default)
  if (initialColorScheme) return initialColorScheme;

  // return user device's prefer color scheme (system fallback)
  return window.matchMedia("(prefers-color-scheme: dark)").matches
    ? "dark"
    : "light";
}

// ...src/scripts/theme.ts

initialColorScheme 변수는 "light", "dark" 두 가지 값을 가질 수 있습니다. 초기 색상 테마를 지정하지 않으려면 빈 문자열(기본값)로 두면 됩니다.

• "" - 시스템의 prefers-color-scheme을 따릅니다. (기본값)
• "light" - 라이트 모드를 초기 색상 테마로 사용합니다.
• "dark" - 다크 모드를 초기 색상 테마로 사용합니다.

색상 테마 커스터마이징

AstroPaper 테마의 라이트 및 다크 색상 테마는 모두 global.css 파일에서 커스터마이징할 수 있습니다.

@import "tailwindcss";
@import "./typography.css";

@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

:root,
html[data-theme="light"] {
  --background: #fdfdfd;
  --foreground: #282728;
  --accent: #006cac;
  --muted: #e6e6e6;
  --border: #ece9e9;
}

html[data-theme="dark"] {
  --background: #212737;
  --foreground: #eaedf3;
  --accent: #ff6b01;
  --muted: #343f60bf;
  --border: #ab4b08;
}
/* ... */src/styles/global.css

AstroPaper 테마에서 :root와 html[data-theme="light"] 선택자는 라이트 색상 테마를 정의하고, html[data-theme="dark"]는 다크 색상 테마를 정의합니다.

자신만의 색상 테마를 커스터마이징하려면 :root, html[data-theme="light"] 안에 라이트 색상을, html[data-theme="dark"] 안에 다크 색상을 지정하세요.

다음은 색상 속성에 대한 상세한 설명입니다.

다음은 라이트 색상 테마를 변경하는 예시입니다.

/* ... */
:root,
html[data-theme="light"] {
  --background: #f6eee1;
  --foreground: #012c56;
  --accent: #e14a39;
  --muted: #efd8b0;
  --border: #dc9891;
}
/* ... */src/styles/global.css

AstroPaper가 미리 제작해 둔 미리 정의된 색상 테마도 확인해 보세요.