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

Update color scheme article

Browse Source
This commit is contained in:
Sat Naing
2022-09-26 12:04:33 +06:30
parent 3bc440144a
commit f04f01ee32
1 changed files with 37 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/contents/customizing-astropaper-theme-color-schemes.md
+37 -3
View File
@@ -37,6 +37,40 @@ export const SITE = {
To disable `light & dark mode` set `SITE.lightAndDarkMode` to `false`.
## Choose primary color scheme
By default, if we disable `SITE.lightAndDarkMode`, we will only get system's prefers-color-scheme.
Thus, to choose primary color scheme instead of prefers-color-scheme, we have to set color scheme in the primaryColorScheme variable inside `src/layouts/Layout.astro`.
```html
<!-- src/layouts/Layout.astro -->
<script is:inline>
const primaryColorScheme = "none"; // "light" | "dark" | "none"
const darkModeMediaQuery = window.matchMedia(
"(prefers-color-scheme: dark)"
).matches;
// Get theme data from local storage
const currentTheme = localStorage.getItem("theme");
// some more script codes ...
</script>
```
The **primaryColorScheme** variable can hold three values_ `"light"`, `"dark"`, `"none"`.
- `"none"` - system's prefers-color-scheme. (default)
- `"light"` - use light mode as primary color scheme.
- `"dark"` - use dark mode as primary color scheme.
<details><summary>Why 'primaryColorScheme' is not inside config.ts?</summary>
> To avoid color flickering on page reload, we have to place some JavaScript codes in the inline script tag. It solves the problem of flickering, but as a trade-off, we cannot use ESM imports anymore.
[Click here](https://docs.astro.build/en/core-concepts/astro-components/#client-side-scripts) to know more about Astro's inline script.
</details>
## Customize color schemes
Both light & dark color schemes of AstroPaper theme can be customized. You can do this in `src/styles/base.css` file.
@@ -68,7 +102,7 @@ Both light & dark color schemes of AstroPaper theme can be customized. You can d
}
```
In AstroPaper theme, **:root** is the primary (light) color scheme and **.theme-dark** is the secondary (dark) color scheme.
In AstroPaper theme, `:root` is the light color scheme and `.theme-dark` is the dark color scheme. If you want to customize your custom color scheme, it is **_recommended_** that you set light color scheme inside `:root` and dark color scheme inside `.theme-dark`.
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`)
@@ -79,11 +113,11 @@ Here is the detail explaination of color properties.
| `--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 and scrollbar background color. |
| `--color-card` | Card, scrollbar and code background color. |
| `--color-card-muted` | Card and scrollbar background color for hover state etc. |
| `--color-border` | Border color. Especially used in horizontal row (hr) |
Here is an example of changing the primary color scheme.
Here is an example of changing the light color scheme.
```css
@layer base {
/* lobster color scheme */