From dcc3340975ccd508bc4a8491315d049c29114773 Mon Sep 17 00:00:00 2001
From: kaivanwong <kaivanwong@outlook.com>
Date: Thu, 7 Mar 2024 20:24:28 +0800
Subject: [PATCH] fix: add reactive theme content

---
 .../docs/en/guides/markdown-content.mdx       | 33 +++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/src/content/docs/en/guides/markdown-content.mdx b/src/content/docs/en/guides/markdown-content.mdx
index 9950bf9487dc1..24a8ca3e74fa0 100644
--- a/src/content/docs/en/guides/markdown-content.mdx
+++ b/src/content/docs/en/guides/markdown-content.mdx
@@ -613,6 +613,39 @@ export default defineConfig({
 });
 ```
 
+#### Light and Dark Mode
+
+To make it reactive to your site's theme, you need to add a short CSS snippet:
+
+```css title="Query-based Dark Mode"
+@media (prefers-color-scheme: dark) {
+  .astro-code,
+  .astro-code span {
+    color: var(--shiki-dark) !important;
+    background-color: var(--shiki-dark-bg) !important;
+    /* Optional, if you also want font styles */
+    font-style: var(--shiki-dark-font-style) !important;
+    font-weight: var(--shiki-dark-font-weight) !important;
+    text-decoration: var(--shiki-dark-text-decoration) !important;
+  }
+}
+```
+
+```css title="Class-based Dark Mode"
+html.dark .astro-code,
+html.dark .astro-code span {
+  color: var(--shiki-dark) !important;
+  background-color: var(--shiki-dark-bg) !important;
+  /* Optional, if you also want font styles */
+  font-style: var(--shiki-dark-font-style) !important;
+  font-weight: var(--shiki-dark-font-weight) !important;
+  text-decoration: var(--shiki-dark-text-decoration) !important;
+}
+```
+
+> The class name used in [shiki](https://shiki.style/guide/dual-themes#query-based-dark-mode) is `.shiki`, here you need to use `.astro-code`.
+
+
 #### Adding your own theme
 
 Instead of using one of Shiki’s predefined themes, you can import a custom theme from a local file.