fix: add reactive theme content

withastro · Mar 7, 2024 · dcc3340 · dcc3340
1 parent f547c76
commit dcc3340
Showing 1 changed file with 33 additions and 0 deletions.
diff --git 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.