docs: update typography to support dark mode (#7342)

docs/examples/typography/font.vue

@@ -1,11 +1,21 @@
+<script lang="ts" setup>
+import { isDark } from '~/composables/dark'
+</script>
+
 <template>
-  <div class="demo-term-box">
-    <img src="/images/term-pingfang.png" alt="" />
-    <img src="/images/term-hiragino.png" alt="" />
-    <img src="/images/term-microsoft.png" alt="" />
-    <img src="/images/term-sf.png" alt="" />
-    <img src="/images/term-helvetica.png" alt="" />
-    <img src="/images/term-arial.png" alt="" />
+  <div v-if="!isDark" class="demo-term-box">
+    <img src="/images/typography/term-pingfang.png" alt="" />
+    <img src="/images/typography/term-hiragino.png" alt="" />
+    <img src="/images/typography/term-microsoft.png" alt="" />
+    <img src="/images/typography/term-helvetica.png" alt="" />
+    <img src="/images/typography/term-arial.png" alt="" />
+  </div>
+  <div v-else class="demo-term-box">
+    <img src="/images/typography/term-pingfang-dark.png" alt="" />
+    <img src="/images/typography/term-hiragino-dark.png" alt="" />
+    <img src="/images/typography/term-microsoft-dark.png" alt="" />
+    <img src="/images/typography/term-helvetica-dark.png" alt="" />
+    <img src="/images/typography/term-arial-dark.png" alt="" />
   </div>
 </template>
 

docs/examples/typography/line-height.vue

@@ -1,6 +1,15 @@
+<script lang="ts" setup>
+import { isDark } from '~/composables/dark'
+</script>
+
 <template>
   <div>
-    <img class="lineH-left" src="/images/typography.png" />
+    <img
+      v-if="isDark"
+      class="lineH-left"
+      src="/images/typography/line-height-dark.png"
+    />
+    <img v-else class="lineH-left" src="/images/typography/line-height.png" />
     <ul class="lineH-right">
       <li>line-height:1 <span>No line height</span></li>
       <li>line-height:1.3 <span>Compact</span></li>