From f04f01ee32b915d018e8e93397a044e3719d3ca5 Mon Sep 17 00:00:00 2001
From: Sat Naing <satnaingdev@gmail.com>
Date: Mon, 26 Sep 2022 12:04:33 +0630
Subject: [PATCH] Update color scheme article

---
 ...tomizing-astropaper-theme-color-schemes.md | 40 +++++++++++++++++--
 1 file changed, 37 insertions(+), 3 deletions(-)

diff --git a/src/contents/customizing-astropaper-theme-color-schemes.md b/src/contents/customizing-astropaper-theme-color-schemes.md
index 35bd1ed..ba57b2c 100644
--- a/src/contents/customizing-astropaper-theme-color-schemes.md
+++ b/src/contents/customizing-astropaper-theme-color-schemes.md
@@ -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 */