predefined-color-schemes.md

author	pubDatetime	modDatetime	title	slug	featured	draft	tags	description
Sat Naing	2022-09-26 12:13:24 UTC	2024-01-04 09:09:06 UTC	Predefined color schemes	predefined-color-schemes	false	false	color-schemes	Some of the well-crafted, predefined color schemes for AstroPaper blog theme.

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"] {
  --color-fill: 246, 238, 225;
  --color-text-base: 1, 44, 86;
  --color-accent: 225, 74, 57;
  --color-card: 217, 209, 195;
  --color-card-muted: 239, 216, 176;
  --color-border: 220, 152, 145;
}

Leaf Blue

:root,
html[data-theme="light"] {
  --color-fill: 242, 245, 236;
  --color-text-base: 53, 53, 56;
  --color-accent: 17, 88, 209;
  --color-card: 206, 213, 180;
  --color-card-muted: 187, 199, 137;
  --color-border: 124, 173, 255;
}

Pinky light

:root,
html[data-theme="light"] {
  --color-fill: 250, 252, 252;
  --color-text-base: 34, 46, 54;
  --color-accent: 211, 0, 106;
  --color-card: 234, 206, 219;
  --color-card-muted: 241, 186, 212;
  --color-border: 227, 169, 198;
}

Dark color schemes

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

AstroPaper 1 original Dark Theme

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;
}

Deep Oyster

html[data-theme="dark"] {
  --color-fill: 33, 35, 61;
  --color-text-base: 244, 247, 245;
  --color-accent: 255, 82, 86;
  --color-card: 57, 60, 102;
  --color-card-muted: 74, 78, 134;
  --color-border: 177, 47, 50;
}

Pikky dark

html[data-theme="dark"] {
  --color-fill: 53, 54, 64;
  --color-text-base: 233, 237, 241;
  --color-accent: 255, 120, 200;
  --color-card: 75, 76, 89;
  --color-card-muted: 113, 85, 102;
  --color-border: 134, 67, 107;
}

Astro dark (High Contrast)

html[data-theme="dark"] {
  --color-fill: 16, 23, 42; /* higher contrast bgColor */
  --color-fill: 33, 39, 55;
  --color-text-base: 234, 237, 243;
  --color-accent: 255, 107, 1;
  --color-card: 27, 39, 70;
  --color-card-muted: 138, 51, 2;
  --color-border: 171, 75, 8;
}

Astro dark (New default dark theme in AstroPaper 2)

html[data-theme="dark"] {
  --color-fill: 33, 39, 55; /* lower contrast bgColor */
  --color-text-base: 234, 237, 243;
  --color-accent: 255, 107, 1;
  --color-card: 52, 63, 96;
  --color-card-muted: 138, 51, 2;
  --color-border: 171, 75, 8;
}

Astro Deep Purple (New dark theme in AstroPaper 3)

html[data-theme="dark"] {
  --color-fill: 33, 39, 55;
  --color-text-base: 234, 237, 243;
  --color-accent: 235, 63, 211;
  --color-card: 52, 63, 96;
  --color-card-muted: 125, 79, 124;
  --color-border: 100, 36, 81;
}

AstroPaper v4 Special (New dark theme in AstroPaper 4)

html[data-theme="dark"] {
  --color-fill: 0, 1, 35;
  --color-accent: 97, 123, 255;
  --color-text-base: 234, 237, 243;
  --color-card: 33, 34, 83;
  --color-card-muted: 12, 14, 79;
  --color-border: 48, 63, 138;
}