docs: update color schemes guide for AstroPaper v5 (#469)

This commit is contained in:
Erison Silva
2025-03-12 09:54:28 -03:00
committed by GitHub
parent 212fd5c550
commit 77ff6b4f64
+50 -61
View File
@@ -30,12 +30,11 @@ Light color scheme has to be defined using the css selector `:root` and `html[da
```css ```css
:root, :root,
html[data-theme="light"] { html[data-theme="light"] {
--color-fill: 246, 238, 225; --background: #f6eee1;
--color-text-base: 1, 44, 86; --foreground: #012c56;
--color-accent: 225, 74, 57; --accent: #e14a39;
--color-card: 217, 209, 195; --muted: #efd8b0;
--color-card-muted: 239, 216, 176; --border: #dc9891;
--color-border: 220, 152, 145;
} }
``` ```
@@ -46,12 +45,11 @@ html[data-theme="light"] {
```css ```css
:root, :root,
html[data-theme="light"] { html[data-theme="light"] {
--color-fill: 242, 245, 236; --background: #f2f5ec;
--color-text-base: 53, 53, 56; --foreground: #353538;
--color-accent: 17, 88, 209; --accent: #1158d1;
--color-card: 206, 213, 180; --muted: #bbc789;
--color-card-muted: 187, 199, 137; --border: #7cadff;
--color-border: 124, 173, 255;
} }
``` ```
@@ -62,12 +60,11 @@ html[data-theme="light"] {
```css ```css
:root, :root,
html[data-theme="light"] { html[data-theme="light"] {
--color-fill: 250, 252, 252; --background: #fafcfc;
--color-text-base: 34, 46, 54; --foreground: #222e36;
--color-accent: 211, 0, 106; --accent: #d3006a;
--color-card: 234, 206, 219; --muted: #f1bad4;
--color-card-muted: 241, 186, 212; --border: #e3a9c6;
--color-border: 227, 169, 198;
} }
``` ```
@@ -81,12 +78,11 @@ Dark color scheme has to be defined as `html[data-theme="dark"]`.
```css ```css
html[data-theme="dark"] { html[data-theme="dark"] {
--color-fill: 47, 55, 65; --background: #2f3741;
--color-text-base: 230, 230, 230; --foreground: #e6e6e6;
--color-accent: 26, 217, 217; --accent: #1ad9d9;
--color-card: 63, 75, 90; --muted: #596b81;
--color-card-muted: 89, 107, 129; --border: #3b4655;
--color-border: 59, 70, 85;
} }
``` ```
@@ -96,12 +92,11 @@ html[data-theme="dark"] {
```css ```css
html[data-theme="dark"] { html[data-theme="dark"] {
--color-fill: 33, 35, 61; --background: #21233d;
--color-text-base: 244, 247, 245; --foreground: #f4f7f5;
--color-accent: 255, 82, 86; --accent: #ff5256;
--color-card: 57, 60, 102; --muted: #4a4e86;
--color-card-muted: 74, 78, 134; --border: #b12f32;
--color-border: 177, 47, 50;
} }
``` ```
@@ -111,12 +106,11 @@ html[data-theme="dark"] {
```css ```css
html[data-theme="dark"] { html[data-theme="dark"] {
--color-fill: 53, 54, 64; --background: #353640;
--color-text-base: 233, 237, 241; --foreground: #e9edf1;
--color-accent: 255, 120, 200; --accent: #ff78c8;
--color-card: 75, 76, 89; --muted: #715566;
--color-card-muted: 113, 85, 102; --border: #86436b;
--color-border: 134, 67, 107;
} }
``` ```
@@ -126,13 +120,11 @@ html[data-theme="dark"] {
```css ```css
html[data-theme="dark"] { html[data-theme="dark"] {
--color-fill: 16, 23, 42; /* higher contrast bgColor */ --background: #212737;
--color-fill: 33, 39, 55; --foreground: #eaedf3;
--color-text-base: 234, 237, 243; --accent: #ff6b01;
--color-accent: 255, 107, 1; --muted: #8a3302;
--color-card: 27, 39, 70; --border: #ab4b08;
--color-card-muted: 138, 51, 2;
--color-border: 171, 75, 8;
} }
``` ```
@@ -142,12 +134,11 @@ html[data-theme="dark"] {
```css ```css
html[data-theme="dark"] { html[data-theme="dark"] {
--color-fill: 33, 39, 55; /* lower contrast bgColor */ --background: #212737; /* lower contrast background */
--color-text-base: 234, 237, 243; --foreground: #eaedf3;
--color-accent: 255, 107, 1; --accent: #ff6b01;
--color-card: 52, 63, 96; --muted: #8a3302;
--color-card-muted: 138, 51, 2; --border: #ab4b08;
--color-border: 171, 75, 8;
} }
``` ```
@@ -157,12 +148,11 @@ html[data-theme="dark"] {
```css ```css
html[data-theme="dark"] { html[data-theme="dark"] {
--color-fill: 33, 39, 55; --background: #212737;
--color-text-base: 234, 237, 243; --foreground: #eaedf3;
--color-accent: 235, 63, 211; --accent: #eb3fd3;
--color-card: 52, 63, 96; --muted: #7d4f7c;
--color-card-muted: 125, 79, 124; --border: #642451;
--color-border: 100, 36, 81;
} }
``` ```
@@ -172,11 +162,10 @@ html[data-theme="dark"] {
```css ```css
html[data-theme="dark"] { html[data-theme="dark"] {
--color-fill: 0, 1, 35; --background: #000123;
--color-accent: 97, 123, 255; --accent: #617bff;
--color-text-base: 234, 237, 243; --foreground: #eaedf3;
--color-card: 33, 34, 83; --muted: #0c0e4f;
--color-card-muted: 12, 14, 79; --border: #303f8a;
--color-border: 48, 63, 138;
} }
``` ```