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
+33 -37
View File
@@ -1,6 +1,7 @@
--- ---
author: Sat Naing author: Sat Naing
pubDatetime: 2022-09-25T15:20:35Z pubDatetime: 2022-09-25T15:20:35Z
modDatetime: 2025-06-09T07:42:54.791Z
title: Customizing AstroPaper theme color schemes title: Customizing AstroPaper theme color schemes
featured: false featured: false
draft: false draft: false
@@ -67,66 +68,61 @@ The **primaryColorScheme** variable can hold two values\_ `"light"`, `"dark"`. Y
## Customize color schemes ## 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 ```css
/* file: src/styles/base.css */ /* file: src/styles/global.css */
@tailwind base; @import "tailwindcss";
@tailwind components; @import "./typography.css";
@tailwind utilities;
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
@layer base {
:root, :root,
html[data-theme="light"] { html[data-theme="light"] {
--color-fill: 251, 254, 251; --background: #fdfdfd;
--color-text-base: 40, 39, 40; --foreground: #282728;
--color-accent: 0, 108, 172; --accent: #006cac;
--color-card: 230, 230, 230; --muted: #e6e6e6;
--color-card-muted: 205, 205, 205; --border: #ece9e9;
--color-border: 236, 233, 233;
} }
html[data-theme="dark"] { html[data-theme="dark"] {
--color-fill: 47, 55, 65; --background: #212737;
--color-text-base: 230, 230, 230; --foreground: #eaedf3;
--color-accent: 26, 217, 217; --accent: #ff6b01;
--color-card: 63, 75, 90; --muted: #343f60bf;
--color-card-muted: 89, 107, 129; --border: #ab4b08;
--color-border: 59, 70, 85;
} }
/* other styles */ /* 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. Here is the detail explanation of color properties.
| Color Property | Definition & Usage | | Color Property | Definition & Usage |
| -------------------- | ---------------------------------------------------------- | | -------------- | ---------------------------------------------------------- |
| `--color-fill` | Primary color of the website. Usually the main background. | | `--background` | Primary color of the website. Usually the main background. |
| `--color-text-base` | Secondary color of the website. Usually the text color. | | `--foreground` | Secondary color of the website. Usually the text color. |
| `--color-accent` | Accent color of the website. Link color, hover color etc. | | `--accent` | Accent color of the website. Link color, hover color etc. |
| `--color-card` | Card, scrollbar and code background color (like `this`). | | `--muted` | Card and scrollbar background color for hover state etc. |
| `--color-card-muted` | Card and scrollbar background color for hover state etc. | | `--border` | Border color. Especially used in horizontal row (hr) |
| `--color-border` | Border color. Especially used in horizontal row (hr) |
Here is an example of changing the light color scheme. Here is an example of changing the light color scheme.
```css ```css
@layer base { /* other styles */
/* lobster color scheme */
: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: 220, 152, 145; --muted: #efd8b0;
--color-card-muted: 233, 119, 106; --border: #dc9891;
--color-border: 220, 152, 145;
}
} }
/* other styles */
``` ```
> Check out some [predefined color schemes](https://astro-paper.pages.dev/posts/predefined-color-schemes/) AstroPaper has already crafted for you. > Check out some [predefined color schemes](https://astro-paper.pages.dev/posts/predefined-color-schemes/) AstroPaper has already crafted for you.