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 of the src/config.ts file.

// file: src/config.ts
export const SITE = {
  website: "https://astro-paper.pages.dev/",
  author: "Sat Naing",
  desc: "A minimal, responsive and SEO-friendly Astro blog theme.",
  title: "AstroPaper",
  ogImage: "astropaper-og.jpg",
  lightAndDarkMode: true, // true by default
  postPerPage: 3,
};

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

Choose primary color scheme

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

Thus, to choose primary color scheme instead of prefers-color-scheme, we have to set color scheme in the primaryColorScheme variable inside public/toggle-theme.js.

/* file: public/toggle-theme.js */
const primaryColorScheme = ""; // "light" | "dark"

// Get theme data from local storage
const currentTheme = localStorage.getItem("theme");

// other codes etc...

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

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

Why 'primaryColorScheme' is not inside config.ts?

To avoid color flickering on page reload, we have to place the toggle-switch JavaScript codes as early as possible when the page loads. It solves the problem of flickering, but as a trade-off, we cannot use ESM imports anymore.

Click here to know more about Astro's is:inline script.

Customize color schemes

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

/* file: src/styles/base.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root,
  html[data-theme="light"] {
    --color-fill: 251, 254, 251;
    --color-text-base: 40, 39, 40;
    --color-accent: 0, 108, 172;
    --color-card: 230, 230, 230;
    --color-card-muted: 205, 205, 205;
    --color-border: 236, 233, 233;
  }
  html[data-theme="dark"] {
    --color-fill: 47, 55, 65;
    --color-text-base: 230, 230, 230;
    --color-accent: 26, 217, 217;
    --color-card: 63, 75, 90;
    --color-card-muted: 89, 107, 129;
    --color-border: 59, 70, 85;
  }
  /* other styles */
}

In AstroPaper theme, :root and html[data-theme="light"] selectors are used as the light color scheme and html[data-theme="dark"] is used the dark color scheme. If you want to customize your custom color scheme, you have to specify your light color scheme inside :root,html[data-theme="light"] and dark color scheme inside html[data-theme="dark"].

Colors are declared in CSS custom property (CSS Variable) notation. Color property values are written in rgb values. (Note: instead of rgb(40, 39, 40), only specify 40, 39, 40)

Here is the detail explanation of color properties.

Color Property	Definition & Usage
--color-fill	Primary color of the website. Usually the main background.
--color-text-base	Secondary color of the website. Usually the text color.
--color-accent	Accent color of the website. Link color, hover color etc.
--color-card	Card, scrollbar and code background color (like this).
--color-card-muted	Card and scrollbar background color for hover state etc.
--color-border	Border color. Especially used in horizontal row (hr)

Here is an example of changing the light color scheme.

@layer base {
  /* lobster color scheme */
  :root,
  html[data-theme="light"] {
    --color-fill: 246, 238, 225;
    --color-text-base: 1, 44, 86;
    --color-accent: 225, 74, 57;
    --color-card: 220, 152, 145;
    --color-card-muted: 233, 119, 106;
    --color-border: 220, 152, 145;
  }
}

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

Important!!! Forestry is going to be discontinued on April 22nd, 2023. You can read their announcement for more info.

In this article, I will explain step by step process of connecting AstroPaper theme with the Forestry headless CMS. So, let's get started 🎉

Table of contents

What is Forestry?

Forestry is a git-based headless CMS and we can manage our markdown contents easily by using that. Although it is not an open-sourced CMS, it has a good free plan by which we can import up to 3 sites (3 repositories). In this article, I'll demonstrate how we can use Forestry as git-based CMS of our AstroPaper blog theme.

Login / Register an account at Forestry.io

First of all, you have to create an account at Forestry website. I usually sign up with my Github account.

Import AstroPaper site (repository)

This part is importing the repository to Forestry and a little bit of set up process.

Add Site

After logging in/signing up an account, import your AstroPaper site by clicking "Add Site" button.

Select SSG

In this case, just choose "Others"

Select Git Provider

My git provider is Github and I assume yours is the same. So, choose "Github".

After this, the process of importing site (repo) is done.

Set up Sidebar

The next phase after importing site is setting up sidebar menu. You can add many sidebar menu as you want. However, I'll only add one sidebar menu in this case.

Navigate to "Finish setup process" > "Set up sidebar" and click "Configure sitebar"

Then, click "Add Section" button.

After that, choose DIRECTORY for the Section Type.

Then, configure the directory section. You can follow along with my setup.

After this step, you should see a sidebar menu "Blog Posts" and some blog posts.

Set up Media Import

In Forestry CMS, you can set up different options for media (aka assets) such as Cloudinary, git commit media etc. I usually store my assets in Cloudinary. To set up media import, go to Settings > Media. Then select your image storage provider. (I chose Cloudinary).

You can see details of Forestry Cloudinary setup at Forestry documentation.

Set up Front matter template

After setting everything up, you can set up front matter template for your future blog post. To set up front matter template, navigate to "Front matter" menu on the sidebar.

Then, click "Add Template" button at the top right corner.

Select new template based on existing document.

Then, add template name and choose one of my document page as template.

As the final setup, make some adjustment in the front matter field settings.

Here are some adjustments you have to make.

title

• Validation => REQUIRED => true

author

• Default => your name

datetime

• Default => USE "NOW" AS DEFAULT

description

• Validation => REQUIRED => true

Conclusion

You can now post your articles and write whatever you want.