fix(Card): 修复暗黑模式下样式显示异常

Signed-off-by: Tenny <joel.shu@qq.com>

Author: Tenny

docs/.vitepress/config.ts

@@ -58,6 +58,10 @@ export default defineConfig({
             text: '工具样式',
             link: '/css-util',
           },
+          {
+            text: '暗黑模式',
+            link: '/dark',
+          },
         ],
       },
       {

docs/components/card.md

@@ -99,7 +99,7 @@ import { Card, Button } from '../../src'
 <div>卡片内容</div>
 </template>
 <template v-slot:header-extra>
-<nt-button type="text">按钮</nt-button>
+<nt-button text>按钮</nt-button>
 </template>
 <template v-slot:footer>
 <span style="color: orange">卡片标题</span>
@@ -115,7 +115,7 @@ import { Card, Button } from '../../src'
 <div>卡片内容</div>
 </template>
 <template v-slot:header-extra>
-<Button type="text">按钮</Button>
+<Button text>按钮</Button>
 </template>
 <template v-slot:footer>
 <span style="color: orange">卡片标题</span>
@@ -139,23 +139,23 @@ import { Card, Button } from '../../src'
         <div>卡片内容1</div>
       </template>
       <template v-slot:header-extra>
-        <nt-button type="text">按钮</nt-button>
+        <nt-button text>按钮</nt-button>
       </template>
     </nt-card>
     <nt-card header-text="卡片标题2">
       <template v-slot:default>
         <div>卡片内容2</div>
       </template>
       <template v-slot:header-extra>
-        <nt-button type="text">按钮</nt-button>
+        <nt-button text>按钮</nt-button>
       </template>
     </nt-card>
     <nt-card header-text="卡片标题3">
       <template v-slot:default>
         <div>卡片内容3</div>
       </template>
       <template v-slot:header-extra>
-        <nt-button type="text">按钮</nt-button>
+        <nt-button text>按钮</nt-button>
       </template>
     </nt-card>
   </div>
@@ -167,23 +167,23 @@ import { Card, Button } from '../../src'
           <div>卡片内容1</div>
         </template>
         <template v-slot:header-extra>
-          <Button type="text">按钮</Button>
+          <Button text>按钮</Button>
         </template>
       </Card>
       <Card header-text="卡片标题2">
         <template v-slot:default>
           <div>卡片内容2</div>
         </template>
         <template v-slot:header-extra>
-          <Button type="text">按钮</Button>
+          <Button text>按钮</Button>
         </template>
       </Card>
       <Card header-text="卡片标题3">
         <template v-slot:default>
           <div>卡片内容3</div>
         </template>
         <template v-slot:header-extra>
-          <Button type="text">按钮</Button>
+          <Button text>按钮</Button>
         </template>
       </Card>
     </div>

docs/dark.md

@@ -0,0 +1,13 @@
+## 暗黑模式
+
+组件库内置暗色的主题，你可以轻易的切换到暗色。
+
+### 切换暗黑模式
+
+组件库通过给根 `html` 添加 `dark` 的 `class` 类来标明当前的主题，所以你只要修改这个属性，即可完成主题的切换。
+
+```js
+document.documentElement.classList.toggle('dark');
+```
+
+> 当然也可以通过内置的组件 [Theme](/components/theme) 或者通过 `ph-utils/theme` 模块的 `applyTheme、initTheme` 来实现暗黑模式切换

docs/usage.md

@@ -81,6 +81,24 @@ import './style.css';
 
 通过上面就能修改，当然也能在侧边栏的样式的地方，手动覆盖变量也能实现
 
+### 修改主题色
+
+通常只需要覆盖 `--nt-primary-color` 相关 `CSS` 变量就能实现主题色覆盖，例如: `--nt-primary-color`、`--nt-primary-color-light1`
+
+```css
+:root {
+  --nt-primary-color: #722ed1;
+  --nt-primary-color-light1: #9254de;
+  --nt-primary-color-light2: #b37feb;
+  --nt-primary-color-light3: #d3adf7;
+  --nt-primary-color-light4: #efdbff;
+  --nt-primary-color-light5: #f9f0ff;
+  --nt-primary-color-dark1: #531dab;
+}
+```
+
+> 也可以通过 `ph-utils/theme` 工具类的 `initColorTheme、toggleColorTheme、applyColorTheme` 函数来实现主题色切换
+
 ### 修改组件样式
 
 组件所有的样式都基本只有一层，所以如果要修改样式，在需要套一个层级就能修改

src/components/Card.vue

@@ -1,33 +1,45 @@
-<template>
-  <div class="nt-card">
-    <div v-if="showHeader" class="nt-card__header">
-      <span v-if="headerText">{{ headerText }}</span>
-      <template v-else>
-        <slot name="header"></slot>
-      </template>
-      <div><slot name="header-extra"></slot></div>
-    </div>
-    <div :class="['nt-card__body', bodyClass || '']">
-      <slot></slot>
-    </div>
-    <div v-if="showFooter" class="nt-card__footer">
-      <span v-if="footerText">{{ footerText }}</span>
-      <template v-else><slot name="footer"></slot></template>
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-withDefaults(
-  defineProps<{
-    headerText?: string;
-    showHeader?: boolean;
-    footerText?: string;
-    showFooter?: boolean;
-    bodyClass?: string;
-  }>(),
-  {
-    showHeader: true,
-    showFooter: false,
+<script lang="ts">
+import { defineComponent, h } from 'vue';
+
+export default defineComponent({
+  props: {
+    headerText: String,
+    showHeader: {
+      type: Boolean,
+      default: true,
+    },
+    footerText: String,
+    showFooter: { type: Boolean, default: false },
+    bodyClass: String,
+    headerClass: String,
+    footerClass: String,
   },
-);
+  setup(props, { slots }) {
+    return () =>
+      h('div', { class: 'nt-card' }, [
+        props.showHeader
+          ? h('div', { class: ['nt-card__header', props.headerClass] }, [
+              slots.header != null
+                ? slots.header()
+                : h('span', props.headerText),
+              slots['header-extra'] != null
+                ? h('div', slots['header-extra']())
+                : undefined,
+            ])
+          : undefined,
+        h('div', { class: ['nt-card__body', props.bodyClass] }, [
+          slots.default != null ? slots.default() : undefined,
+        ]),
+        props.showFooter
+          ? h(
+              'div',
+              { class: ['nt-card__footer', props.footerClass] },
+              slots.footer != null
+                ? slots.footer()
+                : h('span', props.footerText),
+            )
+          : undefined,
+      ]);
+  },
+});
 </script>

style/card/index.css

@@ -1,8 +1,10 @@
 .nt-card {
+  --nt-background-color: #ffffff;
+  --nt-text-color: #333;
   border-radius: 4px;
   border: 1px solid var(--nt-border-color);
-  background-color: #ffffff;
-  color: #333;
+  background-color: var(--nt-background-color);
+  color: var(--nt-text-color);
   box-shadow:
     0 1px 3px 0 rgb(0 0 0 / 0.1),
     0 1px 2px -1px rgb(0 0 0 / 0.1);
@@ -24,3 +26,11 @@
 .nt-card__footer {
   padding: 15px;
 }
+.nt-header-extra:empty {
+  display: none;
+}
+html.dark .nt-card {
+  --nt-background-color: #232324;
+  --nt-text-color: rgba(255, 255, 255, 0.7);
+  --nt-border-color: rgb(72, 72, 73);
+}