From 316bdd82038f03e39ee16a93ff8d6d4c3c2d6c19 Mon Sep 17 00:00:00 2001
From: Frederik <77615388+fre-ben@users.noreply.github.com>
Date: Mon, 9 Jun 2025 09:47:57 +0200
Subject: [PATCH] docs: update customize-color-schemes doc (#523)

* docs: update customize-color-schemes doc to match current file structure and files

* docs: update color-schemes customization docs

---------

Co-authored-by: satnaing <satnaingdev@gmail.com>
---
 ...tomizing-astropaper-theme-color-schemes.md | 86 +++++++++----------
 1 file changed, 41 insertions(+), 45 deletions(-)

diff --git a/src/data/blog/customizing-astropaper-theme-color-schemes.md b/src/data/blog/customizing-astropaper-theme-color-schemes.md
index eb99c98..0e6b2eb 100644
--- a/src/data/blog/customizing-astropaper-theme-color-schemes.md
+++ b/src/data/blog/customizing-astropaper-theme-color-schemes.md
@@ -1,6 +1,7 @@
 ---
 author: Sat Naing
 pubDatetime: 2022-09-25T15:20:35Z
+modDatetime: 2025-06-09T07:42:54.791Z
 title: Customizing AstroPaper theme color schemes
 featured: false
 draft: false
@@ -67,66 +68,61 @@ The **primaryColorScheme** variable can hold two values\_ `"light"`, `"dark"`. Y
 
 ## Customize color schemes
 
-Both light & dark color schemes of AstroPaper theme can be customized. You can do this in `src/styles/base.css` file.
+Both light & dark color schemes of AstroPaper theme can be customized. You can do this in `src/styles/global.css` file.
 
 ```css
-/* file: src/styles/base.css */
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+/* file: src/styles/global.css */
+@import "tailwindcss";
+@import "./typography.css";
 
-@layer base {
-  :root,
-  html[data-theme="light"] {
-    --color-fill: 251, 254, 251;
-    --color-text-base: 40, 39, 40;
-    --color-accent: 0, 108, 172;
-    --color-card: 230, 230, 230;
-    --color-card-muted: 205, 205, 205;
-    --color-border: 236, 233, 233;
-  }
-  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;
-  }
-  /* other styles */
+@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
+
+:root,
+html[data-theme="light"] {
+  --background: #fdfdfd;
+  --foreground: #282728;
+  --accent: #006cac;
+  --muted: #e6e6e6;
+  --border: #ece9e9;
 }
+
+html[data-theme="dark"] {
+  --background: #212737;
+  --foreground: #eaedf3;
+  --accent: #ff6b01;
+  --muted: #343f60bf;
+  --border: #ab4b08;
+}
+/* other styles */
 ```
 
-In AstroPaper theme, `:root` and `html[data-theme="light"]` selectors are used as the light color scheme and `html[data-theme="dark"]` is used the dark color scheme. If you want to customize your custom color scheme, you have to specify your light color scheme inside `:root`,`html[data-theme="light"]` and dark color scheme inside `html[data-theme="dark"]`.
+In the AstroPaper theme, the `:root` and `html[data-theme="light"]` selectors define the light color scheme, while `html[data-theme="dark"]` defines the dark color scheme.
 
-Colors are declared in CSS custom property (CSS Variable) notation. Color property values are written in rgb values. (Note: instead of `rgb(40, 39, 40)`, only specify `40, 39, 40`)
+To customize your own color scheme, specify your light colors inside `:root, html[data-theme="light"]`, and your dark colors inside `html[data-theme="dark"]`.
 
 Here is the detail explanation of color properties.
 
-| Color Property       | Definition & Usage                                         |
-| -------------------- | ---------------------------------------------------------- |
-| `--color-fill`       | Primary color of the website. Usually the main background. |
-| `--color-text-base`  | Secondary color of the website. Usually the text color.    |
-| `--color-accent`     | Accent color of the website. Link color, hover color etc.  |
-| `--color-card`       | Card, scrollbar and code background color (like `this`).   |
-| `--color-card-muted` | Card and scrollbar background color for hover state etc.   |
-| `--color-border`     | Border color. Especially used in horizontal row (hr)       |
+| Color Property | Definition & Usage                                         |
+| -------------- | ---------------------------------------------------------- |
+| `--background` | Primary color of the website. Usually the main background. |
+| `--foreground` | Secondary color of the website. Usually the text color.    |
+| `--accent`     | Accent color of the website. Link color, hover color etc.  |
+| `--muted`      | Card and scrollbar background color for hover state etc.   |
+| `--border`     | Border color. Especially used in horizontal row (hr)       |
 
 Here is an example of changing the light color scheme.
 
 ```css
-@layer base {
-  /* lobster color scheme */
-  :root,
-  html[data-theme="light"] {
-    --color-fill: 246, 238, 225;
-    --color-text-base: 1, 44, 86;
-    --color-accent: 225, 74, 57;
-    --color-card: 220, 152, 145;
-    --color-card-muted: 233, 119, 106;
-    --color-border: 220, 152, 145;
-  }
+/* other styles */
+:root,
+html[data-theme="light"] {
+  --background: #f6eee1;
+  --foreground: #012c56;
+  --accent: #e14a39;
+  --muted: #efd8b0;
+  --border: #dc9891;
 }
+/* other styles */
 ```
 
 > Check out some [predefined color schemes](https://astro-paper.pages.dev/posts/predefined-color-schemes/) AstroPaper has already crafted for you.