diff --git a/src/App.tsx b/src/App.tsx
index f3f80ed..4b30fc2 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -94,7 +94,10 @@ const App: Component = () => {
       {/* fill th rest of the space*/}
       <div class="fixed top-16 left-0 right-0 bottom-0 overflow-auto">
         <main class="max-w-4xl mx-auto px-4 py-8 pt-4 md:ml-64 2xl:ml-auto flex justify-center items-center">
-          <Article class="prose-sm max-w-full flex-1" src={currentPath()} />
+          <Article
+            class="prose text-black prose-sm max-w-full flex-1"
+            src={currentPath()}
+          />
         </main>
       </div>
       <DocDialog isOpen={isDocOpen()} onClose={() => setIsDocOpen(false)} />
diff --git a/src/components/Article.tsx b/src/components/Article.tsx
index c0e20aa..3403d29 100644
--- a/src/components/Article.tsx
+++ b/src/components/Article.tsx
@@ -88,7 +88,10 @@ export const Article: Component<ArticleProps> = (props) => {
   });
 
   return (
-    <article class={`prose ${props.class || ""}`} data-src={props.src}>
+    <article
+      class={`prose text-black ${props.class || ""}`}
+      data-src={props.src}
+    >
       <Show when={content.loading}>
         <div class="text-gray-500">加载中...</div>
       </Show>
diff --git a/src/components/md-deck/CardLayer.tsx b/src/components/md-deck/CardLayer.tsx
index cf56797..6c2893b 100644
--- a/src/components/md-deck/CardLayer.tsx
+++ b/src/components/md-deck/CardLayer.tsx
@@ -80,7 +80,7 @@ export function CardLayer(props: CardLayerProps) {
         return (
           <>
             <article
-              class="absolute flex flex-col items-stretch justify-center prose prose-sm cursor-pointer"
+              class="absolute flex flex-col items-stretch justify-center prose text-black prose-sm cursor-pointer"
               classList={{
                 "ring-2 ring-blue-500 ring-offset-1":
                   isSelected() && !draggingState(),