Black mode

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

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>
 );

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 && (

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,

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: 'Pure 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/moon-off.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'>