Skip to content

Commit 77ff6b4

Browse files
authored
docs: update color schemes guide for AstroPaper v5 (#469)
1 parent 212fd5c commit 77ff6b4

1 file changed

Lines changed: 50 additions & 61 deletions

File tree

src/data/blog/predefined-color-schemes.md

Lines changed: 50 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -30,12 +30,11 @@ Light color scheme has to be defined using the css selector `:root` and `html[da
3030
```css
3131
:root,
3232
html[data-theme="light"] {
33-
--color-fill: 246, 238, 225;
34-
--color-text-base: 1, 44, 86;
35-
--color-accent: 225, 74, 57;
36-
--color-card: 217, 209, 195;
37-
--color-card-muted: 239, 216, 176;
38-
--color-border: 220, 152, 145;
33+
--background: #f6eee1;
34+
--foreground: #012c56;
35+
--accent: #e14a39;
36+
--muted: #efd8b0;
37+
--border: #dc9891;
3938
}
4039
```
4140

@@ -46,12 +45,11 @@ html[data-theme="light"] {
4645
```css
4746
:root,
4847
html[data-theme="light"] {
49-
--color-fill: 242, 245, 236;
50-
--color-text-base: 53, 53, 56;
51-
--color-accent: 17, 88, 209;
52-
--color-card: 206, 213, 180;
53-
--color-card-muted: 187, 199, 137;
54-
--color-border: 124, 173, 255;
48+
--background: #f2f5ec;
49+
--foreground: #353538;
50+
--accent: #1158d1;
51+
--muted: #bbc789;
52+
--border: #7cadff;
5553
}
5654
```
5755

@@ -62,12 +60,11 @@ html[data-theme="light"] {
6260
```css
6361
:root,
6462
html[data-theme="light"] {
65-
--color-fill: 250, 252, 252;
66-
--color-text-base: 34, 46, 54;
67-
--color-accent: 211, 0, 106;
68-
--color-card: 234, 206, 219;
69-
--color-card-muted: 241, 186, 212;
70-
--color-border: 227, 169, 198;
63+
--background: #fafcfc;
64+
--foreground: #222e36;
65+
--accent: #d3006a;
66+
--muted: #f1bad4;
67+
--border: #e3a9c6;
7168
}
7269
```
7370

@@ -81,12 +78,11 @@ Dark color scheme has to be defined as `html[data-theme="dark"]`.
8178

8279
```css
8380
html[data-theme="dark"] {
84-
--color-fill: 47, 55, 65;
85-
--color-text-base: 230, 230, 230;
86-
--color-accent: 26, 217, 217;
87-
--color-card: 63, 75, 90;
88-
--color-card-muted: 89, 107, 129;
89-
--color-border: 59, 70, 85;
81+
--background: #2f3741;
82+
--foreground: #e6e6e6;
83+
--accent: #1ad9d9;
84+
--muted: #596b81;
85+
--border: #3b4655;
9086
}
9187
```
9288

@@ -96,12 +92,11 @@ html[data-theme="dark"] {
9692

9793
```css
9894
html[data-theme="dark"] {
99-
--color-fill: 33, 35, 61;
100-
--color-text-base: 244, 247, 245;
101-
--color-accent: 255, 82, 86;
102-
--color-card: 57, 60, 102;
103-
--color-card-muted: 74, 78, 134;
104-
--color-border: 177, 47, 50;
95+
--background: #21233d;
96+
--foreground: #f4f7f5;
97+
--accent: #ff5256;
98+
--muted: #4a4e86;
99+
--border: #b12f32;
105100
}
106101
```
107102

@@ -111,12 +106,11 @@ html[data-theme="dark"] {
111106

112107
```css
113108
html[data-theme="dark"] {
114-
--color-fill: 53, 54, 64;
115-
--color-text-base: 233, 237, 241;
116-
--color-accent: 255, 120, 200;
117-
--color-card: 75, 76, 89;
118-
--color-card-muted: 113, 85, 102;
119-
--color-border: 134, 67, 107;
109+
--background: #353640;
110+
--foreground: #e9edf1;
111+
--accent: #ff78c8;
112+
--muted: #715566;
113+
--border: #86436b;
120114
}
121115
```
122116

@@ -126,13 +120,11 @@ html[data-theme="dark"] {
126120

127121
```css
128122
html[data-theme="dark"] {
129-
--color-fill: 16, 23, 42; /* higher contrast bgColor */
130-
--color-fill: 33, 39, 55;
131-
--color-text-base: 234, 237, 243;
132-
--color-accent: 255, 107, 1;
133-
--color-card: 27, 39, 70;
134-
--color-card-muted: 138, 51, 2;
135-
--color-border: 171, 75, 8;
123+
--background: #212737;
124+
--foreground: #eaedf3;
125+
--accent: #ff6b01;
126+
--muted: #8a3302;
127+
--border: #ab4b08;
136128
}
137129
```
138130

@@ -142,12 +134,11 @@ html[data-theme="dark"] {
142134

143135
```css
144136
html[data-theme="dark"] {
145-
--color-fill: 33, 39, 55; /* lower contrast bgColor */
146-
--color-text-base: 234, 237, 243;
147-
--color-accent: 255, 107, 1;
148-
--color-card: 52, 63, 96;
149-
--color-card-muted: 138, 51, 2;
150-
--color-border: 171, 75, 8;
137+
--background: #212737; /* lower contrast background */
138+
--foreground: #eaedf3;
139+
--accent: #ff6b01;
140+
--muted: #8a3302;
141+
--border: #ab4b08;
151142
}
152143
```
153144

@@ -157,12 +148,11 @@ html[data-theme="dark"] {
157148

158149
```css
159150
html[data-theme="dark"] {
160-
--color-fill: 33, 39, 55;
161-
--color-text-base: 234, 237, 243;
162-
--color-accent: 235, 63, 211;
163-
--color-card: 52, 63, 96;
164-
--color-card-muted: 125, 79, 124;
165-
--color-border: 100, 36, 81;
151+
--background: #212737;
152+
--foreground: #eaedf3;
153+
--accent: #eb3fd3;
154+
--muted: #7d4f7c;
155+
--border: #642451;
166156
}
167157
```
168158

@@ -172,11 +162,10 @@ html[data-theme="dark"] {
172162

173163
```css
174164
html[data-theme="dark"] {
175-
--color-fill: 0, 1, 35;
176-
--color-accent: 97, 123, 255;
177-
--color-text-base: 234, 237, 243;
178-
--color-card: 33, 34, 83;
179-
--color-card-muted: 12, 14, 79;
180-
--color-border: 48, 63, 138;
165+
--background: #000123;
166+
--accent: #617bff;
167+
--foreground: #eaedf3;
168+
--muted: #0c0e4f;
169+
--border: #303f8a;
181170
}
182171
```

0 commit comments

Comments
 (0)