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.