Customizing AstroPaper theme color schemes

This guide covers how to enable or disable light and dark mode, and how to customize the color scheme for the entire site.

Table of contents

Enable/disable light & dark mode

AstroPaper theme includes light and dark mode by default. This default behavior can be disabled in astro-paper.config.ts:

export default defineAstroPaperConfig({
  // ...
  features: {
    lightAndDarkMode: true,
    // ...
  },
});astro-paper.config.ts

To disable light & dark mode, set features.lightAndDarkMode to false. When disabled, the site will use only the light color scheme defined in src/styles/theme.css.

Customize color schemes

Both light and dark color schemes of AstroPaper theme are defined in src/styles/theme.css.

/* Light theme values */
:root,
[data-theme="light"] {
  --background: #fdfdfd;
  --foreground: #282728;
  --accent: #006cac;
  --accent-foreground: #ffffff;
  --muted: #e6e6e6;
  --muted-foreground: #6b7280;
  --border: #ece9e9;
}

/* Dark theme values */
[data-theme="dark"] {
  --background: #212737;
  --foreground: #eaedf3;
  --accent: #ff6b01;
  --accent-foreground: #ffffff;
  --muted: #343f60;
  --muted-foreground: #afb9ca;
  --border: #ab4b08;
}src/styles/theme.css

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

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

Here is a detailed explanation of each color property:

Here is an example of changing the light color scheme:

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

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