diff --git a/apps/frontend/app/(with-header-footer)/resource/components/ResourceCard.tsx b/apps/frontend/app/(with-header-footer)/resource/components/ResourceCard.tsx
index 79f382a..c12e31d 100644
--- a/apps/frontend/app/(with-header-footer)/resource/components/ResourceCard.tsx
+++ b/apps/frontend/app/(with-header-footer)/resource/components/ResourceCard.tsx
@@ -18,7 +18,7 @@ export function ResourceCard({ r, ...props }: ResourceCardProps) {
                         </div>
                         <div className="flex-1 overflow-x-hidden">
                             <div className="font-bold text-2xl">{r.title}</div>
-                            <div className="font-medium text-sm text-zinc-400 mt-1">{r.description}</div>
+                            <div className="font-medium text-sm text-zinc-400 dark:text-zinc-300 mt-1">{r.description}</div>
                             <div className="flex gap-2 flex-wrap mt-4">
                                 {
                                     r.tags.map((tag) => (
diff --git a/apps/frontend/app/(with-header-footer)/resource/page.tsx b/apps/frontend/app/(with-header-footer)/resource/page.tsx
index ce8b0b3..c5c9bfa 100644
--- a/apps/frontend/app/(with-header-footer)/resource/page.tsx
+++ b/apps/frontend/app/(with-header-footer)/resource/page.tsx
@@ -18,9 +18,9 @@ export default async function Resources() {
 
     return (
         <div className="flex-1 flex flex-col items-center">
-            <h1 className="mt-6 md:mt-20 text-2xl md:text-5xl font-medium text-zinc-800 text-center duration-300">精心挑选并收藏的资源</h1>
-            <p className="mt-4 md:mt-8 mx-3 text-zinc-400 text-sm text-center duration-300">请在浏览此部分内容前阅读并同意
-                <a className="text-zinc-600">《使用条款和隐私政策》</a>
+            <h1 className="mt-6 md:mt-20 text-2xl md:text-5xl font-medium text-zinc-800 dark:text-zinc-200 text-center duration-300">精心挑选并收藏的资源</h1>
+            <p className="mt-4 md:mt-8 mx-3 text-zinc-400 dark:text-zinc-300 text-sm text-center duration-300">请在浏览此部分内容前阅读并同意
+                <a className="text-zinc-600 dark:text-zinc-400">《使用条款和隐私政策》</a>
                 ，继续使用或浏览表示您接受协议条款。</p>
             {
                 errorMsg && (
diff --git a/apps/frontend/components/resource.tsx b/apps/frontend/components/resource.tsx
index 8856b1b..ca44628 100644
--- a/apps/frontend/components/resource.tsx
+++ b/apps/frontend/components/resource.tsx
@@ -1,3 +1,4 @@
+import { cn } from "@/lib/utils";
 import { X } from "lucide-react";
 
 interface ResourceBadgeProps extends React.HTMLProps<HTMLDivElement> {
@@ -10,23 +11,17 @@ export function ResourceBadge({ tag, editMode, onClose, ...props }: ResourceBadg
     return (
         <div
             id={tag.name}
-            className="text-[10px] text-zinc-500 font-medium py-[1px] px-1.5 rounded-full flex items-center gap-1"
-            style={{
-                backgroundColor: (() => {
-                    switch (tag.type) {
-                        case 'os':
-                            return '#dbedfd';
-                        default:
-                            return '#e4e4e7';
-                    }
-                })()
-            }}
+            className={cn(
+                "text-[10px] text-zinc-500 dark:text-zinc-300 dark:border font-medium py-px px-1.5 rounded-full flex items-center gap-1",
+                'bg-[#e4e4e7] dark:bg-[#2d2d30]',
+                tag.type === 'os' || 'bg-[#dbedfd] dark:bg-[#1e3a5f]',
+            )}
             {...props}
         >
             <span className="text-nowrap">{tag.name}</span>
             {
                 editMode && (
-                    <span onClick={() => onClose?.(tag.name)}><X className="w-3 h-3 text-zinc-800 cursor-pointer" /></span>
+                    <span onClick={() => onClose?.(tag.name)}><X className="w-3 h-3 text-zinc-800 dark:text-zinc-200 cursor-pointer" /></span>
                 )
             }
         </div>