Theme switch support (#3568)

### What problem does this PR solve?
- [x] New Feature (non-breaking change which adds functionality)

---------

Co-authored-by: Yingfeng <yingfeng.zhang@gmail.com>
Co-authored-by: Jin Hai <haijin.chn@gmail.com>

web/src/pages/knowledge/index.less

@@ -17,7 +17,7 @@
     font-style: normal;
     font-weight: @fontWeight600;
     line-height: 38px;
-    color: rgba(16, 24, 40, 1);
+    color: var(--ant-color-info);
   }
   .description {
     font-family: Inter;
@@ -25,7 +25,6 @@
     font-style: normal;
     font-weight: 400;
     line-height: 24px;
-    color: rgba(71, 84, 103, 1);
   }
 
   .topButton {

web/src/pages/knowledge/knowledge-card/index.less

@@ -51,31 +51,50 @@
       line-height: 20px;
       color: rgba(0, 0, 0, 0.45);
     }
+    .titledark {
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      font-size: 24px;
+      line-height: 32px;
+      font-weight: 600;
+      word-break: break-all;
+    }
+
+    .descriptiondark {
+      margin-top: 4px;
+      display: -webkit-box;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      font-size: 12px;
+      font-weight: 600;
+      line-height: 20px;
+    }
   }
 }
 
 .card {
   border-radius: 12px;
-  border: 1px solid rgba(234, 236, 240, 1);
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  background-color: rgba(255, 255, 255, 0.1);
   box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
   padding: 24px;
   width: 300px;
   cursor: pointer;
 
   .titleWrapper {
-    // flex: 1;
     .title {
       font-size: 24px;
       line-height: 32px;
       font-weight: 600;
-      color: rgba(0, 0, 0, 0.88);
       word-break: break-all;
     }
     .description {
       font-size: 12px;
       font-weight: 600;
       line-height: 20px;
-      color: rgba(0, 0, 0, 0.45);
     }
   }
 
@@ -101,7 +120,6 @@
   .rightText {
     font-size: 12px;
     font-weight: 600;
-    color: rgba(0, 0, 0, 0.65);
     vertical-align: middle;
   }
 }

web/src/pages/knowledge/knowledge-card/index.tsx

@@ -12,6 +12,7 @@ import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'umi';
 
 import OperateDropdown from '@/components/operate-dropdown';
+import { useTheme } from '@/components/theme-provider';
 import { useDeleteKnowledge } from '@/hooks/knowledge-hooks';
 import { useFetchUserInfo } from '@/hooks/user-setting-hooks';
 import styles from './index.less';
@@ -24,7 +25,7 @@ const KnowledgeCard = ({ item }: IProps) => {
   const navigate = useNavigate();
   const { t } = useTranslation();
   const { data: userInfo } = useFetchUserInfo();
-
+  const { theme } = useTheme();
   const { deleteKnowledge } = useDeleteKnowledge();
 
   const removeKnowledge = async () => {
@@ -52,8 +53,18 @@ const KnowledgeCard = ({ item }: IProps) => {
             <OperateDropdown deleteItem={removeKnowledge}></OperateDropdown>
           </div>
           <div className={styles.titleWrapper}>
-            <span className={styles.title}>{item.name}</span>
-            <p className={styles.description}>{item.description}</p>
+            <span
+              className={theme === 'dark' ? styles.titledark : styles.title}
+            >
+              {item.name}
+            </span>
+            <p
+              className={
+                theme === 'dark' ? styles.descriptiondark : styles.description
+              }
+            >
+              {item.description}
+            </p>
           </div>
           <div className={styles.footer}>
             <div className={styles.footerTop}>