Customizing AstroPaper theme color schemes

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.

Table of contents

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,
  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

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"

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

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.

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;
}
/* ... */src/styles/global.css

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.

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;
}
/* ... */src/styles/global.css

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