fix: fix package name color in dark theme (#62)

cnpm · Dec 9, 2023 · 247480c · 247480c
1 parent cdc16c9
commit 247480c
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/src/components/PackageCard.module.css b/src/components/PackageCard.module.css
@@ -22,12 +22,17 @@
   min-width: 0;
 }
 
-.title {
+.title,
+.darkTitle {
   color: #314659;
   font-size: 20px;
   line-height: 24px;
 }
 
+.darkTitle {
+  color: #fff;
+}
+
 .descriptionCon {
   color: #333;
   font-size: 14px;

diff --git a/src/components/PackageCard.tsx b/src/components/PackageCard.tsx
@@ -1,5 +1,6 @@
 import { SearchPackageResult } from '@/hooks/useSearch';
 import { Card, Col, Row, Space, Tag, Tooltip } from 'antd';
+import { ThemeMode } from 'antd-style';
 import Link from 'next/link';
 import styles from './PackageCard.module.css';
 import SkeletonText from './SkeletonText';
@@ -40,9 +41,11 @@ export function PackageTag({ tags, closeIcon, onClose }: { tags: {label: string,
 export const PackageCard = ({
   package: pkg,
   loading = false,
+  themeMode,
 }: {
   package: SearchPackageResult;
   loading?: boolean;
+  themeMode: ThemeMode,
 }) => {
   return (
     <Link href={`/package/${pkg.name}`} target="_blank">
@@ -57,7 +60,7 @@ export const PackageCard = ({
           <div className={styles.content}>
             <Row style={{ flexWrap: 'nowrap' }}>
               <Col flex="auto" style={{ minWidth: 0 }}>
-                <SkeletonText className={styles.title} loading={loading} title={pkg.name} ellipsis>
+                <SkeletonText className={themeMode === 'dark' ? styles.darkTitle :styles.title} loading={loading} title={pkg.name} ellipsis>
                   {pkg.name}@{pkg.version}
                 </SkeletonText>
               </Col>

diff --git a/src/pages/packages.tsx b/src/pages/packages.tsx
@@ -62,6 +62,7 @@ export default function Packages({ page: initPage, q: initQ }: PageType) {
                 return (
                   <Col span={24} key={index}>
                     <PackageCard
+                      themeMode={themeMode as ThemeMode}
                       loading={isLoading}
                       package={item.package}
                       key={item.package?.name || index}