From a827f758d3b6d050f9c597842be6fec85186c15a Mon Sep 17 00:00:00 2001 From: satnaing Date: Tue, 31 Jan 2023 20:06:02 +0630 Subject: [PATCH] docs: add AstroPaper 2 dark theme lower contrast --- src/content/blog/predefined-color-schemes.md | 39 ++++++++++++++++++-- 1 file changed, 35 insertions(+), 4 deletions(-) diff --git a/src/content/blog/predefined-color-schemes.md b/src/content/blog/predefined-color-schemes.md index fc0f6fe..31198b8 100644 --- a/src/content/blog/predefined-color-schemes.md +++ b/src/content/blog/predefined-color-schemes.md @@ -75,6 +75,21 @@ html[data-theme="light"] { Light color scheme has to be defined as `html[data-theme="dark"]`. +### AstroPaper 1 original Dark Theme + +![AstroPaper 1 default dark theme](https://user-images.githubusercontent.com/53733092/215769153-13b0ad8d-5ba2-44b1-af06-e5ae61293f62.png) + +```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; +} +``` + ### Deep Oyster ![deep-oyster-color-scheme](https://user-images.githubusercontent.com/53733092/192314524-45ec5904-3d8f-450a-9edf-1e32c5e11d6c.png) @@ -105,17 +120,33 @@ html[data-theme="dark"] { } ``` -### Astro dark +### Astro dark (High Contrast) ![astro-dark-color-scheme](https://user-images.githubusercontent.com/53733092/215680520-59427bb0-f4cb-48c0-bccc-f182a428d72d.svg) ```css html[data-theme="dark"] { - --color-fill: 16, 23, 42; + --color-fill: 16, 23, 42; /* higher contrast bgColor */ + --color-fill: 33, 39, 55; --color-text-base: 234, 237, 243; - --color-accent: 254, 93, 1; + --color-accent: 255, 107, 1; --color-card: 27, 39, 70; --color-card-muted: 138, 51, 2; - --color-border: 141, 56, 8; + --color-border: 171, 75, 8; +} +``` + +### Astro dark (New default dark theme in AstroPaper 2) + +![new dark color scheme - low contrast](https://user-images.githubusercontent.com/53733092/215772856-d5b7ae35-ddaa-4ed6-b0bf-3fa5dbcf834c.png) + +```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: 27, 39, 70; + --color-card-muted: 138, 51, 2; + --color-border: 171, 75, 8; } ```