diff --git a/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/src/components/TopicCard.tsx b/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/src/components/TopicCard.tsx
index 396770e6..33bf829a 100644
--- a/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/src/components/TopicCard.tsx
+++ b/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/src/components/TopicCard.tsx
@@ -13,13 +13,17 @@ import { request } from '../request';
 import { TopicComments } from './TopicComments';
 
 const Root = styled.div`
-  background-color: rgba(0, 0, 0, 0.25);
+  background-color: rgba(0, 0, 0, 0.05);
   padding: 10px;
   border-radius: 3px;
   margin: 10px;
   width: auto;
   display: flex;
 
+  .dark & {
+    background-color: rgba(0, 0, 0, 0.25);
+  }
+
   .left {
     margin-right: 10px;
   }
@@ -28,7 +32,7 @@ const Root = styled.div`
     flex: 1;
     user-select: text;
 
-    .header {
+    .header {·
       display: flex;
       line-height: 32px;
 
@@ -51,9 +55,13 @@ const Root = styled.div`
 `;
 
 const ReplyBox = styled.div`
-  background-color: rgba(0, 0, 0, 0.25);
   padding: 10px;
   margin-top: 10px;
+  background-color: transparent;
+
+  .dark & {
+    background-color: rgba(0, 0, 0, 0.25);
+  }
 `;
 
 export const TopicCard: React.FC<{
diff --git a/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/src/components/TopicComments.tsx b/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/src/components/TopicComments.tsx
index 191c969c..21ba0910 100644
--- a/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/src/components/TopicComments.tsx
+++ b/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/src/components/TopicComments.tsx
@@ -7,7 +7,11 @@ const Root = styled.div`
   padding: 10px;
   margin-bottom: 6px;
   border-radius: 3px;
-  background-color: rgba(0, 0, 0, 0.25);
+  background-color: rgba(0, 0, 0, 0.05);
+
+  .dark & {
+    background-color: rgba(0, 0, 0, 0.25);
+  }
 
   > div {
     display: flex;