diff --git a/app/soapbox/components/ui/button/useButtonStyles.ts b/app/soapbox/components/ui/button/useButtonStyles.ts
index 2e92b33a6..b6ba9fb71 100644
--- a/app/soapbox/components/ui/button/useButtonStyles.ts
+++ b/app/soapbox/components/ui/button/useButtonStyles.ts
@@ -25,7 +25,7 @@ const useButtonStyles = ({
     accent: 'border-transparent text-white bg-accent-500 hover:bg-accent-300 focus:ring-pink-500 focus:ring-2 focus:ring-offset-2',
     danger: 'border-transparent text-danger-700 bg-danger-100 hover:bg-danger-200 focus:ring-danger-500 focus:ring-2 focus:ring-offset-2',
     transparent: 'border-transparent text-gray-800 backdrop-blur-sm bg-white/75 hover:bg-white/80',
-    link: 'border-transparent text-primary-600 hover:bg-gray-100 hover:text-primary-700',
+    link: 'border-transparent text-primary-600 dark:text-primary-400 hover:bg-gray-100 hover:text-primary-700 dark:hover:bg-slate-900/50',
   };
 
   const sizes = {
diff --git a/app/soapbox/components/ui/text/text.tsx b/app/soapbox/components/ui/text/text.tsx
index 9c7c8ddae..5ecfadf39 100644
--- a/app/soapbox/components/ui/text/text.tsx
+++ b/app/soapbox/components/ui/text/text.tsx
@@ -13,7 +13,7 @@ type Tags = 'abbr' | 'p' | 'span' | 'pre' | 'time' | 'h1' | 'h2' | 'h3' | 'h4' |
 const themes = {
   default: 'text-gray-900 dark:text-gray-100',
   danger: 'text-danger-600',
-  primary: 'text-primary-600',
+  primary: 'text-primary-600 dark:text-primary-400',
   muted: 'text-gray-500 dark:text-gray-400',
   subtle: 'text-gray-400 dark:text-gray-500',
   success: 'text-success-600',
diff --git a/app/soapbox/features/compose/components/compose_form_button.tsx b/app/soapbox/features/compose/components/compose_form_button.tsx
index 0cef5b30b..da28d6618 100644
--- a/app/soapbox/features/compose/components/compose_form_button.tsx
+++ b/app/soapbox/features/compose/components/compose_form_button.tsx
@@ -21,7 +21,7 @@ const ComposeFormButton: React.FC<IComposeFormButton> = ({
   return (
     <div>
       <IconButton
-        className={classNames('text-gray-400 hover:text-gray-600', { 'text-primary-600 hover:text-primary-500': active })}
+        className={classNames('text-gray-400 hover:text-gray-600', { 'text-primary-600 hover:text-primary-500 dark:text-primary-400 dark:hover:text-primary-300': active })}
         src={icon}
         title={title}
         disabled={disabled}
diff --git a/app/soapbox/features/directory/components/account_card.js b/app/soapbox/features/directory/components/account_card.js
index 0acab06d5..18edafa7d 100644
--- a/app/soapbox/features/directory/components/account_card.js
+++ b/app/soapbox/features/directory/components/account_card.js
@@ -76,7 +76,7 @@ class AccountCard extends ImmutablePureComponent {
         <div className='directory__card__extra'>
           <div className='accounts-table__count'><Text theme='primary' size='sm'>{shortNumberFormat(account.get('statuses_count'))}</Text> <small><FormattedMessage id='account.posts' defaultMessage='Toots' /></small></div>
           <div className='accounts-table__count'><Text theme='primary' size='sm'>{shortNumberFormat(account.get('followers_count'))}</Text> <small><FormattedMessage id='account.followers' defaultMessage='Followers' /></small></div>
-          <div className='accounts-table__count'>{account.get('last_status_at') === null ? <Text theme='primary' size='sm'><FormattedMessage id='account.never_active' defaultMessage='Never' /></Text> : <RelativeTimestamp className='text-primary-600' timestamp={account.get('last_status_at')} />} <small><FormattedMessage id='account.last_status' defaultMessage='Last active' /></small></div>
+          <div className='accounts-table__count'>{account.get('last_status_at') === null ? <Text theme='primary' size='sm'><FormattedMessage id='account.never_active' defaultMessage='Never' /></Text> : <RelativeTimestamp className='text-primary-600 dark:text-primary-400' timestamp={account.get('last_status_at')} />} <small><FormattedMessage id='account.last_status' defaultMessage='Last active' /></small></div>
         </div>
       </div>
     );
diff --git a/app/soapbox/features/notifications/components/notification.tsx b/app/soapbox/features/notifications/components/notification.tsx
index 97a2818fe..30b7d297e 100644
--- a/app/soapbox/features/notifications/components/notification.tsx
+++ b/app/soapbox/features/notifications/components/notification.tsx
@@ -204,7 +204,7 @@ const Notification: React.FC<INotificaton> = (props) => {
       return (
         <Icon
           src={icons[type]}
-          className='text-primary-600 flex-none'
+          className='text-primary-600 dark:text-primary-400 flex-none'
         />
       );
     } else {
diff --git a/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx b/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx
index 27d3d842d..08cfb07bd 100644
--- a/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx
+++ b/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx
@@ -73,7 +73,7 @@ const AvatarSelectionStep = ({ onNext }: { onNext: () => void }) => {
     <Card variant='rounded' size='xl'>
       <CardBody>
         <div>
-          <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 border-solid -mx-4 sm:-mx-10'>
+          <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 dark:border-slate-900/50 border-solid -mx-4 sm:-mx-10'>
             <Stack space={2}>
               <Text size='2xl' align='center' weight='bold'>
                 <FormattedMessage id='onboarding.avatar.title' defaultMessage='Choose a profile picture' />
@@ -102,7 +102,7 @@ const AvatarSelectionStep = ({ onNext }: { onNext: () => void }) => {
                   onClick={openFilePicker}
                   type='button'
                   className={classNames({
-                    'absolute bottom-3 right-2 p-1 bg-primary-600 rounded-full ring-2 ring-white hover:bg-primary-700': true,
+                    'absolute bottom-3 right-2 p-1 bg-primary-600 rounded-full ring-2 ring-white dark:ring-slate-800 hover:bg-primary-700': true,
                     'opacity-50 pointer-events-none': isSubmitting,
                   })}
                   disabled={isSubmitting}
diff --git a/app/soapbox/features/onboarding/steps/completed-step.tsx b/app/soapbox/features/onboarding/steps/completed-step.tsx
index 310093691..60f6fba13 100644
--- a/app/soapbox/features/onboarding/steps/completed-step.tsx
+++ b/app/soapbox/features/onboarding/steps/completed-step.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FormattedMessage } from'react-intl';
+import { FormattedMessage } from 'react-intl';
 
 import { Button, Card, CardBody, Icon, Stack, Text } from 'soapbox/components/ui';
 
@@ -7,7 +7,7 @@ const CompletedStep = ({ onComplete }: { onComplete: () => void }) => (
   <Card variant='rounded' size='xl'>
     <CardBody>
       <Stack space={2}>
-        <Icon strokeWidth={1} src={require('@tabler/icons/icons/confetti.svg')} className='w-16 h-16 mx-auto text-primary-600' />
+        <Icon strokeWidth={1} src={require('@tabler/icons/icons/confetti.svg')} className='w-16 h-16 mx-auto text-primary-600 dark:text-primary-400' />
 
         <Text size='2xl' align='center' weight='bold'>
           <FormattedMessage id='onboarding.finished.title' defaultMessage='Onboarding complete' />
diff --git a/app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx b/app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx
index e50c47741..86d5dde48 100644
--- a/app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx
+++ b/app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx
@@ -120,7 +120,7 @@ const ReasonStep = (_props: IReasonStep) => {
                       value={rule.id}
                       checked={isSelected}
                       readOnly
-                      className='h-4 w-4 cursor-pointer text-primary-600 border-gray-300 rounded focus:ring-primary-500'
+                      className='h-4 w-4 cursor-pointer text-primary-600 dark:text-primary-400 border-gray-300 rounded focus:ring-primary-500'
                     />
                   </button>
                 );
diff --git a/app/soapbox/features/verification/email_passthru.js b/app/soapbox/features/verification/email_passthru.js
index dac2cc3bd..131d5dd1a 100644
--- a/app/soapbox/features/verification/email_passthru.js
+++ b/app/soapbox/features/verification/email_passthru.js
@@ -31,7 +31,7 @@ const Success = () => {
 
   return (
     <Stack space={4} alignItems='center'>
-      <Icon src={require('@tabler/icons/icons/circle-check.svg')} className='text-primary-600 h-10 w-10' />
+      <Icon src={require('@tabler/icons/icons/circle-check.svg')} className='text-primary-600 dark:text-primary-400 h-10 w-10' />
       <Text size='3xl' weight='semibold' align='center'>
         {intl.formatMessage(messages.emailConfirmedHeading)}
       </Text>
diff --git a/app/soapbox/features/verification/steps/email-verification.js b/app/soapbox/features/verification/steps/email-verification.js
index be83406cc..fba2862c1 100644
--- a/app/soapbox/features/verification/steps/email-verification.js
+++ b/app/soapbox/features/verification/steps/email-verification.js
@@ -34,7 +34,7 @@ const EmailSent = ({ handleSubmit }) => {
 
   return (
     <div className='sm:pt-10 mx-auto flex flex-col items-center justify-center'>
-      <Icon src={require('@tabler/icons/icons/send.svg')} className='text-primary-600 h-12 w-12 mb-5' />
+      <Icon src={require('@tabler/icons/icons/send.svg')} className='text-primary-600 dark:text-primary-400 h-12 w-12 mb-5' />
 
       <div className='space-y-1 text-center mb-4'>
         <Text weight='bold' size='3xl'>We sent you an email</Text>
diff --git a/app/styles/components/columns.scss b/app/styles/components/columns.scss
index 98f9a5584..160fef0b4 100644
--- a/app/styles/components/columns.scss
+++ b/app/styles/components/columns.scss
@@ -771,7 +771,7 @@
   }
 
   a {
-    @apply text-primary-600 no-underline hover:underline;
+    @apply text-primary-600 dark:text-primary-400 no-underline hover:underline;
   }
 }
 
diff --git a/app/styles/components/datepicker.scss b/app/styles/components/datepicker.scss
index f5a25d018..60cb58409 100644
--- a/app/styles/components/datepicker.scss
+++ b/app/styles/components/datepicker.scss
@@ -113,5 +113,5 @@
 .react-datepicker__month-text--keyboard-selected,
 .react-datepicker__quarter-text--keyboard-selected,
 .react-datepicker__year-text--keyboard-selected {
-  @apply bg-primary-50 hover:bg-primary-100 text-primary-600;
+  @apply bg-primary-50 hover:bg-primary-100 text-primary-600 dark:text-primary-400;
 }
diff --git a/app/styles/polls.scss b/app/styles/polls.scss
index 33eb45875..a49315450 100644
--- a/app/styles/polls.scss
+++ b/app/styles/polls.scss
@@ -193,7 +193,7 @@
   }
 
   .button.button-secondary {
-    @apply h-auto py-1.5 px-2.5 text-primary-600 border-primary-600;
+    @apply h-auto py-1.5 px-2.5 text-primary-600 dark:text-primary-400 border-primary-600;
   }
 
   li {
diff --git a/app/styles/utilities.scss b/app/styles/utilities.scss
index 30eb71eed..cb7f1919f 100644
--- a/app/styles/utilities.scss
+++ b/app/styles/utilities.scss
@@ -13,5 +13,5 @@
 }
 
 .mention {
-  @apply text-primary-600 hover:underline;
+  @apply text-primary-600 dark:text-primary-400 hover:underline;
 }