Русский заголовок здесь

Wed, 06 May 2026 10:00:00 GMT

English content here. You can write Markdown and use HTML.

Subheading

List item 1
List item 2

</div>

Русский контент здесь. Можно использовать разметку и HTML.

Подзаголовок

Пункт списка 1
Пункт списка 2

</div>

Customizing AstroPaper theme color schemes

Fri, 09 Jan 2026 15:00:15 GMT

This post will explain how you can enable/disable light & dark mode for the website. Moreover, you'll learn how you can customize color schemes of the entire website.

Enable/disable light & dark mode

AstroPaper theme will include light and dark mode by default. In other words, there will be two color schemes_ one for light mode and another for dark mode. This default behavior can be disabled in SITE configuration object.

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, // [!code highlight]
  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;

To disable light & dark mode set SITE.lightAndDarkMode to false.

Choose initial color scheme

By default, if we disable SITE.lightAndDarkMode, we will only get system's prefers-color-scheme.

Thus, to choose an initial color scheme instead of prefers-color-scheme, we have to set color scheme in the initialColorScheme variable inside theme.ts.

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

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";
}

// ...

The initialColorScheme variable can hold two values_ "light", "dark". You can leave the empty string (default) if you don't want to specify an initial color scheme.

"" - system's prefers-color-scheme. (default)
"light" - use light mode as initial color scheme.
"dark" - use dark mode as initial color scheme.

<details> <summary>Why initialColorScheme is not inside config.ts?</summary> To avoid color flickering on page reload, we have to place the theme initialization JavaScript code as early as possible when the page loads. The theme script is split into two parts: a minimal inline script in the <head> that sets the theme immediately, and the full script that loads asynchronously. This approach prevents FOUC (Flash of Unstyled Content) while maintaining optimal performance. </details>

Customize color schemes

Both light & dark color schemes of AstroPaper theme can be customized in the global.css file.

@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;
}
/* ... */

In the AstroPaper theme, the :root and html[data-theme="light"] selectors define the light color scheme, while html[data-theme="dark"] defines the dark color scheme.

To customize your own color scheme, specify your light colors inside :root, html[data-theme="light"], and your dark colors inside html[data-theme="dark"].

Here is the detail explanation of color properties.

Color Property	Definition & Usage
`--background`	Primary color of the website. Usually the main background.
`--foreground`	Secondary color of the website. Usually the text color.
`--accent`	Accent color of the website. Link color, hover color etc.
`--muted`	Card and scrollbar background color for hover state etc.
`--border`	Border color. Used for border utilities and visual separation

Here is an example of changing the light color scheme.

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

Check out some predefined color schemes AstroPaper has already crafted for you.

Vladislav Ignatieff