Predefined color schemes

I’ve crafted some predefined color schemes for this AstroPaper blog theme. You can replace these color schemes with the original ones.

If you don’t know how you can configure color schemes, check this blog post.

Table of contents

Light color schemes

Light color scheme has to be defined using the css selector :root and html[data-theme="light"].

Lobster

:root,
html[data-theme="light"] {
  --background: #f6eee1;
  --foreground: #012c56;
  --accent: #e14a39;
  --muted: #efd8b0;
  --border: #dc9891;
}

Leaf Blue

:root,
html[data-theme="light"] {
  --background: #f2f5ec;
  --foreground: #353538;
  --accent: #1158d1;
  --muted: #bbc789;
  --border: #7cadff;
}

Pinky light

:root,
html[data-theme="light"] {
  --background: #fafcfc;
  --foreground: #222e36;
  --accent: #d3006a;
  --muted: #f1bad4;
  --border: #e3a9c6;
}

Dark color schemes

Dark color scheme has to be defined as html[data-theme="dark"].

AstroPaper 1 original Dark Theme

html[data-theme="dark"] {
  --background: #2f3741;
  --foreground: #d8dade;
  --accent: #00b4d8;
  --muted: #3a4350;
  --border: #586070;
}

Deep Oyster

html[data-theme="dark"] {
  --background: #0f1624;
  --foreground: #d8dade;
  --accent: #62a3d0;
  --muted: #1e2a3a;
  --border: #3e4a59;
}

Pikky dark

html[data-theme="dark"] {
  --background: #211d20;
  --foreground: #eeeeee;
  --accent: #ff6b9d;
  --muted: #2a2325;
  --border: #574e52;
}

Astro dark (AstroPaper 2 default dark theme)

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

Conclusion

These are some predefined color schemes you can use for your AstroPaper blog. Simply copy the CSS variables and paste them into your src/styles/global.css file. Feel free to modify these values to create your own unique color scheme!