mirror of
https://github.com/ChenQihan666/MyBlog-Next.git
synced 2026-08-14 11:29:33 +08:00
docs: update color schemes guide for AstroPaper v5 (#469)
This commit is contained in:
Erison Silva
@@ -30,12 +30,11 @@ Light color scheme has to be defined using the css selector `:root` and `html[da
|
||||
```css
|
||||
: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;
|
||||
--background: #f6eee1;
|
||||
--foreground: #012c56;
|
||||
--accent: #e14a39;
|
||||
--muted: #efd8b0;
|
||||
--border: #dc9891;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -46,12 +45,11 @@ html[data-theme="light"] {
|
||||
```css
|
||||
: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;
|
||||
--background: #f2f5ec;
|
||||
--foreground: #353538;
|
||||
--accent: #1158d1;
|
||||
--muted: #bbc789;
|
||||
--border: #7cadff;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -62,12 +60,11 @@ html[data-theme="light"] {
|
||||
```css
|
||||
: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;
|
||||
--background: #fafcfc;
|
||||
--foreground: #222e36;
|
||||
--accent: #d3006a;
|
||||
--muted: #f1bad4;
|
||||
--border: #e3a9c6;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -81,12 +78,11 @@ Dark color scheme has to be defined as `html[data-theme="dark"]`.
|
||||
|
||||
```css
|
||||
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;
|
||||
--background: #2f3741;
|
||||
--foreground: #e6e6e6;
|
||||
--accent: #1ad9d9;
|
||||
--muted: #596b81;
|
||||
--border: #3b4655;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -96,12 +92,11 @@ html[data-theme="dark"] {
|
||||
|
||||
```css
|
||||
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;
|
||||
--background: #21233d;
|
||||
--foreground: #f4f7f5;
|
||||
--accent: #ff5256;
|
||||
--muted: #4a4e86;
|
||||
--border: #b12f32;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -111,12 +106,11 @@ html[data-theme="dark"] {
|
||||
|
||||
```css
|
||||
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;
|
||||
--background: #353640;
|
||||
--foreground: #e9edf1;
|
||||
--accent: #ff78c8;
|
||||
--muted: #715566;
|
||||
--border: #86436b;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -126,13 +120,11 @@ html[data-theme="dark"] {
|
||||
|
||||
```css
|
||||
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;
|
||||
--background: #212737;
|
||||
--foreground: #eaedf3;
|
||||
--accent: #ff6b01;
|
||||
--muted: #8a3302;
|
||||
--border: #ab4b08;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -142,12 +134,11 @@ html[data-theme="dark"] {
|
||||
|
||||
```css
|
||||
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;
|
||||
--background: #212737; /* lower contrast background */
|
||||
--foreground: #eaedf3;
|
||||
--accent: #ff6b01;
|
||||
--muted: #8a3302;
|
||||
--border: #ab4b08;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -157,12 +148,11 @@ html[data-theme="dark"] {
|
||||
|
||||
```css
|
||||
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;
|
||||
--background: #212737;
|
||||
--foreground: #eaedf3;
|
||||
--accent: #eb3fd3;
|
||||
--muted: #7d4f7c;
|
||||
--border: #642451;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -172,11 +162,10 @@ html[data-theme="dark"] {
|
||||
|
||||
```css
|
||||
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;
|
||||
--background: #000123;
|
||||
--accent: #617bff;
|
||||
--foreground: #eaedf3;
|
||||
--muted: #0c0e4f;
|
||||
--border: #303f8a;
|
||||
}
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user