diff --git a/website/src/components/Resource/Card/index.tsx b/website/src/components/Resource/Card/index.tsx
index 1e312707..5a990d48 100644
--- a/website/src/components/Resource/Card/index.tsx
+++ b/website/src/components/Resource/Card/index.tsx
@@ -40,8 +40,10 @@ export default function ResourceCard({
   return (
     <div className={clsx("resource-card-container", className)}>
       <div className="resource-card-header">
-        <div className="resource-card-header-title flex items-center">
-          {resource.name}
+        <div className="resource-card-header-title">
+          <div className="resource-card-header-text" data-tip={resource.name}>
+            <div className="truncate min-w-0">{resource.name}</div>
+          </div>
           {resource.is_official && (
             <FontAwesomeIcon
               className="resource-card-header-check"
@@ -49,6 +51,7 @@ export default function ResourceCard({
             />
           )}
           <ValidStatus
+            className="mx-2"
             resource={resource}
             validLink={registryLink as string}
             simple
diff --git a/website/src/components/Resource/Card/styles.css b/website/src/components/Resource/Card/styles.css
index 4b52b38e..4615e478 100644
--- a/website/src/components/Resource/Card/styles.css
+++ b/website/src/components/Resource/Card/styles.css
@@ -7,14 +7,18 @@
   }
 
   &-header {
-    @apply flex items-center w-full text-lg font-medium;
+    @apply min-w-0 flex items-center w-full text-lg font-medium;
 
     &-title {
-      @apply grow text-left truncate;
+      @apply min-w-0 grow justify-start flex items-center flex-initial;
+    }
+
+    &-text {
+      @apply min-w-0 cursor-help tooltip;
     }
 
     &-check {
-      @apply ml-2 text-success/90 fill-current;
+      @apply ml-2 text-green-600 dark:text-green-400 fill-current;
     }
 
     &-expand {
diff --git a/website/src/components/Resource/DetailCard/index.tsx b/website/src/components/Resource/DetailCard/index.tsx
index eab73809..7431cf37 100644
--- a/website/src/components/Resource/DetailCard/index.tsx
+++ b/website/src/components/Resource/DetailCard/index.tsx
@@ -114,7 +114,7 @@ export default function ResourceDetailCard({ resource }: Props) {
           <span className="detail-card-title-main flex items-center gap-x-1">
             {resource.name}
             {resource.is_official && (
-              <div className="rounded-md text-sm bg-success/10 text-success px-1 py-0.5">
+              <div className="rounded-md text-sm bg-green-400/10 text-green-600 px-1 py-0.5">
                 官方
               </div>
             )}
@@ -189,9 +189,7 @@ export default function ResourceDetailCard({ resource }: Props) {
               href={homepageLink}
               target="_blank"
               rel="noreferrer"
-              className={
-                homepageLink ? "hover:underline hover:text-primary" : undefined
-              }
+              className={homepageLink && "hover:underline hover:text-primary"}
             >
               {moduleName}
             </a>
@@ -204,9 +202,7 @@ export default function ResourceDetailCard({ resource }: Props) {
               target="_blank"
               rel="noreferrer"
               className={
-                pypiProjectLink
-                  ? "hover:underline hover:text-primary"
-                  : undefined
+                pypiProjectLink && "hover:underline hover:text-primary"
               }
             >
               {projectLink}
diff --git a/website/src/components/Resource/ValidStatus/index.tsx b/website/src/components/Resource/ValidStatus/index.tsx
index c5fd8cd2..52149a66 100644
--- a/website/src/components/Resource/ValidStatus/index.tsx
+++ b/website/src/components/Resource/ValidStatus/index.tsx
@@ -59,13 +59,12 @@ export default function ValidDisplay({
           className={clsx({
             "rounded-md text-sm flex items-center gap-x-1 px-2 py-1 whitespace-nowrap":
               !simple,
-            "ml-2": simple,
-            "bg-success/10": !simple && isValid,
-            "text-success/90": isValid,
-            "bg-error/10": !simple && isInvalid,
-            "text-error/90": isInvalid,
-            "bg-info/10": !simple && isSkip,
-            "text-info/90": isSkip,
+            "bg-green-400/10": !simple && isValid,
+            "text-green-600 dark:text-green-400": isValid,
+            "bg-red-400/10": !simple && isInvalid,
+            "text-red-600 dark:text-red-400": isInvalid,
+            "bg-blue-400/10": !simple && isSkip,
+            "text-blue-600 dark:text-blue-400": isSkip,
           })}
         >
           <FontAwesomeIcon icon={validIcons[validStatus]} />
diff --git a/website/tailwind.config.js b/website/tailwind.config.js
index e5b9a6c5..64ae91c5 100644
--- a/website/tailwind.config.js
+++ b/website/tailwind.config.js
@@ -17,6 +17,7 @@ function excludeThemeColor(theme, exclude) {
 }
 
 module.exports = {
+  darkMode: ["class", '[data-theme="dark"]'],
   daisyui: {
     themes: [
       {