diff --git a/src/features/compose/components/reply-indicator.tsx b/src/features/compose/components/reply-indicator.tsx
index bee36b661..b5153c674 100644
--- a/src/features/compose/components/reply-indicator.tsx
+++ b/src/features/compose/components/reply-indicator.tsx
@@ -36,7 +36,7 @@ const ReplyIndicator: React.FC<IReplyIndicator> = ({ className, status, hideActi
   }
 
   return (
-    <Stack space={2} className={clsx('max-h-72 overflow-y-auto rounded-lg bg-gray-100 p-4 dark:bg-gray-800', className)}>
+    <Stack space={2} className={clsx('max-h-72 overflow-y-auto rounded-lg bg-gray-100 p-4 black:bg-gray-900 dark:bg-gray-800', className)}>
       <AccountContainer
         {...actions}
         id={status.getIn(['account', 'id']) as string}
diff --git a/src/styles/components/modal.scss b/src/styles/components/modal.scss
index a95e560fb..d69552f67 100644
--- a/src/styles/components/modal.scss
+++ b/src/styles/components/modal.scss
@@ -78,7 +78,7 @@
 }
 
 .actions-modal {
-  @apply flex-col relative text-gray-400 overflow-hidden w-full max-w-lg m-auto bg-white dark:bg-gray-900 shadow-xl rounded-2xl;
+  @apply flex-col relative text-gray-400 overflow-hidden w-full max-w-lg m-auto bg-white black:bg-black dark:bg-gray-900 shadow-xl rounded-2xl;
   max-height: calc(100vh - 3rem);
 
   &__item-label {
@@ -86,7 +86,7 @@
   }
 
   .dropdown-menu__separator {
-    @apply block m-2 h-[1px] bg-gray-200 dark:bg-gray-600;
+    @apply block m-2 h-[1px] bg-gray-200 dark:bg-gray-600 black:bg-gray-800;
   }
 
   &__status {