diff --git a/app/soapbox/components/ui/card/card.tsx b/app/soapbox/components/ui/card/card.tsx
index 9754628c95..12d9a5fd81 100644
--- a/app/soapbox/components/ui/card/card.tsx
+++ b/app/soapbox/components/ui/card/card.tsx
@@ -28,7 +28,7 @@ const Card: React.FC<ICard> = React.forwardRef(({ children, variant, size = 'md'
     {...filteredProps}
     className={classNames({
       'space-y-4': true,
-      'bg-white dark:bg-slate-800 sm:shadow-lg dark:sm:shadow-inset overflow-hidden': variant === 'rounded',
+      'bg-white dark:bg-slate-800 text-black dark:text-white sm:shadow-lg dark:sm:shadow-inset overflow-hidden': variant === 'rounded',
       [sizes[size]]: true,
     }, className)}
   >
diff --git a/app/soapbox/components/ui/column/column.tsx b/app/soapbox/components/ui/column/column.tsx
index c647aa1f3c..c27a867ddb 100644
--- a/app/soapbox/components/ui/column/column.tsx
+++ b/app/soapbox/components/ui/column/column.tsx
@@ -34,7 +34,7 @@ const Column: React.FC<IColumn> = React.forwardRef((props, ref: React.ForwardedR
 
   const renderChildren = () => {
     if (transparent) {
-      return <div className={classNames('bg-white dark:bg-slate-800 sm:bg-transparent sm:dark:bg-transparent', className)}>{children}</div>;
+      return <div className={classNames('bg-white dark:bg-slate-800 text-black dark:text-white sm:bg-transparent sm:dark:bg-transparent', className)}>{children}</div>;
     }
 
     return (