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.

Open Table of contents

Enable/disable light & dark mode
Choose initial color scheme
Customize color schemes

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/",
  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,
  showArchives: true,
  showBackButton: true,
  editPost: {
    enabled: true,
    text: "Suggest Changes",
    url: "https://github.com/satnaing/astro-paper/edit/main/",
  },
  dynamicOgImage: true,
  lang: "en",
  timezone: "Asia/Bangkok",
} 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 Layout’s initialColorScheme prop.

<!-- src/layouts/Layout.astro -->
<html>
  <head>
    <!-- ... -->
  </head>
  <body>
    <!-- The theme script checks for the initial color scheme -->
    <script is:inline>
      // initialColorScheme can be "light" | "dark" | ""
      const initialColorScheme = "light";
      ...
    </script>
    <!-- ... -->
  </body>
</html>

Customize color schemes

Both light & dark color schemes of AstroPaper theme can be customized. You can do this in src/styles/global.css file.

@layer base {
  :root,
  html[data-theme="light"] {
    --background: #fdfdfd;
    --foreground: #282728;
    --accent: #006cac;
    --muted: #e5e5e8;
    --border: #ced0d7;
  }

  html[data-theme="dark"] {
    --background: #12171c;
    --foreground: #dcddde;
    --accent: #62a3d0;
    --muted: #232a35;
    --border: #3e4a59;
  }
}

In the global.css file, you’ll see these CSS variables in :root and html[data-theme="dark"]. If you want to customize your custom color scheme, you have to specify your light color scheme inside :root and dark color scheme inside html[data-theme="dark"].

Colors are in hex format, making them straightforward to change. Just update the hex values to your desired colors.

Check out this blog post for some predefined color schemes.