Qihan/MyBlog-Next
1
0
Fork 0
mirror of https://github.com/ChenQihan666/MyBlog-Next.git synced 2026-08-14 11:29:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs: update customize-color-schemes doc (#523)

Browse Source 
* 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>
This commit is contained in:
Frederik
2025-06-09 09:47:57 +02:00
committed by GitHub
parent 5f72b93d92
commit 316bdd8203
1 changed files with 41 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/data/blog/customizing-astropaper-theme-color-schemes.md
+40 -44
View File
@@ -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) |
| -------------- | ---------------------------------------------------------- |
| `--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.