diff --git a/src/components/announcements/announcements-panel.tsx b/src/components/announcements/announcements-panel.tsx
index 800328678..052b99f47 100644
--- a/src/components/announcements/announcements-panel.tsx
+++ b/src/components/announcements/announcements-panel.tsx
@@ -33,7 +33,7 @@ const AnnouncementsPanel = () => {
 
   return (
     <Widget title={<FormattedMessage id='announcements.title' defaultMessage='Announcements' />}>
-      <Card className='relative' size='md' variant='rounded'>
+      <Card className='relative black:rounded-xl black:border black:border-gray-800' size='md' variant='rounded'>
         <ReactSwipeableViews animateHeight index={index} onChangeIndex={handleChangeIndex}>
           {announcements.map((announcement) => (
             <Announcement
diff --git a/src/components/autosuggest-input.tsx b/src/components/autosuggest-input.tsx
index c24643228..94e613d36 100644
--- a/src/components/autosuggest-input.tsx
+++ b/src/components/autosuggest-input.tsx
@@ -199,8 +199,8 @@ export default class AutosuggestInput extends ImmutablePureComponent<IAutosugges
         key={key}
         data-index={i}
         className={clsx({
-          'px-4 py-2.5 text-sm text-gray-700 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 focus:bg-gray-100 dark:focus:bg-primary-800 group': true,
-          'bg-gray-100 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-800': i === selectedSuggestion,
+          'px-4 py-2.5 text-sm text-gray-700 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 focus:bg-gray-100 dark:focus:bg-primary-800 group black:hover:bg-gray-900 black:focus:bg-gray-900': true,
+          'bg-gray-100 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-800 black:bg-gray-900 black:hover:bg-gray-900': i === selectedSuggestion,
         })}
         onMouseDown={this.onSuggestionClick}
         onTouchEnd={this.onSuggestionClick}
diff --git a/src/components/dropdown-menu/dropdown-menu-item.tsx b/src/components/dropdown-menu/dropdown-menu-item.tsx
index 8c74e652a..adf4f1526 100644
--- a/src/components/dropdown-menu/dropdown-menu-item.tsx
+++ b/src/components/dropdown-menu/dropdown-menu-item.tsx
@@ -86,7 +86,7 @@ const DropdownMenuItem = ({ index, item, onClick }: IDropdownMenuItem) => {
         title={item.text}
         className={
           clsx({
-            'flex px-4 py-2.5 text-sm text-gray-700 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 focus:bg-gray-100 dark:focus:bg-gray-800 focus:outline-none cursor-pointer': true,
+            'flex px-4 py-2.5 text-sm text-gray-700 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 focus:bg-gray-100 dark:focus:bg-gray-800 focus:outline-none cursor-pointer black:hover:bg-gray-900 black:focus:bg-gray-900': true,
             'text-danger-600 dark:text-danger-400': item.destructive,
           })
         }
diff --git a/src/components/dropdown-menu/dropdown-menu.tsx b/src/components/dropdown-menu/dropdown-menu.tsx
index ab40f164e..2c94f9be0 100644
--- a/src/components/dropdown-menu/dropdown-menu.tsx
+++ b/src/components/dropdown-menu/dropdown-menu.tsx
@@ -293,7 +293,7 @@ const DropdownMenu = (props: IDropdownMenu) => {
             data-testid='dropdown-menu'
             ref={refs.setFloating}
             className={
-              clsx('z-[1001] w-56 rounded-md bg-white py-1 shadow-lg transition-opacity duration-100 focus:outline-none dark:bg-gray-900 dark:ring-2 dark:ring-primary-700', {
+              clsx('z-[1001] w-56 rounded-md bg-white py-1 shadow-lg transition-opacity duration-100 focus:outline-none black:bg-black dark:bg-gray-900 dark:ring-2 dark:ring-primary-700', {
                 'opacity-0 pointer-events-none': !isOpen,
               })
             }
@@ -318,7 +318,7 @@ const DropdownMenu = (props: IDropdownMenu) => {
             <div
               ref={arrowRef}
               style={arrowProps}
-              className='pointer-events-none absolute z-[-1] h-3 w-3 bg-white dark:bg-gray-900'
+              className='pointer-events-none absolute z-[-1] h-3 w-3 bg-white black:bg-black dark:bg-gray-900'
             />
           </div>
         </Portal>
diff --git a/src/components/event-preview.tsx b/src/components/event-preview.tsx
index ec1031662..710075764 100644
--- a/src/components/event-preview.tsx
+++ b/src/components/event-preview.tsx
@@ -51,7 +51,7 @@ const EventPreview: React.FC<IEventPreview> = ({ status, className, hideAction,
   ));
 
   return (
-    <div className={clsx('relative w-full overflow-hidden rounded-lg bg-gray-100 dark:bg-primary-800', className)}>
+    <div className={clsx('relative w-full overflow-hidden rounded-lg bg-gray-100 black:border black:border-gray-800 black:bg-black dark:bg-primary-800', className)}>
       <div className='absolute right-3 top-28'>
         {floatingAction && action}
       </div>
diff --git a/src/components/group-card.tsx b/src/components/group-card.tsx
index e95914efa..08df1a45f 100644
--- a/src/components/group-card.tsx
+++ b/src/components/group-card.tsx
@@ -17,7 +17,7 @@ interface IGroupCard {
 const GroupCard: React.FC<IGroupCard> = ({ group }) => {
   return (
     <Stack
-      className='relative h-[240px] rounded-lg border border-solid border-gray-300 bg-white dark:border-primary-800 dark:bg-primary-900'
+      className='relative h-[240px] rounded-lg border border-solid border-gray-300 bg-white black:bg-white dark:border-primary-800 dark:bg-primary-900'
       data-testid='group-card'
     >
       {/* Group Cover Image */}
diff --git a/src/components/groups/popover/group-popover.tsx b/src/components/groups/popover/group-popover.tsx
index 6aa214cd9..44d1d5244 100644
--- a/src/components/groups/popover/group-popover.tsx
+++ b/src/components/groups/popover/group-popover.tsx
@@ -45,7 +45,7 @@ const GroupPopover = (props: IGroupPopoverContainer) => {
       content={
         <Stack space={4} className='w-80 pb-4'>
           <Stack
-            className='relative h-60 rounded-lg bg-white dark:border-primary-800 dark:bg-primary-900'
+            className='relative h-60 rounded-lg bg-white black:bg-white dark:border-primary-800 dark:bg-primary-900'
             data-testid='group-card'
           >
             {/* Group Cover Image */}
diff --git a/src/components/landing-gradient.tsx b/src/components/landing-gradient.tsx
index 1cef99843..ed27fe214 100644
--- a/src/components/landing-gradient.tsx
+++ b/src/components/landing-gradient.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 /** Fullscreen gradient used as a backdrop to public pages. */
 const LandingGradient: React.FC = () => (
-  <div className='fixed h-screen w-full bg-gradient-to-tr from-primary-50 via-white to-gradient-end/10 dark:from-primary-900/50 dark:via-primary-900 dark:to-primary-800/50' />
+  <div className='fixed h-screen w-full bg-gradient-to-tr from-primary-50 via-white to-gradient-end/10 black:hidden dark:from-primary-900/50 dark:via-primary-900 dark:to-primary-800/50' />
 );
 
 export default LandingGradient;
diff --git a/src/components/modal-root.tsx b/src/components/modal-root.tsx
index 024f59ebc..1c755b995 100644
--- a/src/components/modal-root.tsx
+++ b/src/components/modal-root.tsx
@@ -232,7 +232,7 @@ const ModalRoot: React.FC<IModalRoot> = ({ children, onCancel, onClose, type })
       <div
         role='presentation'
         id='modal-overlay'
-        className='fixed inset-0 bg-gray-500/90 backdrop-blur dark:bg-gray-700/90'
+        className='fixed inset-0 bg-gray-500/90 backdrop-blur black:bg-gray-900/90 dark:bg-gray-700/90'
         onClick={handleOnClose}
       />
 
diff --git a/src/components/scrollable-list.tsx b/src/components/scrollable-list.tsx
index f31fed579..ffce6e844 100644
--- a/src/components/scrollable-list.tsx
+++ b/src/components/scrollable-list.tsx
@@ -226,7 +226,6 @@ const ScrollableList = React.forwardRef<VirtuosoHandle, IScrollableList>(({
       ref={ref}
       id={id}
       useWindowScroll={useWindowScroll}
-      className={className}
       data={data}
       startReached={onScrollToTop}
       endReached={handleEndReached}
diff --git a/src/components/sidebar-menu.tsx b/src/components/sidebar-menu.tsx
index 0de3b6c82..e79853adc 100644
--- a/src/components/sidebar-menu.tsx
+++ b/src/components/sidebar-menu.tsx
@@ -144,7 +144,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
       }
     >
       <div
-        className='fixed inset-0 bg-gray-500/90 dark:bg-gray-700/90'
+        className='fixed inset-0 bg-gray-500/90 black:bg-gray-900/90 dark:bg-gray-700/90'
         role='button'
         onClick={handleClose}
       />
@@ -153,7 +153,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
         <div
           className={
             clsx({
-              'flex flex-col flex-1 bg-white dark:bg-primary-900 -translate-x-full rtl:translate-x-full w-full max-w-xs': true,
+              'flex flex-col flex-1 bg-white black:bg-black dark:bg-primary-900 -translate-x-full rtl:translate-x-full w-full max-w-xs': true,
               '!translate-x-0': sidebarOpen,
             })
           }
@@ -350,7 +350,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                     </button>
 
                     {switcher && (
-                      <div className='border-t-2 border-solid border-gray-100 dark:border-gray-800'>
+                      <div className='border-t-2 border-solid border-gray-100 black:border-t dark:border-gray-800'>
                         {otherAccounts.map(account => renderAccount(account))}
 
                         <NavLink className='flex items-center space-x-1 py-2' to='/login/add' onClick={handleClose}>
diff --git a/src/components/sidebar-navigation-link.tsx b/src/components/sidebar-navigation-link.tsx
index 224b75e06..906fabc42 100644
--- a/src/components/sidebar-navigation-link.tsx
+++ b/src/components/sidebar-navigation-link.tsx
@@ -49,7 +49,7 @@ const SidebarNavigationLink = React.forwardRef((props: ISidebarNavigationLink, r
           count={count}
           countMax={countMax}
           className={clsx('h-5 w-5', {
-            'text-gray-600 dark:text-gray-500 group-hover:text-primary-500 dark:group-hover:text-primary-400': !isActive,
+            'text-gray-600 black:text-white dark:text-gray-500 group-hover:text-primary-500 dark:group-hover:text-primary-400': !isActive,
             'text-primary-500 dark:text-primary-400': isActive,
           })}
         />
diff --git a/src/components/site-error-boundary.tsx b/src/components/site-error-boundary.tsx
index 19a22a0c8..189554278 100644
--- a/src/components/site-error-boundary.tsx
+++ b/src/components/site-error-boundary.tsx
@@ -74,7 +74,7 @@ const SiteErrorBoundary: React.FC<ISiteErrorBoundary> = ({ children }) => {
   }
 
   const fallback = (
-    <div className='flex h-screen flex-col bg-white pb-12 pt-16 dark:bg-primary-900'>
+    <div className='flex h-screen flex-col bg-white pb-12 pt-16 black:bg-black dark:bg-primary-900'>
       <main className='mx-auto flex w-full max-w-7xl grow flex-col justify-center px-4 sm:px-6 lg:px-8'>
         <div className='flex shrink-0 justify-center'>
           <a href='/' className='inline-flex'>
diff --git a/src/components/site-logo.tsx b/src/components/site-logo.tsx
index 3fee230d3..e42d19e52 100644
--- a/src/components/site-logo.tsx
+++ b/src/components/site-logo.tsx
@@ -15,7 +15,7 @@ const SiteLogo: React.FC<ISiteLogo> = ({ className, theme, ...rest }) => {
   const { logo, logoDarkMode } = useSoapboxConfig();
   const { demo } = useSettings();
 
-  let darkMode = useTheme() === 'dark';
+  let darkMode = ['dark', 'black'].includes(useTheme());
   if (theme === 'dark') darkMode = true;
 
   /** Soapbox logo. */
diff --git a/src/components/status-list.tsx b/src/components/status-list.tsx
index 8d6a5793d..ed1f391b1 100644
--- a/src/components/status-list.tsx
+++ b/src/components/status-list.tsx
@@ -56,6 +56,7 @@ const StatusList: React.FC<IStatusList> = ({
   isPartial,
   showAds = false,
   showGroup = true,
+  className,
   ...other
 }) => {
   const soapboxConfig = useSoapboxConfig();
@@ -233,7 +234,7 @@ const StatusList: React.FC<IStatusList> = ({
       ref={node}
       className={clsx('divide-y divide-solid divide-gray-200 dark:divide-gray-800', {
         'divide-none': divideType !== 'border',
-      })}
+      }, className)}
       itemClassName={clsx({
         'pb-3': divideType !== 'border',
       })}
diff --git a/src/components/thumb-navigation-link.tsx b/src/components/thumb-navigation-link.tsx
index d7d8cd681..a8176fb1d 100644
--- a/src/components/thumb-navigation-link.tsx
+++ b/src/components/thumb-navigation-link.tsx
@@ -35,7 +35,7 @@ const ThumbNavigationLink: React.FC<IThumbNavigationLink> = ({ count, countMax,
           src={src}
           className={clsx({
             'h-5 w-5': true,
-            'text-gray-600': !active,
+            'text-gray-600 black:text-white': !active,
             'text-primary-500': active,
           })}
           count={count}
@@ -46,7 +46,7 @@ const ThumbNavigationLink: React.FC<IThumbNavigationLink> = ({ count, countMax,
           src={src}
           className={clsx({
             'h-5 w-5': true,
-            'text-gray-600': !active,
+            'text-gray-600 black:text-white': !active,
             'text-primary-500': active,
           })}
         />
diff --git a/src/components/ui/card/card.tsx b/src/components/ui/card/card.tsx
index d5f9c84d1..7da58e758 100644
--- a/src/components/ui/card/card.tsx
+++ b/src/components/ui/card/card.tsx
@@ -38,9 +38,10 @@ const Card = React.forwardRef<HTMLDivElement, ICard>(({ children, variant = 'def
     ref={ref}
     {...filteredProps}
     className={clsx({
-      'bg-white dark:bg-primary-900 text-gray-900 dark:text-gray-100 shadow-lg dark:shadow-none': variant === 'rounded',
+      'bg-white dark:bg-primary-900 black:bg-black text-gray-900 dark:text-gray-100 shadow-lg dark:shadow-none': variant === 'rounded',
       [sizes[size]]: variant === 'rounded',
       'py-4': variant === 'slim',
+      'black:rounded-none': size !== 'xl',
     }, className)}
   >
     {children}
diff --git a/src/components/ui/column/column.tsx b/src/components/ui/column/column.tsx
index 12dd12c4b..73e376f4d 100644
--- a/src/components/ui/column/column.tsx
+++ b/src/components/ui/column/column.tsx
@@ -102,8 +102,8 @@ const Column: React.FC<IColumn> = React.forwardRef((props, ref: React.ForwardedR
             backHref={backHref}
             className={clsx({
               'rounded-t-3xl': !isScrolled && !transparent,
-              'sticky top-12 z-10 bg-white/90 dark:bg-primary-900/90 backdrop-blur lg:top-16': !transparent,
-              'p-4 sm:p-0 sm:pb-4': transparent,
+              'sticky top-12 z-10 bg-white/90 dark:bg-primary-900/90 black:bg-black/90 backdrop-blur lg:top-16': !transparent,
+              'p-4 sm:p-0 sm:pb-4 black:p-4': transparent,
               '-mt-4 -mx-4 p-4': size !== 'lg' && !transparent,
               '-mt-4 -mx-4 p-4 sm:-mt-6 sm:-mx-6 sm:p-6': size === 'lg' && !transparent,
             })}
diff --git a/src/components/ui/divider/divider.tsx b/src/components/ui/divider/divider.tsx
index a95692dbd..691525bb5 100644
--- a/src/components/ui/divider/divider.tsx
+++ b/src/components/ui/divider/divider.tsx
@@ -13,7 +13,7 @@ interface IDivider {
 const Divider = ({ text, textSize = 'md' }: IDivider) => (
   <div className='relative' data-testid='divider'>
     <div className='absolute inset-0 flex items-center' aria-hidden='true'>
-      <div className='w-full border-t-2 border-solid border-gray-100 dark:border-gray-800' />
+      <div className='w-full border-t-2 border-solid border-gray-100 black:border-t dark:border-gray-800' />
     </div>
 
     {text && (
diff --git a/src/components/ui/input/input.tsx b/src/components/ui/input/input.tsx
index bb8db57f3..e1a069dd0 100644
--- a/src/components/ui/input/input.tsx
+++ b/src/components/ui/input/input.tsx
@@ -92,7 +92,7 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
               ['normal', 'search'].includes(theme),
             'text-gray-900 dark:text-gray-100': !props.disabled,
             'text-gray-600': props.disabled,
-            'rounded-md bg-white dark:bg-gray-900 border-gray-400 dark:border-gray-800': theme === 'normal',
+            'rounded-md bg-white dark:bg-gray-900 border-gray-400 dark:border-gray-800 black:bg-black': theme === 'normal',
             'rounded-full bg-gray-200 border-gray-200 dark:bg-gray-800 dark:border-gray-800 focus:bg-white dark:focus:bg-gray-900': theme === 'search',
             'pr-10 rtl:pl-10 rtl:pr-3': isPassword || append,
             'pl-8': typeof icon !== 'undefined',
diff --git a/src/components/ui/layout/layout.tsx b/src/components/ui/layout/layout.tsx
index 0ede77e6b..e3d9575c3 100644
--- a/src/components/ui/layout/layout.tsx
+++ b/src/components/ui/layout/layout.tsx
@@ -21,8 +21,8 @@ interface LayoutComponent extends React.FC<ILayout> {
 
 /** Layout container, to hold Sidebar, Main, and Aside. */
 const Layout: LayoutComponent = ({ children }) => (
-  <div className='relative sm:pt-4'>
-    <div className='mx-auto max-w-3xl sm:px-6 md:grid md:max-w-7xl md:grid-cols-12 md:gap-8 md:px-8'>
+  <div className='relative flex grow flex-col black:pt-0 sm:pt-4'>
+    <div className='mx-auto w-full max-w-3xl grow sm:px-6 md:grid md:max-w-7xl md:grid-cols-12 md:gap-8 md:px-8'>
       {children}
     </div>
   </div>
@@ -41,7 +41,7 @@ const Sidebar: React.FC<ISidebar> = ({ children }) => (
 const Main: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({ children, className }) => (
   <main
     className={clsx({
-      'md:col-span-12 lg:col-span-9 xl:col-span-6 pb-36': true,
+      'md:col-span-12 lg:col-span-9 xl:col-span-6 pb-36 black:border-gray-800 lg:black:border-l xl:black:border-r': true,
     }, className)}
   >
     {children}
diff --git a/src/components/ui/menu/menu.tsx b/src/components/ui/menu/menu.tsx
index 1250fbeb1..78dc5db0f 100644
--- a/src/components/ui/menu/menu.tsx
+++ b/src/components/ui/menu/menu.tsx
@@ -28,7 +28,7 @@ const MenuList: React.FC<IMenuList> = (props) => {
       <MenuItems
         onKeyDown={(event) => event.nativeEvent.stopImmediatePropagation()}
         className={
-          clsx(className, 'shadow-menu rounded-lg bg-white py-1 dark:bg-primary-900')
+          clsx(className, 'shadow-menu rounded-lg bg-white py-1 black:bg-black dark:bg-primary-900')
         }
         {...filteredProps}
       />
@@ -37,6 +37,6 @@ const MenuList: React.FC<IMenuList> = (props) => {
 };
 
 /** Divides menu items. */
-const MenuDivider = () => <hr className='mx-2 my-1 border-t-2 border-gray-100 dark:border-gray-800' />;
+const MenuDivider = () => <hr className='mx-2 my-1 border-t-2 border-gray-100 black:border-t dark:border-gray-800' />;
 
 export { Menu, MenuButton, MenuDivider, MenuItems, MenuItem, MenuList, MenuLink };
diff --git a/src/components/ui/modal/modal.tsx b/src/components/ui/modal/modal.tsx
index 85f8fc168..3c25d3678 100644
--- a/src/components/ui/modal/modal.tsx
+++ b/src/components/ui/modal/modal.tsx
@@ -95,7 +95,7 @@ const Modal = React.forwardRef<HTMLDivElement, IModal>(({
     <div
       ref={ref}
       data-testid='modal'
-      className={clsx(className, 'pointer-events-auto mx-auto block w-full rounded-2xl bg-white p-6 text-start align-middle text-gray-900 shadow-xl transition-all dark:bg-primary-900 dark:text-gray-100', widths[width])}
+      className={clsx(className, 'pointer-events-auto mx-auto block w-full rounded-2xl bg-white p-6 text-start align-middle text-gray-900 shadow-xl transition-all black:bg-black dark:bg-primary-900 dark:text-gray-100', widths[width])}
     >
       <div className='w-full justify-between sm:flex sm:items-start'>
         <div className='w-full'>
diff --git a/src/components/ui/select/select.tsx b/src/components/ui/select/select.tsx
index 4c4c6c2c1..b67ebe975 100644
--- a/src/components/ui/select/select.tsx
+++ b/src/components/ui/select/select.tsx
@@ -13,7 +13,7 @@ const Select = React.forwardRef<HTMLSelectElement, ISelect>((props, ref) => {
     <select
       ref={ref}
       className={clsx(
-        'w-full truncate rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-primary-500 focus:outline-none focus:ring-primary-500 disabled:opacity-50 sm:text-sm dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-1 dark:ring-gray-800 dark:focus:border-primary-500 dark:focus:ring-primary-500',
+        'w-full truncate rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-primary-500 focus:outline-none focus:ring-primary-500 disabled:opacity-50 black:bg-black sm:text-sm dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-1 dark:ring-gray-800 dark:focus:border-primary-500 dark:focus:ring-primary-500',
         className,
       )}
       {...filteredProps}
diff --git a/src/components/ui/toast/toast.tsx b/src/components/ui/toast/toast.tsx
index f80937481..ed89fe46b 100644
--- a/src/components/ui/toast/toast.tsx
+++ b/src/components/ui/toast/toast.tsx
@@ -106,7 +106,7 @@ const Toast = (props: IToast) => {
       data-testid='toast'
       className={
         clsx({
-          'p-4 pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white dark:bg-gray-900 shadow-lg dark:ring-2 dark:ring-gray-800': true,
+          'p-4 pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white black:bg-black dark:bg-gray-900 shadow-lg dark:ring-2 dark:ring-gray-800': true,
           'animate-enter': t.visible,
           'animate-leave': !t.visible,
         })
diff --git a/src/features/account/components/header.tsx b/src/features/account/components/header.tsx
index 8b4f3de88..c9cae466c 100644
--- a/src/features/account/components/header.tsx
+++ b/src/features/account/components/header.tsx
@@ -110,7 +110,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
     return (
       <div className='-mx-4 -mt-4 sm:-mx-6 sm:-mt-6'>
         <div>
-          <div className='relative h-32 w-full bg-gray-200 md:rounded-t-xl lg:h-48 dark:bg-gray-900/50' />
+          <div className='relative h-32 w-full bg-gray-200 black:rounded-t-none md:rounded-t-xl lg:h-48 dark:bg-gray-900/50' />
         </div>
 
         <div className='px-4 sm:px-6'>
@@ -620,7 +620,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
       )}
 
       <div>
-        <div className='relative isolate flex h-32 w-full flex-col justify-center overflow-hidden bg-gray-200 md:rounded-t-xl lg:h-48 dark:bg-gray-900/50'>
+        <div className='relative isolate flex h-32 w-full flex-col justify-center overflow-hidden bg-gray-200 black:rounded-t-none md:rounded-t-xl lg:h-48 dark:bg-gray-900/50'>
           {renderHeader()}
 
           <div className='absolute left-2 top-2'>
diff --git a/src/features/bookmarks/index.tsx b/src/features/bookmarks/index.tsx
index 23a02bf5c..426f06d68 100644
--- a/src/features/bookmarks/index.tsx
+++ b/src/features/bookmarks/index.tsx
@@ -11,7 +11,7 @@ import DropdownMenu from 'soapbox/components/dropdown-menu';
 import PullToRefresh from 'soapbox/components/pull-to-refresh';
 import StatusList from 'soapbox/components/status-list';
 import { Column } from 'soapbox/components/ui';
-import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
+import { useAppSelector, useAppDispatch, useTheme } from 'soapbox/hooks';
 import toast from 'soapbox/toast';
 
 const messages = defineMessages({
@@ -39,6 +39,7 @@ const Bookmarks: React.FC<IBookmarks> = ({ params }) => {
   const dispatch = useAppDispatch();
   const intl = useIntl();
   const history = useHistory();
+  const theme = useTheme();
 
   const folderId = params?.id;
 
@@ -107,13 +108,14 @@ const Bookmarks: React.FC<IBookmarks> = ({ params }) => {
     >
       <PullToRefresh onRefresh={handleRefresh}>
         <StatusList
+          className='black:p-4 black:sm:p-5'
           statusIds={statusIds}
           scrollKey='bookmarked_statuses'
           hasMore={hasMore}
           isLoading={typeof isLoading === 'boolean' ? isLoading : true}
           onLoadMore={() => handleLoadMore(dispatch, folderId)}
           emptyMessage={emptyMessage}
-          divideType='space'
+          divideType={theme === 'black' ? 'border' : 'space'}
         />
       </PullToRefresh>
     </Column>
diff --git a/src/features/chats/components/chat-page/chat-page.tsx b/src/features/chats/components/chat-page/chat-page.tsx
index 344b7a90a..8384c8744 100644
--- a/src/features/chats/components/chat-page/chat-page.tsx
+++ b/src/features/chats/components/chat-page/chat-page.tsx
@@ -60,15 +60,15 @@ const ChatPage: React.FC<IChatPage> = ({ chatId }) => {
     <div
       ref={containerRef}
       style={{ height }}
-      className='h-screen overflow-hidden bg-white text-gray-900 shadow-lg sm:rounded-t-xl dark:bg-primary-900 dark:text-gray-100 dark:shadow-none'
+      className='h-screen overflow-hidden bg-white text-gray-900 shadow-lg black:bg-transparent sm:rounded-t-xl dark:bg-primary-900 dark:text-gray-100 dark:shadow-none'
     >
       {isOnboarded ? (
         <div
-          className='grid h-full grid-cols-9 overflow-hidden dark:divide-x-2 dark:divide-solid dark:divide-gray-800'
+          className='grid h-full grid-cols-9 overflow-hidden black:divide-x dark:divide-x-2 dark:divide-solid dark:divide-gray-800'
           data-testid='chat-page'
         >
           <Stack
-            className={clsx('dark:inset col-span-9 overflow-hidden bg-gradient-to-r from-white to-gray-100 sm:col-span-3 dark:bg-gray-900 dark:bg-none', {
+            className={clsx('dark:inset col-span-9 overflow-hidden bg-gradient-to-r from-white to-gray-100 black:bg-black sm:col-span-3 dark:bg-gray-900 dark:bg-none', {
               'hidden sm:block': isSidebarHidden,
             })}
           >
diff --git a/src/features/chats/components/ui/pane.tsx b/src/features/chats/components/ui/pane.tsx
index 6583b76fc..40d58fad2 100644
--- a/src/features/chats/components/ui/pane.tsx
+++ b/src/features/chats/components/ui/pane.tsx
@@ -12,7 +12,7 @@ interface IPane {
 const Pane: React.FC<IPane> = ({ isOpen = false, children }) => {
   return (
     <div
-      className={clsx('fixed bottom-0 z-[99] flex w-96 flex-col rounded-t-lg bg-white shadow-3xl ltr:right-5 rtl:left-5 dark:bg-gray-900', {
+      className={clsx('fixed bottom-0 z-[99] flex w-96 flex-col rounded-t-lg bg-white shadow-3xl black:border black:border-b-0 black:border-gray-800 black:bg-black ltr:right-5 rtl:left-5 dark:bg-gray-900', {
         'h-[550px] max-h-[100vh]': isOpen,
         'h-16': !isOpen,
       })}
diff --git a/src/features/community-timeline/index.tsx b/src/features/community-timeline/index.tsx
index 724d9997f..9e7fca257 100644
--- a/src/features/community-timeline/index.tsx
+++ b/src/features/community-timeline/index.tsx
@@ -5,7 +5,7 @@ import { expandCommunityTimeline } from 'soapbox/actions/timelines';
 import { useCommunityStream } from 'soapbox/api/hooks';
 import PullToRefresh from 'soapbox/components/pull-to-refresh';
 import { Column } from 'soapbox/components/ui';
-import { useAppSelector, useAppDispatch, useSettings } from 'soapbox/hooks';
+import { useAppSelector, useAppDispatch, useSettings, useTheme } from 'soapbox/hooks';
 
 import Timeline from '../ui/components/timeline';
 
@@ -16,6 +16,7 @@ const messages = defineMessages({
 const CommunityTimeline = () => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
+  const theme = useTheme();
 
   const settings = useSettings();
   const onlyMedia = settings.community.other.onlyMedia;
@@ -41,12 +42,13 @@ const CommunityTimeline = () => {
     <Column className='-mt-3 sm:mt-0' label={intl.formatMessage(messages.title)} transparent>
       <PullToRefresh onRefresh={handleRefresh}>
         <Timeline
+          className='black:p-4 black:sm:p-5'
           scrollKey={`${timelineId}_timeline`}
           timelineId={`${timelineId}${onlyMedia ? ':media' : ''}`}
           prefix='home'
           onLoadMore={handleLoadMore}
           emptyMessage={<FormattedMessage id='empty_column.community' defaultMessage='The local timeline is empty. Write something publicly to get the ball rolling!' />}
-          divideType='space'
+          divideType={theme === 'black' ? 'border' : 'space'}
         />
       </PullToRefresh>
     </Column>
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/features/compose/editor/plugins/autosuggest-plugin.tsx b/src/features/compose/editor/plugins/autosuggest-plugin.tsx
index 5afc6c748..834d04721 100644
--- a/src/features/compose/editor/plugins/autosuggest-plugin.tsx
+++ b/src/features/compose/editor/plugins/autosuggest-plugin.tsx
@@ -378,8 +378,8 @@ const AutosuggestPlugin = ({
         key={key}
         data-index={i}
         className={clsx({
-          'snap-start snap-always px-4 py-2.5 text-sm text-gray-700 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 focus:bg-gray-100 dark:focus:bg-primary-800 group': true,
-          'snap-start snap-always bg-gray-100 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-800': i === selectedSuggestion,
+          'snap-start snap-always px-4 py-2.5 text-sm text-gray-700 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 focus:bg-gray-100 dark:focus:bg-primary-800 group black:hover:bg-gray-900 black:focus:bg-gray-900': true,
+          'snap-start snap-always bg-gray-100 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-800 black:bg-gray-900 black:hover:bg-gray-900': i === selectedSuggestion,
         })}
         onMouseDown={handleSelectSuggestion}
       >
diff --git a/src/features/edit-profile/components/avatar-picker.tsx b/src/features/edit-profile/components/avatar-picker.tsx
index b56a82a12..ab06c522c 100644
--- a/src/features/edit-profile/components/avatar-picker.tsx
+++ b/src/features/edit-profile/components/avatar-picker.tsx
@@ -24,7 +24,7 @@ const AvatarPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({ classNam
     <label
       ref={picker}
       className={clsx(
-        'absolute bottom-0 left-1/2 h-20 w-20 -translate-x-1/2 translate-y-1/2 cursor-pointer rounded-full ring-2',
+        'absolute bottom-0 left-1/2 h-20 w-20 -translate-x-1/2 translate-y-1/2 cursor-pointer rounded-full bg-primary-300 ring-2',
         {
           'border-2 border-primary-600 border-dashed !z-[99] overflow-hidden': isDragging,
           'ring-white dark:ring-primary-900': !isDraggedOver,
diff --git a/src/features/event/components/event-header.tsx b/src/features/event/components/event-header.tsx
index 245c942b2..78aad74eb 100644
--- a/src/features/event/components/event-header.tsx
+++ b/src/features/event/components/event-header.tsx
@@ -80,7 +80,7 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
     return (
       <>
         <div className='-mx-4 -mt-4'>
-          <div className='relative h-32 w-full bg-gray-200 md:rounded-t-xl lg:h-48 dark:bg-gray-900/50' />
+          <div className='relative h-32 w-full bg-gray-200 black:rounded-t-none md:rounded-t-xl lg:h-48 dark:bg-gray-900/50' />
         </div>
 
         <PlaceholderEventHeader />
@@ -363,13 +363,13 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
   return (
     <>
       <div className='-mx-4 -mt-4'>
-        <div className='relative h-32 w-full bg-gray-200 md:rounded-t-xl lg:h-48 dark:bg-gray-900/50'>
+        <div className='relative h-32 w-full bg-gray-200 black:rounded-t-none md:rounded-t-xl lg:h-48 dark:bg-gray-900/50'>
           {banner && (
             <a href={banner.url} onClick={handleHeaderClick} target='_blank'>
               <StillImage
                 src={banner.url}
                 alt={intl.formatMessage(messages.bannerHeader)}
-                className='absolute inset-0 h-full object-cover md:rounded-t-xl'
+                className='absolute inset-0 h-full object-cover black:rounded-t-none md:rounded-t-xl'
               />
             </a>
           )}
diff --git a/src/features/group/components/group-header.tsx b/src/features/group/components/group-header.tsx
index 0753216ca..21eb7e5dd 100644
--- a/src/features/group/components/group-header.tsx
+++ b/src/features/group/components/group-header.tsx
@@ -36,7 +36,7 @@ const GroupHeader: React.FC<IGroupHeader> = ({ group }) => {
     return (
       <div className='-mx-4 -mt-4 sm:-mx-6 sm:-mt-6' data-testid='group-header-missing'>
         <div>
-          <div className='relative h-32 w-full bg-gray-200 md:rounded-t-xl lg:h-48 dark:bg-gray-900/50' />
+          <div className='relative h-32 w-full bg-gray-200 black:rounded-t-none md:rounded-t-xl lg:h-48 dark:bg-gray-900/50' />
         </div>
 
         <div className='px-4 sm:px-6'>
diff --git a/src/features/hashtag-timeline/index.tsx b/src/features/hashtag-timeline/index.tsx
index 27d8212ea..b00a27c14 100644
--- a/src/features/hashtag-timeline/index.tsx
+++ b/src/features/hashtag-timeline/index.tsx
@@ -7,7 +7,7 @@ import { useHashtagStream } from 'soapbox/api/hooks';
 import List, { ListItem } from 'soapbox/components/list';
 import { Column, Toggle } from 'soapbox/components/ui';
 import Timeline from 'soapbox/features/ui/components/timeline';
-import { useAppDispatch, useAppSelector, useFeatures, useLoggedIn } from 'soapbox/hooks';
+import { useAppDispatch, useAppSelector, useFeatures, useLoggedIn, useTheme } from 'soapbox/hooks';
 
 interface IHashtagTimeline {
   params?: {
@@ -23,6 +23,7 @@ export const HashtagTimeline: React.FC<IHashtagTimeline> = ({ params }) => {
   const tag = useAppSelector((state) => state.tags.get(id));
   const next = useAppSelector(state => state.timelines.get(`hashtag:${id}`)?.next);
   const { isLoggedIn } = useLoggedIn();
+  const theme = useTheme();
 
   const handleLoadMore = (maxId: string) => {
     dispatch(expandHashtagTimeline(id, { url: next, maxId }));
@@ -63,11 +64,12 @@ export const HashtagTimeline: React.FC<IHashtagTimeline> = ({ params }) => {
         </List>
       )}
       <Timeline
+        className='black:p-4 black:sm:p-5'
         scrollKey='hashtag_timeline'
         timelineId={`hashtag:${id}`}
         onLoadMore={handleLoadMore}
         emptyMessage={<FormattedMessage id='empty_column.hashtag' defaultMessage='There is nothing in this hashtag yet.' />}
-        divideType='space'
+        divideType={theme === 'black' ? 'border' : 'space'}
       />
     </Column>
   );
diff --git a/src/features/home-timeline/index.tsx b/src/features/home-timeline/index.tsx
index a24dcbe5f..dd6bdd75d 100644
--- a/src/features/home-timeline/index.tsx
+++ b/src/features/home-timeline/index.tsx
@@ -6,7 +6,7 @@ import { expandHomeTimeline } from 'soapbox/actions/timelines';
 import PullToRefresh from 'soapbox/components/pull-to-refresh';
 import { Column, Stack, Text } from 'soapbox/components/ui';
 import Timeline from 'soapbox/features/ui/components/timeline';
-import { useAppSelector, useAppDispatch, useFeatures, useInstance } from 'soapbox/hooks';
+import { useAppSelector, useAppDispatch, useFeatures, useInstance, useTheme } from 'soapbox/hooks';
 
 const messages = defineMessages({
   title: { id: 'column.home', defaultMessage: 'Home' },
@@ -17,6 +17,7 @@ const HomeTimeline: React.FC = () => {
   const dispatch = useAppDispatch();
   const features = useFeatures();
   const instance = useInstance();
+  const theme = useTheme();
 
   const polling = useRef<NodeJS.Timeout | null>(null);
 
@@ -62,10 +63,11 @@ const HomeTimeline: React.FC = () => {
     <Column label={intl.formatMessage(messages.title)} transparent withHeader={false}>
       <PullToRefresh onRefresh={handleRefresh}>
         <Timeline
+          className='black:p-4 black:sm:p-5'
           scrollKey='home_timeline'
           onLoadMore={handleLoadMore}
           timelineId='home'
-          divideType='space'
+          divideType={theme === 'black' ? 'border' : 'space'}
           showAds
           emptyMessage={
             <Stack space={1}>
diff --git a/src/features/landing-timeline/index.tsx b/src/features/landing-timeline/index.tsx
index 95e000408..aa08a5783 100644
--- a/src/features/landing-timeline/index.tsx
+++ b/src/features/landing-timeline/index.tsx
@@ -5,7 +5,7 @@ import { expandCommunityTimeline } from 'soapbox/actions/timelines';
 import { useCommunityStream } from 'soapbox/api/hooks';
 import PullToRefresh from 'soapbox/components/pull-to-refresh';
 import { Column } from 'soapbox/components/ui';
-import { useAppSelector, useAppDispatch, useInstance } from 'soapbox/hooks';
+import { useAppSelector, useAppDispatch, useInstance, useTheme } from 'soapbox/hooks';
 
 import AboutPage from '../about';
 import Timeline from '../ui/components/timeline';
@@ -15,6 +15,7 @@ import { SiteBanner } from './components/site-banner';
 const LandingTimeline = () => {
   const dispatch = useAppDispatch();
   const instance = useInstance();
+  const theme = useTheme();
 
   const timelineEnabled = !instance.pleroma.metadata.restrict_unauthenticated.timelines.local;
   const next = useAppSelector(state => state.timelines.get('community')?.next);
@@ -50,12 +51,13 @@ const LandingTimeline = () => {
       {timelineEnabled ? (
         <PullToRefresh onRefresh={handleRefresh}>
           <Timeline
+            className='black:p-4 black:sm:p-5'
             scrollKey={`${timelineId}_timeline`}
             timelineId={timelineId}
             prefix='home'
             onLoadMore={handleLoadMore}
             emptyMessage={<FormattedMessage id='empty_column.community' defaultMessage='The local timeline is empty. Write something publicly to get the ball rolling!' />}
-            divideType='space'
+            divideType={theme === 'black' ? 'border' : 'space'}
           />
         </PullToRefresh>
       ) : (
diff --git a/src/features/list-timeline/index.tsx b/src/features/list-timeline/index.tsx
index e9b56aada..ec1e412dd 100644
--- a/src/features/list-timeline/index.tsx
+++ b/src/features/list-timeline/index.tsx
@@ -8,13 +8,14 @@ import { expandListTimeline } from 'soapbox/actions/timelines';
 import { useListStream } from 'soapbox/api/hooks';
 import MissingIndicator from 'soapbox/components/missing-indicator';
 import { Column, Button, Spinner } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { useAppDispatch, useAppSelector, useTheme } from 'soapbox/hooks';
 
 import Timeline from '../ui/components/timeline';
 
 const ListTimeline: React.FC = () => {
   const dispatch = useAppDispatch();
   const { id } = useParams<{ id: string }>();
+  const theme = useTheme();
 
   const list = useAppSelector((state) => state.lists.get(id));
   const next = useAppSelector(state => state.timelines.get(`list:${id}`)?.next);
@@ -61,11 +62,12 @@ const ListTimeline: React.FC = () => {
   return (
     <Column label={title} transparent>
       <Timeline
+        className='black:p-4 black:sm:p-5'
         scrollKey='list_timeline'
         timelineId={`list:${id}`}
         onLoadMore={handleLoadMore}
         emptyMessage={emptyMessage}
-        divideType='space'
+        divideType={theme === 'black' ? 'border' : 'space'}
       />
     </Column>
   );
diff --git a/src/features/notifications/index.tsx b/src/features/notifications/index.tsx
index a8709fd49..174041990 100644
--- a/src/features/notifications/index.tsx
+++ b/src/features/notifications/index.tsx
@@ -165,7 +165,7 @@ const Notifications = () => {
       onScrollToTop={handleScrollToTop}
       onScroll={handleScroll}
       className={clsx({
-        'divide-y divide-gray-200 dark:divide-primary-800 divide-solid': notifications.size > 0,
+        'divide-y divide-gray-200 black:divide-gray-800 dark:divide-primary-800 divide-solid': notifications.size > 0,
         'space-y-2': notifications.size === 0,
       })}
     >
diff --git a/src/features/placeholder/components/placeholder-event-preview.tsx b/src/features/placeholder/components/placeholder-event-preview.tsx
index 024975763..09ae4e9ca 100644
--- a/src/features/placeholder/components/placeholder-event-preview.tsx
+++ b/src/features/placeholder/components/placeholder-event-preview.tsx
@@ -9,7 +9,7 @@ const PlaceholderEventPreview = () => {
   const nameLength = randomIntFromInterval(5, 15);
 
   return (
-    <div className='relative w-full animate-pulse overflow-hidden rounded-lg bg-gray-100 text-primary-50 dark:bg-primary-800 dark:text-primary-800'>
+    <div className='relative w-full animate-pulse overflow-hidden rounded-lg bg-gray-100 text-primary-50 black:border black:border-gray-800 black:bg-black dark:bg-primary-800 dark:text-primary-800'>
       <div className='h-40 bg-primary-200 dark:bg-gray-600' />
       <Stack className='p-2.5' space={2}>
         <Text weight='semibold'>{generateText(eventNameLength)}</Text>
diff --git a/src/features/placeholder/components/placeholder-group-card.tsx b/src/features/placeholder/components/placeholder-group-card.tsx
index b43ae1aaf..b8b221ab4 100644
--- a/src/features/placeholder/components/placeholder-group-card.tsx
+++ b/src/features/placeholder/components/placeholder-group-card.tsx
@@ -9,7 +9,7 @@ const PlaceholderGroupCard = () => {
 
   return (
     <div className='animate-pulse'>
-      <Stack className='relative h-[240px] rounded-lg border border-solid border-gray-300 bg-white dark:border-primary-800 dark:bg-primary-900'>
+      <Stack className='relative h-[240px] rounded-lg border border-solid border-gray-300 bg-white black:bg-white dark:border-primary-800 dark:bg-primary-900'>
         {/* Group Cover Image */}
         <div className='relative grow basis-1/2 rounded-t-lg bg-gray-300 dark:bg-gray-800' />
 
diff --git a/src/features/placeholder/components/placeholder-notification.tsx b/src/features/placeholder/components/placeholder-notification.tsx
index 77c3032ae..8e66b08a1 100644
--- a/src/features/placeholder/components/placeholder-notification.tsx
+++ b/src/features/placeholder/components/placeholder-notification.tsx
@@ -8,7 +8,7 @@ import PlaceholderStatusContent from './placeholder-status-content';
 
 /** Fake notification to display while data is loading. */
 const PlaceholderNotification = () => (
-  <div className='bg-white px-4 py-6 sm:p-6 dark:bg-primary-900'>
+  <div className='bg-white px-4 py-6 black:bg-black sm:p-6 dark:bg-primary-900'>
     <div className='w-full animate-pulse'>
       <div className='mb-2'>
         <PlaceholderStatusContent minLength={20} maxLength={20} />
diff --git a/src/features/placeholder/components/placeholder-status.tsx b/src/features/placeholder/components/placeholder-status.tsx
index 2aea94bb5..c6d7221ad 100644
--- a/src/features/placeholder/components/placeholder-status.tsx
+++ b/src/features/placeholder/components/placeholder-status.tsx
@@ -15,7 +15,7 @@ interface IPlaceholderStatus {
 const PlaceholderStatus: React.FC<IPlaceholderStatus> = ({ variant }) => (
   <div
     className={clsx({
-      'status-placeholder bg-white dark:bg-primary-900': true,
+      'status-placeholder bg-white black:bg-black dark:bg-primary-900': true,
       'shadow-xl dark:shadow-none sm:rounded-xl px-4 py-6 sm:p-5': variant === 'rounded',
       'py-4': variant === 'slim',
     })}
diff --git a/src/features/public-timeline/index.tsx b/src/features/public-timeline/index.tsx
index 0e11ddcc4..e9caa6472 100644
--- a/src/features/public-timeline/index.tsx
+++ b/src/features/public-timeline/index.tsx
@@ -7,7 +7,7 @@ import { expandPublicTimeline } from 'soapbox/actions/timelines';
 import { usePublicStream } from 'soapbox/api/hooks';
 import PullToRefresh from 'soapbox/components/pull-to-refresh';
 import { Accordion, Column } from 'soapbox/components/ui';
-import { useAppSelector, useAppDispatch, useInstance, useSettings } from 'soapbox/hooks';
+import { useAppSelector, useAppDispatch, useInstance, useSettings, useTheme } from 'soapbox/hooks';
 
 import PinnedHostsPicker from '../remote-timeline/components/pinned-hosts-picker';
 import Timeline from '../ui/components/timeline';
@@ -20,6 +20,7 @@ const messages = defineMessages({
 const CommunityTimeline = () => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
+  const theme = useTheme();
 
   const instance = useInstance();
   const settings = useSettings();
@@ -57,7 +58,7 @@ const CommunityTimeline = () => {
     <Column className='-mt-3 sm:mt-0' label={intl.formatMessage(messages.title)} transparent>
       <PinnedHostsPicker />
 
-      {showExplanationBox && <div className='mb-4'>
+      {showExplanationBox && <div className='mb-4 black:mx-4'>
         <Accordion
           headline={<FormattedMessage id='fediverse_tab.explanation_box.title' defaultMessage='What is the Fediverse?' />}
           action={dismissExplanationBox}
@@ -86,12 +87,13 @@ const CommunityTimeline = () => {
       </div>}
       <PullToRefresh onRefresh={handleRefresh}>
         <Timeline
+          className='black:p-4 black:sm:p-5'
           scrollKey={`${timelineId}_timeline`}
           timelineId={`${timelineId}${onlyMedia ? ':media' : ''}`}
           prefix='home'
           onLoadMore={handleLoadMore}
           emptyMessage={<FormattedMessage id='empty_column.public' defaultMessage='There is nothing here! Write something publicly, or manually follow users from other servers to fill it up' />}
-          divideType='space'
+          divideType={theme === 'black' ? 'border' : 'space'}
         />
       </PullToRefresh>
     </Column>
diff --git a/src/features/quotes/index.tsx b/src/features/quotes/index.tsx
index 7b0d057fe..60ea8a550 100644
--- a/src/features/quotes/index.tsx
+++ b/src/features/quotes/index.tsx
@@ -7,7 +7,7 @@ import { useParams } from 'react-router-dom';
 import { expandStatusQuotes, fetchStatusQuotes } from 'soapbox/actions/status-quotes';
 import StatusList from 'soapbox/components/status-list';
 import { Column } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { useAppDispatch, useAppSelector, useTheme } from 'soapbox/hooks';
 
 const messages = defineMessages({
   heading: { id: 'column.quotes', defaultMessage: 'Post quotes' },
@@ -20,6 +20,7 @@ const Quotes: React.FC = () => {
   const dispatch = useAppDispatch();
   const intl = useIntl();
   const { statusId } = useParams<{ statusId: string }>();
+  const theme = useTheme();
 
   const statusIds = useAppSelector((state) => state.status_lists.getIn([`quotes:${statusId}`, 'items'], ImmutableOrderedSet<string>()));
   const isLoading = useAppSelector((state) => state.status_lists.getIn([`quotes:${statusId}`, 'isLoading'], true));
@@ -38,6 +39,7 @@ const Quotes: React.FC = () => {
   return (
     <Column label={intl.formatMessage(messages.heading)} transparent>
       <StatusList
+        className='black:p-4 black:sm:p-5'
         statusIds={statusIds as ImmutableOrderedSet<string>}
         scrollKey={`quotes:${statusId}`}
         hasMore={hasMore}
@@ -45,7 +47,7 @@ const Quotes: React.FC = () => {
         onLoadMore={() => handleLoadMore(statusId, dispatch)}
         onRefresh={handleRefresh}
         emptyMessage={emptyMessage}
-        divideType='space'
+        divideType={theme === 'black' ? 'border' : 'space'}
       />
     </Column>
   );
diff --git a/src/features/remote-timeline/index.tsx b/src/features/remote-timeline/index.tsx
index 4d5a65ffb..a50875531 100644
--- a/src/features/remote-timeline/index.tsx
+++ b/src/features/remote-timeline/index.tsx
@@ -6,7 +6,7 @@ import { expandRemoteTimeline } from 'soapbox/actions/timelines';
 import { useRemoteStream } from 'soapbox/api/hooks';
 import IconButton from 'soapbox/components/icon-button';
 import { Column, HStack, Text } from 'soapbox/components/ui';
-import { useAppSelector, useAppDispatch, useSettings } from 'soapbox/hooks';
+import { useAppSelector, useAppDispatch, useSettings, useTheme } from 'soapbox/hooks';
 
 import Timeline from '../ui/components/timeline';
 
@@ -22,6 +22,7 @@ interface IRemoteTimeline {
 const RemoteTimeline: React.FC<IRemoteTimeline> = ({ params }) => {
   const history = useHistory();
   const dispatch = useAppDispatch();
+  const theme = useTheme();
 
   const instance = params?.instance as string;
   const settings = useSettings();
@@ -64,6 +65,7 @@ const RemoteTimeline: React.FC<IRemoteTimeline> = ({ params }) => {
       )}
 
       <Timeline
+        className='black:p-4 black:sm:p-5'
         scrollKey={`${timelineId}_${instance}_timeline`}
         timelineId={`${timelineId}${onlyMedia ? ':media' : ''}:${instance}`}
         onLoadMore={handleLoadMore}
@@ -74,7 +76,7 @@ const RemoteTimeline: React.FC<IRemoteTimeline> = ({ params }) => {
             values={{ instance }}
           />
         }
-        divideType='space'
+        divideType={theme === 'black' ? 'border' : 'space'}
       />
     </Column>
   );
diff --git a/src/features/soapbox-config/components/site-preview.tsx b/src/features/soapbox-config/components/site-preview.tsx
index c757e6f7e..617dc3121 100644
--- a/src/features/soapbox-config/components/site-preview.tsx
+++ b/src/features/soapbox-config/components/site-preview.tsx
@@ -22,7 +22,7 @@ const SitePreview: React.FC<ISitePreview> = ({ soapbox }) => {
   const userTheme = settings.get('themeMode');
   const systemTheme = useSystemTheme();
 
-  const dark = userTheme === 'dark' || (userTheme === 'system' && systemTheme === 'dark');
+  const dark = ['dark', 'black'].includes(userTheme as string) || (userTheme === 'system' && systemTheme === 'dark');
 
   const bodyClass = clsx(
     'site-preview',
diff --git a/src/features/test-timeline/index.tsx b/src/features/test-timeline/index.tsx
index 1601dc165..623ef9d33 100644
--- a/src/features/test-timeline/index.tsx
+++ b/src/features/test-timeline/index.tsx
@@ -3,7 +3,7 @@ import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
 import { importFetchedStatuses } from 'soapbox/actions/importer';
 import { expandTimelineSuccess } from 'soapbox/actions/timelines';
-import { useAppDispatch } from 'soapbox/hooks';
+import { useAppDispatch, useTheme } from 'soapbox/hooks';
 
 import { Column } from '../../components/ui';
 import Timeline from '../ui/components/timeline';
@@ -31,6 +31,7 @@ const onlyMedia = false;
 const TestTimeline: React.FC = () => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
+  const theme = useTheme();
 
   React.useEffect(() => {
     dispatch(importFetchedStatuses(MOCK_STATUSES));
@@ -43,7 +44,7 @@ const TestTimeline: React.FC = () => {
         scrollKey={`${timelineId}_timeline`}
         timelineId={`${timelineId}${onlyMedia ? ':media' : ''}`}
         emptyMessage={<FormattedMessage id='empty_column.test' defaultMessage='The test timeline is empty.' />}
-        divideType='space'
+        divideType={theme === 'black' ? 'border' : 'space'}
       />
     </Column>
   );
diff --git a/src/features/ui/components/background-shapes.tsx b/src/features/ui/components/background-shapes.tsx
index 63df83ead..f256ad987 100644
--- a/src/features/ui/components/background-shapes.tsx
+++ b/src/features/ui/components/background-shapes.tsx
@@ -8,7 +8,7 @@ interface IBackgroundShapes {
 
 /** Gradient that appears in the background of the UI. */
 const BackgroundShapes: React.FC<IBackgroundShapes> = ({ position = 'fixed' }) => (
-  <div className={clsx(position, 'pointer-events-none inset-x-0 top-0 flex justify-center overflow-hidden')}>
+  <div className={clsx(position, 'pointer-events-none inset-x-0 top-0 flex justify-center overflow-hidden black:hidden')}>
     <div className='bg-gradient-sm lg:bg-gradient-light lg:dark:bg-gradient-dark h-screen w-screen' />
   </div>
 );
diff --git a/src/features/ui/components/navbar.tsx b/src/features/ui/components/navbar.tsx
index 0be4e3948..79d478404 100644
--- a/src/features/ui/components/navbar.tsx
+++ b/src/features/ui/components/navbar.tsx
@@ -70,7 +70,7 @@ const Navbar = () => {
   if (mfaToken) return <Redirect to={`/login?token=${encodeURIComponent(mfaToken)}`} />;
 
   return (
-    <nav className='sticky top-0 z-50 bg-white shadow dark:bg-primary-900' ref={node} data-testid='navbar'>
+    <nav className='sticky top-0 z-50 bg-white shadow black:border-b black:border-b-gray-800 black:bg-black dark:bg-primary-900' ref={node} data-testid='navbar'>
       <div className='mx-auto max-w-7xl px-2 sm:px-6 lg:px-8'>
         <div className='relative flex h-12 justify-between lg:h-16'>
           {account && (
diff --git a/src/features/ui/components/profile-dropdown.tsx b/src/features/ui/components/profile-dropdown.tsx
index ba57f7e59..39eb60c16 100644
--- a/src/features/ui/components/profile-dropdown.tsx
+++ b/src/features/ui/components/profile-dropdown.tsx
@@ -124,7 +124,7 @@ const ProfileDropdown: React.FC<IProfileDropdown> = ({ account, children }) => {
       {visible && (
         <div
           ref={refs.setFloating}
-          className='z-[1003] mt-2 max-w-xs rounded-md bg-white shadow-lg focus:outline-none dark:bg-gray-900 dark:ring-2 dark:ring-primary-700'
+          className='z-[1003] mt-2 max-w-xs rounded-md bg-white shadow-lg focus:outline-none black:bg-black dark:bg-gray-900 dark:ring-2 dark:ring-primary-700'
           style={{
             position: strategy,
             top: y ?? 0,
diff --git a/src/features/ui/components/theme-selector.tsx b/src/features/ui/components/theme-selector.tsx
index 3c7cb827a..f11c19213 100644
--- a/src/features/ui/components/theme-selector.tsx
+++ b/src/features/ui/components/theme-selector.tsx
@@ -6,6 +6,7 @@ import { Icon, Select } from 'soapbox/components/ui';
 const messages = defineMessages({
   light: { id: 'theme_toggle.light', defaultMessage: 'Light' },
   dark: { id: 'theme_toggle.dark', defaultMessage: 'Dark' },
+  black: { id: 'theme_toggle.black', defaultMessage: 'Black' },
   system: { id: 'theme_toggle.system', defaultMessage: 'System' },
 });
 
@@ -26,6 +27,8 @@ const ThemeSelector: React.FC<IThemeSelector> = ({ value, onChange }) => {
         return require('@tabler/icons/sun.svg');
       case 'dark':
         return require('@tabler/icons/moon.svg');
+      case 'black':
+        return require('@tabler/icons/shadow.svg');
       default:
         return null;
     }
@@ -50,6 +53,7 @@ const ThemeSelector: React.FC<IThemeSelector> = ({ value, onChange }) => {
           <option value='system'>{intl.formatMessage(messages.system)}</option>
           <option value='light'>{intl.formatMessage(messages.light)}</option>
           <option value='dark'>{intl.formatMessage(messages.dark)}</option>
+          <option value='black'>{intl.formatMessage(messages.black)}</option>
         </Select>
 
         <div className='pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3'>
diff --git a/src/features/ui/index.tsx b/src/features/ui/index.tsx
index 5c6ddea0e..4d7fdf793 100644
--- a/src/features/ui/index.tsx
+++ b/src/features/ui/index.tsx
@@ -483,7 +483,7 @@ const UI: React.FC<IUI> = ({ children }) => {
 
         <BackgroundShapes />
 
-        <div className='z-10 flex flex-col'>
+        <div className='z-10 flex min-h-screen flex-col'>
           <Navbar />
 
           <Layout>
diff --git a/src/hooks/useTheme.ts b/src/hooks/useTheme.ts
index f5c3bbf7a..8a53cd376 100644
--- a/src/hooks/useTheme.ts
+++ b/src/hooks/useTheme.ts
@@ -1,7 +1,7 @@
 import { useSettings } from './useSettings';
 import { useSystemTheme } from './useSystemTheme';
 
-type Theme = 'light' | 'dark';
+type Theme = 'light' | 'dark' | 'black';
 
 /**
  * Returns the actual theme being displayed (eg "light" or "dark")
@@ -11,8 +11,7 @@ const useTheme = (): Theme => {
   const { themeMode } = useSettings();
   const systemTheme = useSystemTheme();
 
-  const darkMode = themeMode === 'dark' || (themeMode === 'system' && systemTheme === 'dark');
-  return darkMode ? 'dark' : 'light';
+  return themeMode === 'system' ? systemTheme : themeMode;
 };
 
 export { useTheme };
diff --git a/src/init/soapbox-head.tsx b/src/init/soapbox-head.tsx
index 9032f10f0..c4bdd9f9c 100644
--- a/src/init/soapbox-head.tsx
+++ b/src/init/soapbox-head.tsx
@@ -22,12 +22,12 @@ const SoapboxHead: React.FC<ISoapboxHead> = ({ children }) => {
   const { locale, direction } = useLocale();
   const { demo, reduceMotion, underlineLinks, demetricator } = useSettings();
   const soapboxConfig = useSoapboxConfig();
+  const theme = useTheme();
 
-  const darkMode = useTheme() === 'dark';
   const themeCss = generateThemeCss(demo ? normalizeSoapboxConfig({ brandColor: '#0482d8' }) : soapboxConfig);
   const dsn = soapboxConfig.sentryDsn;
 
-  const bodyClass = clsx('h-full bg-white text-base dark:bg-gray-800', {
+  const bodyClass = clsx('h-full bg-white text-base black:bg-black dark:bg-gray-800', {
     'no-reduce-motion': !reduceMotion,
     'underline-links': underlineLinks,
     'demetricator': demetricator,
@@ -42,10 +42,10 @@ const SoapboxHead: React.FC<ISoapboxHead> = ({ children }) => {
   return (
     <>
       <Helmet>
-        <html lang={locale} className={clsx('h-full', { dark: darkMode })} />
+        <html lang={locale} className={clsx('h-full', { 'dark': theme === 'dark', 'dark black': theme === 'black' })} />
         <body className={bodyClass} dir={direction} />
         {themeCss && <style id='theme' type='text/css'>{`:root{${themeCss}}`}</style>}
-        {darkMode && <style type='text/css'>{':root { color-scheme: dark; }'}</style>}
+        {['dark', 'black'].includes(theme) && <style type='text/css'>{':root { color-scheme: dark; }'}</style>}
         <meta name='theme-color' content={soapboxConfig.brandColor} />
       </Helmet>
 
diff --git a/src/locales/en.json b/src/locales/en.json
index 9ec62c26d..ec466cd2c 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1518,6 +1518,7 @@
   "theme_editor.restore": "Restore default theme",
   "theme_editor.save": "Save theme",
   "theme_editor.saved": "Theme updated!",
+  "theme_toggle.black": "Black",
   "theme_toggle.dark": "Dark",
   "theme_toggle.light": "Light",
   "theme_toggle.system": "System",
diff --git a/src/pages/chats-page.tsx b/src/pages/chats-page.tsx
index dff684a91..368b2079e 100644
--- a/src/pages/chats-page.tsx
+++ b/src/pages/chats-page.tsx
@@ -7,7 +7,7 @@ interface IChatsPage {
 /** Custom layout for chats on desktop. */
 const ChatsPage: React.FC<IChatsPage> = ({ children }) => {
   return (
-    <div className='md:col-span-12 lg:col-span-9'>
+    <div className='black:border-gray-800 md:col-span-12 lg:col-span-9 lg:black:border-l'>
       {children}
     </div>
   );
diff --git a/src/pages/home-page.tsx b/src/pages/home-page.tsx
index c02bef495..53e295e27 100644
--- a/src/pages/home-page.tsx
+++ b/src/pages/home-page.tsx
@@ -50,10 +50,10 @@ const HomePage: React.FC<IHomePage> = ({ children }) => {
 
   return (
     <>
-      <Layout.Main className='space-y-3 pt-3 sm:pt-0 dark:divide-gray-800'>
+      <Layout.Main className='space-y-3 pt-3 black:space-y-0 sm:pt-0 dark:divide-gray-800'>
         {me && (
           <Card
-            className={clsx('relative z-[1] transition', {
+            className={clsx('relative z-[1] transition black:border-b black:border-gray-800', {
               'border-2 border-primary-600 border-dashed z-[99]': isDragging,
               'ring-2 ring-offset-2 ring-primary-600': isDraggedOver,
             })}
diff --git a/src/schemas/soapbox/settings.ts b/src/schemas/soapbox/settings.ts
index 48085e7ec..e052720ba 100644
--- a/src/schemas/soapbox/settings.ts
+++ b/src/schemas/soapbox/settings.ts
@@ -23,7 +23,7 @@ const settingsSchema = z.object({
   missingDescriptionModal: z.boolean().catch(false),
   defaultPrivacy: z.enum(['public', 'unlisted', 'private', 'direct']).catch('public'),
   defaultContentType: z.enum(['text/plain', 'text/markdown']).catch('text/plain'),
-  themeMode: z.enum(['system', 'light', 'dark']).catch('system'),
+  themeMode: z.enum(['system', 'light', 'dark', 'black']).catch('system'),
   locale: z.string().catch(navigator.language).pipe(z.enum(locales)).catch('en'),
   showExplanationBox: z.boolean().catch(true),
   explanationBox: z.boolean().catch(true),
diff --git a/src/styles/components/compose-form.scss b/src/styles/components/compose-form.scss
index 8b9614c1d..dd1b17802 100644
--- a/src/styles/components/compose-form.scss
+++ b/src/styles/components/compose-form.scss
@@ -128,7 +128,7 @@
   }
 
   &__dropdown {
-    @apply absolute bg-white dark:bg-gray-900 z-[1000] rounded-md shadow-lg ml-10 text-sm overflow-hidden;
+    @apply absolute bg-white dark:bg-gray-900 z-[1000] rounded-md shadow-lg ml-10 text-sm overflow-hidden black:bg-black black:border black:border-gray-800;
 
     &.top {
       transform-origin: 50% 100%;
@@ -140,10 +140,10 @@
   }
 
   &__option {
-    @apply flex p-2.5 text-sm text-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer;
+    @apply flex p-2.5 text-sm text-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer black:hover:bg-gray-900;
 
     &.active {
-      @apply bg-gray-100 dark:bg-gray-800;
+      @apply bg-gray-100 dark:bg-gray-800 black:bg-gray-900;
     }
 
     &:hover,
diff --git a/src/styles/components/datepicker.scss b/src/styles/components/datepicker.scss
index 5b153debc..13bc71585 100644
--- a/src/styles/components/datepicker.scss
+++ b/src/styles/components/datepicker.scss
@@ -1,9 +1,9 @@
 .react-datepicker {
-  @apply dark:bg-gray-900 dark:border-gray-700 p-4 font-sans text-xs text-gray-900 dark:text-gray-300 border border-solid border-gray-200 rounded-lg;
+  @apply black:bg-black dark:bg-gray-900 dark:border-gray-700 p-4 font-sans text-xs text-gray-900 dark:text-gray-300 border border-solid border-gray-200 rounded-lg;
 }
 
 .react-datepicker__input-container > input {
-  @apply dark:bg-gray-900 dark:text-gray-100 block w-full sm:text-sm border-gray-400 dark:border-gray-800 rounded-md focus:ring-primary-500 focus:border-primary-500;
+  @apply black:bg-black dark:bg-gray-900 dark:text-gray-100 block w-full sm:text-sm border-gray-400 dark:border-gray-800 rounded-md focus:ring-primary-500 focus:border-primary-500;
 
   &.has-error {
     @apply text-red-600 border-red-600;
@@ -12,7 +12,7 @@
 
 .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::before,
 .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::after {
-  @apply border-b-white dark:border-b-gray-900;
+  @apply border-b-white dark:border-b-gray-900 black:border-b-black;
 }
 
 .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::before {
@@ -24,7 +24,7 @@
 }
 
 .react-datepicker__header {
-  @apply bg-white dark:bg-gray-900 border-b-0 py-1 px-0;
+  @apply bg-white black:bg-black dark:bg-gray-900 border-b-0 py-1 px-0;
 }
 
 .react-datepicker__current-month,
@@ -85,11 +85,13 @@
 }
 
 .react-datepicker__time {
-  @apply dark:bg-gray-900;
+  &-container & {
+    @apply dark:bg-gray-900 black:bg-black;
+  }
 }
 
 .react-datepicker__time-container {
-  @apply dark:border-gray-700;
+  @apply dark:border-gray-700 black:border-gray-800;
 }
 
 .react-datepicker__day-name,
diff --git a/src/styles/components/detailed-status.scss b/src/styles/components/detailed-status.scss
index 65d429a19..2edea3294 100644
--- a/src/styles/components/detailed-status.scss
+++ b/src/styles/components/detailed-status.scss
@@ -1,5 +1,5 @@
 .thread {
-  @apply bg-white dark:bg-primary-900;
+  @apply bg-white black:bg-black dark:bg-primary-900;
 
   &__status {
     @apply relative pb-4;
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 {
diff --git a/src/styles/emoji-picker.scss b/src/styles/emoji-picker.scss
index 2efb2e388..31747eff7 100644
--- a/src/styles/emoji-picker.scss
+++ b/src/styles/emoji-picker.scss
@@ -8,3 +8,7 @@ em-emoji-picker {
 .dark em-emoji-picker {
   --rgb-background: var(--color-primary-900);
 }
+
+.black em-emoji-picker {
+  --rgb-background: var(--color-gray-900);
+}
diff --git a/src/styles/navigation.scss b/src/styles/navigation.scss
index 7860133fc..010d3b22e 100644
--- a/src/styles/navigation.scss
+++ b/src/styles/navigation.scss
@@ -1,5 +1,5 @@
 .thumb-navigation {
-  @apply fixed lg:hidden bottom-0 bg-white/90 dark:bg-primary-900/90 backdrop-blur-md border-t border-solid border-gray-200 dark:border-gray-800 left-0 right-0 shadow-2xl w-full flex z-50;
+  @apply fixed lg:hidden bottom-0 bg-white/90 black:bg-black/90 dark:bg-primary-900/90 backdrop-blur-md border-t border-solid border-gray-200 dark:border-gray-800 left-0 right-0 shadow-2xl w-full flex z-50;
   padding-bottom: env(safe-area-inset-bottom); /* iOS PWA */
   overflow-x: auto;
   scrollbar-width: thin;
diff --git a/tailwind.config.ts b/tailwind.config.ts
index b108490cf..707639804 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -2,9 +2,12 @@ import aspectRatioPlugin from '@tailwindcss/aspect-ratio';
 import formsPlugin from '@tailwindcss/forms';
 import typographyPlugin from '@tailwindcss/typography';
 import { type Config } from 'tailwindcss';
+import plugin from 'tailwindcss/plugin';
 
 import { parseColorMatrix } from './tailwind/colors';
 
+const blackVariantPlugin = plugin(({ addVariant }) => addVariant('black', '.black &'));
+
 const config: Config = {
   content: ['./src/**/*.{html,js,ts,tsx}', './custom/instance/**/*.html', './index.html'],
   darkMode: 'class',
@@ -105,6 +108,7 @@ const config: Config = {
     aspectRatioPlugin,
     formsPlugin,
     typographyPlugin,
+    blackVariantPlugin,
   ],
 };