Skip to content

Predefined color schemes

September 26, 2022 | 12:13 PM

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

Open Table of contents

Light color schemes

Light color scheme has to be defined as :root.

Lobster

lobster-color-scheme

:root {
  --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

leaf-blue-color-scheme

:root {
  --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

pinky-color-scheme

:root {
  --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

Light color scheme has to be defined as .theme-dark.

Deep Oyster

deep-oyster-color-scheme

.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

pinky-dark-color-scheme

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