fix: add reactive theme content in zh-CN

withastro · Mar 7, 2024 · b6c9964 · b6c9964
1 parent dcc3340
commit b6c9964
Showing 1 changed file with 32 additions and 0 deletions.
diff --git a/src/content/docs/zh-cn/guides/markdown-content.mdx b/src/content/docs/zh-cn/guides/markdown-content.mdx
@@ -610,6 +610,38 @@ export default defineConfig({
 });
 ```
 
+#### 浅色和深色模式
+
+为了使它们响应你的网站样式，需要加入一些 CSS 片段：
+
+```css title="基于媒体查询的深色模式"
+@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="基于类名的深色模式"
+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;
+}
+```
+
+> [Shiki](https://shiki.style/guide/dual-themes#query-based-dark-mode) 中使用的类名是 `.shiki`，这里需要使用 `.astro-code`。
+
 #### 添加你自己的主题
 
 你可以从本地文件导入自定义主题，而不是使用 Shiki 的预定义主题之一。