From 9022651a6775ce154cec7fb0b8f927bdd98a5c34 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Wed, 30 Mar 2022 15:07:17 +0200
Subject: [PATCH] Styles, dark mode
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/components/poll.tsx               |  2 +-
 app/soapbox/components/thumb_navigation.js    | 10 ++--
 app/soapbox/components/ui/column/column.tsx   |  2 +-
 app/soapbox/components/ui/menu/menu.css       | 10 ++--
 app/soapbox/components/ui/menu/menu.tsx       |  2 +-
 .../features/developers/developers_menu.js    | 16 +++---
 .../directory/components/account_card.js      |  7 +--
 .../components/placeholder_notification.js    |  2 +-
 .../ui/components/column_forbidden.js         |  4 +-
 app/styles/accounts.scss                      |  2 +-
 app/styles/components/accordion.scss          |  3 +-
 app/styles/components/compose-form.scss       | 54 ++++++-------------
 app/styles/components/directory.scss          | 13 +++--
 app/styles/components/dropdown-menu.scss      | 21 ++++----
 app/styles/emoji_picker.scss                  | 27 ++++------
 app/styles/navigation.scss                    |  2 +-
 16 files changed, 73 insertions(+), 104 deletions(-)

diff --git a/app/soapbox/components/poll.tsx b/app/soapbox/components/poll.tsx
index 577426a0c..b7bcbf547 100644
--- a/app/soapbox/components/poll.tsx
+++ b/app/soapbox/components/poll.tsx
@@ -71,7 +71,7 @@ const PollOptionText: React.FC<IPollOptionText> = ({ poll, option, index, active
         onChange={handleOptionChange}
       />
 
-      <HStack alignItems='center' className='p-1'>
+      <HStack alignItems='center' className='p-1 text-gray-900 dark:text-gray-300'>
         {!showResults && (
           <span
             className={classNames('inline-block w-4 h-4 mr-2.5 border border-solid border-primary-600 rounded-full', {
diff --git a/app/soapbox/components/thumb_navigation.js b/app/soapbox/components/thumb_navigation.js
index 8f31e46ca..021c18ced 100644
--- a/app/soapbox/components/thumb_navigation.js
+++ b/app/soapbox/components/thumb_navigation.js
@@ -51,7 +51,7 @@ class ThumbNavigation extends React.PureComponent {
             src={require('icons/feed.svg')}
             className={classNames({
               'h-5 w-5': true,
-              'text-gray-600': location.pathname !== '/',
+              'text-gray-600 dark:text-gray-300': location.pathname !== '/',
               'text-primary-600': location.pathname === '/',
             })}
           />
@@ -66,7 +66,7 @@ class ThumbNavigation extends React.PureComponent {
             src={require('@tabler/icons/icons/search.svg')}
             className={classNames({
               'h-5 w-5': true,
-              'text-gray-600': location.pathname !== '/search',
+              'text-gray-600 dark:text-gray-300': location.pathname !== '/search',
               'text-primary-600': location.pathname === '/search',
             })}
           />
@@ -82,7 +82,7 @@ class ThumbNavigation extends React.PureComponent {
               src={require('@tabler/icons/icons/bell.svg')}
               className={classNames({
                 'h-5 w-5': true,
-                'text-gray-600': location.pathname !== '/notifications',
+                'text-gray-600 dark:text-gray-300': location.pathname !== '/notifications',
                 'text-primary-600': location.pathname === '/notifications',
               })}
               count={notificationCount}
@@ -101,7 +101,7 @@ class ThumbNavigation extends React.PureComponent {
                 src={require('@tabler/icons/icons/messages.svg')}
                 className={classNames({
                   'h-5 w-5': true,
-                  'text-gray-600': location.pathname !== '/chats',
+                  'text-gray-600 dark:text-gray-300': location.pathname !== '/chats',
                   'text-primary-600': location.pathname === '/chats',
                 })}
                 count={chatsCount}
@@ -116,7 +116,7 @@ class ThumbNavigation extends React.PureComponent {
                 src={require('@tabler/icons/icons/mail.svg')}
                 className={classNames({
                   'h-5 w-5': true,
-                  'text-gray-600': !['/messages', '/conversations'].includes(location.pathname),
+                  'text-gray-600 dark:text-gray-300': !['/messages', '/conversations'].includes(location.pathname),
                   'text-primary-600': ['/messages', '/conversations'].includes(location.pathname),
                 })}
               />
diff --git a/app/soapbox/components/ui/column/column.tsx b/app/soapbox/components/ui/column/column.tsx
index 1e143d1b0..c66a57326 100644
--- a/app/soapbox/components/ui/column/column.tsx
+++ b/app/soapbox/components/ui/column/column.tsx
@@ -32,7 +32,7 @@ const Column: React.FC<IColumn> = React.forwardRef((props, ref: React.ForwardedR
 
   const renderChildren = () => {
     if (transparent) {
-      return <div className='bg-white sm:bg-transparent'>{children}</div>;
+      return <div className='bg-white dark:bg-slate-800 sm:bg-transparent sm:dark:bg-transparent'>{children}</div>;
     }
 
     return (
diff --git a/app/soapbox/components/ui/menu/menu.css b/app/soapbox/components/ui/menu/menu.css
index f66746546..ca619a7be 100644
--- a/app/soapbox/components/ui/menu/menu.css
+++ b/app/soapbox/components/ui/menu/menu.css
@@ -1,5 +1,5 @@
 [data-reach-menu-popover] {
-  @apply origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none;
+  @apply origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-slate-900 ring-1 ring-black ring-opacity-5 focus:outline-none;
 
   z-index: 1003;
 }
@@ -9,7 +9,7 @@ div:focus[data-reach-menu-list] {
 }
 
 [data-reach-menu-item][data-selected] {
-  @apply bg-gray-100;
+  @apply bg-gray-100 dark:bg-slate-700;
 }
 
 [data-reach-menu-list] {
@@ -18,11 +18,11 @@ div:focus[data-reach-menu-list] {
 
 [data-reach-menu-item],
 [data-reach-menu-link] {
-  @apply block px-4 py-2.5 text-sm text-gray-700 cursor-pointer;
+  @apply block px-4 py-2.5 text-sm text-gray-700 dark:text-gray-400 cursor-pointer;
 }
 
 [data-reach-menu-link] {
-  @apply hover:bg-gray-100;
+  @apply hover:bg-gray-100 dark:hover:bg-slate-700;
 }
 
 [data-reach-menu-item][data-disabled],
@@ -31,5 +31,5 @@ div:focus[data-reach-menu-list] {
 }
 
 [data-reach-menu-popover] hr {
-  @apply my-1 mx-2 border-t border-gray-100;
+  @apply my-1 mx-2 border-t border-gray-100 dark:border-slate-600;
 }
diff --git a/app/soapbox/components/ui/menu/menu.tsx b/app/soapbox/components/ui/menu/menu.tsx
index 9c7a6f48a..4d51717dc 100644
--- a/app/soapbox/components/ui/menu/menu.tsx
+++ b/app/soapbox/components/ui/menu/menu.tsx
@@ -20,7 +20,7 @@ const MenuList = (props: IMenuList) => (
   <MenuPopover position={props.position === 'left' ? positionDefault : positionRight}>
     <MenuItems
       onKeyDown={(event) => event.nativeEvent.stopImmediatePropagation()}
-      className='py-1 bg-white rounded-lg shadow-menu'
+      className='py-1 bg-white dark:bg-slate-900 rounded-lg shadow-menu'
       {...props}
     />
   </MenuPopover>
diff --git a/app/soapbox/features/developers/developers_menu.js b/app/soapbox/features/developers/developers_menu.js
index 79227fb44..8539c5def 100644
--- a/app/soapbox/features/developers/developers_menu.js
+++ b/app/soapbox/features/developers/developers_menu.js
@@ -31,32 +31,32 @@ const Developers = () => {
   return (
     <Column label={intl.formatMessage(messages.heading)}>
       <div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2'>
-        <Link to='/developers/apps/create' className='bg-gray-200 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'>
-          <InlineSVG src={require('@tabler/icons/icons/apps.svg')} />
+        <Link to='/developers/apps/create' className='bg-gray-200 dark:bg-gray-600 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'>
+          <InlineSVG src={require('@tabler/icons/icons/apps.svg')} className='dark:text-gray-100' />
 
           <Text>
             <FormattedMessage id='developers.navigation.app_create_label' defaultMessage='Create an app' />
           </Text>
         </Link>
 
-        <Link to='/developers/settings_store' className='bg-gray-200 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'>
-          <InlineSVG src={require('@tabler/icons/icons/code-plus.svg')} />
+        <Link to='/developers/settings_store' className='bg-gray-200 dark:bg-gray-600 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'>
+          <InlineSVG src={require('@tabler/icons/icons/code-plus.svg')} className='dark:text-gray-100' />
 
           <Text>
             <FormattedMessage id='developers.navigation.settings_store_label' defaultMessage='Settings store' />
           </Text>
         </Link>
 
-        <Link to='/error' className='bg-gray-200 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'>
-          <InlineSVG src={require('@tabler/icons/icons/mood-sad.svg')} />
+        <Link to='/error' className='bg-gray-200 dark:bg-gray-600 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'>
+          <InlineSVG src={require('@tabler/icons/icons/mood-sad.svg')} className='dark:text-gray-100' />
 
           <Text>
             <FormattedMessage id='developers.navigation.intentional_error_label' defaultMessage='Trigger an error' />
           </Text>
         </Link>
 
-        <button onClick={leaveDevelopers} className='bg-gray-200 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'>
-          <InlineSVG src={require('@tabler/icons/icons/logout.svg')} />
+        <button onClick={leaveDevelopers} className='bg-gray-200 dark:bg-gray-600 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'>
+          <InlineSVG src={require('@tabler/icons/icons/logout.svg')} className='dark:text-gray-100' />
 
           <Text>
             <FormattedMessage id='developers.navigation.leave_developers_label' defaultMessage='Leave developers' />
diff --git a/app/soapbox/features/directory/components/account_card.js b/app/soapbox/features/directory/components/account_card.js
index cc64dbad1..b40d85190 100644
--- a/app/soapbox/features/directory/components/account_card.js
+++ b/app/soapbox/features/directory/components/account_card.js
@@ -11,6 +11,7 @@ import Avatar from 'soapbox/components/avatar';
 import DisplayName from 'soapbox/components/display_name';
 import Permalink from 'soapbox/components/permalink';
 import RelativeTimestamp from 'soapbox/components/relative_timestamp';
+import { Text } from 'soapbox/components/ui';
 import ActionButton from 'soapbox/features/ui/components/action_button';
 import { makeGetAccount } from 'soapbox/selectors';
 import { shortNumberFormat } from 'soapbox/utils/numbers';
@@ -73,9 +74,9 @@ class AccountCard extends ImmutablePureComponent {
         </div>
 
         <div className='directory__card__extra'>
-          <div className='accounts-table__count'>{shortNumberFormat(account.get('statuses_count'))} <small><FormattedMessage id='account.posts' defaultMessage='Toots' /></small></div>
-          <div className='accounts-table__count'>{shortNumberFormat(account.get('followers_count'))} <small><FormattedMessage id='account.followers' defaultMessage='Followers' /></small></div>
-          <div className='accounts-table__count'>{account.get('last_status_at') === null ? <FormattedMessage id='account.never_active' defaultMessage='Never' /> : <RelativeTimestamp timestamp={account.get('last_status_at')} />} <small><FormattedMessage id='account.last_status' defaultMessage='Last active' /></small></div>
+          <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>
       </div>
     );
diff --git a/app/soapbox/features/placeholder/components/placeholder_notification.js b/app/soapbox/features/placeholder/components/placeholder_notification.js
index e01cfe519..e56f90c58 100644
--- a/app/soapbox/features/placeholder/components/placeholder_notification.js
+++ b/app/soapbox/features/placeholder/components/placeholder_notification.js
@@ -5,7 +5,7 @@ import PlaceholderDisplayName from './placeholder_display_name';
 import PlaceholderStatusContent from './placeholder_status_content';
 
 const PlaceholderNotification = () => (
-  <div className='bg-white px-4 py-6 sm:p-6'>
+  <div className='bg-white dark:bg-slate-800 px-4 py-6 sm:p-6'>
     <div className='w-full animate-pulse'>
       <div className='mb-2'>
         <PlaceholderStatusContent minLength={20} maxLength={20} />
diff --git a/app/soapbox/features/ui/components/column_forbidden.js b/app/soapbox/features/ui/components/column_forbidden.js
index d4df027b3..0eb56af92 100644
--- a/app/soapbox/features/ui/components/column_forbidden.js
+++ b/app/soapbox/features/ui/components/column_forbidden.js
@@ -3,7 +3,6 @@ import React from 'react';
 import { defineMessages, injectIntl } from 'react-intl';
 
 import Column from './column';
-import ColumnHeader from './column_header';
 
 const messages = defineMessages({
   title: { id: 'column_forbidden.title', defaultMessage: 'Forbidden' },
@@ -20,8 +19,7 @@ class ColumnForbidden extends React.PureComponent {
     const { intl: { formatMessage } } = this.props;
 
     return (
-      <Column>
-        <ColumnHeader icon='exclamation-circle' type={formatMessage(messages.title)} />
+      <Column label={formatMessage(messages.title)}>
         <div className='error-column'>
           {formatMessage(messages.body)}
         </div>
diff --git a/app/styles/accounts.scss b/app/styles/accounts.scss
index 5a482c5e0..b9392b2c9 100644
--- a/app/styles/accounts.scss
+++ b/app/styles/accounts.scss
@@ -73,8 +73,8 @@
       text-align: left;
 
       strong {
+        @apply text-black dark:text-white;
         font-size: 15px;
-        color: var(--primary-text-color);
         font-weight: 500;
         overflow: hidden;
         text-overflow: ellipsis;
diff --git a/app/styles/components/accordion.scss b/app/styles/components/accordion.scss
index 2bb5a5fc3..e52cb10ee 100644
--- a/app/styles/components/accordion.scss
+++ b/app/styles/components/accordion.scss
@@ -3,10 +3,9 @@
 }
 
 .accordion {
-  color: var(--primary-text-color);
+  @apply text-black dark:text-white bg-gray-100 dark:bg-slate-800;
   padding: 15px 20px;
   font-size: 14px;
-  background-color: var(--brand-color--faint);
   border-radius: 8px;
   margin: 0;
   position: relative;
diff --git a/app/styles/components/compose-form.scss b/app/styles/components/compose-form.scss
index a88ed1bd5..7fca9a08a 100644
--- a/app/styles/components/compose-form.scss
+++ b/app/styles/components/compose-form.scss
@@ -362,14 +362,7 @@
 }
 
 .privacy-dropdown__dropdown {
-  font-size: 14px;
-  position: absolute;
-  background: var(--foreground-color);
-  box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
-  border-radius: 4px;
-  margin-left: 40px;
-  overflow: hidden;
-  z-index: 10000;
+  @apply absolute bg-white dark:bg-slate-900 z-40 rounded-md shadow-lg ml-10 text-sm;
 
   &.top {
     transform-origin: 50% 100%;
@@ -381,50 +374,38 @@
 }
 
 .privacy-dropdown__option {
-  color: var(--primary-text-color);
-  padding: 10px;
-  cursor: pointer;
-  display: flex;
+  @apply flex p-2.5 text-sm text-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-slate-800 cursor-pointer;
 
-  &:hover,
   &.active {
-    background: var(--brand-color--med);
-    color: var(--primary-text-color);
-    outline: 0;
-
-    .privacy-dropdown__option__content {
-      color: var(--primary-text-color);
+    @apply bg-gray-100 dark:bg-slate-800;
+  }
 
-      strong {
-        color: var(--primary-text-color);
-      }
+  &:hover,
+  &.active {
+    .privacy-dropdown__option__content,
+    .privacy-dropdown__option__content strong {
+      @apply text-black dark:text-white;
     }
   }
 
-  &.active:hover {
-    background: hsla(var(--brand-color_hsl), 0.5);
+  &.active {
+    @apply hover:bg-gray-200 dark:hover:bg-slate-700;
   }
 }
 
 .privacy-dropdown__option__icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: 10px;
+  @apply flex items-center justify-center mr-2.5;
 }
 
 .privacy-dropdown__option__content {
-  flex: 1 1 auto;
-  color: var(--highlight-text-color);
+  @apply flex-auto text-primary-600 dark:text-primary-400;
 
   strong {
-    font-weight: 500;
-    display: block;
-    color: var(--primary-text-color);
+    @apply block font-medium text-black dark:text-white;
 
     @each $lang in $cjk-langs {
       &:lang(#{$lang}) {
-        font-weight: 700;
+        @apply font-bold;
       }
     }
   }
@@ -450,12 +431,11 @@
   }
 
   &.top .privacy-dropdown__value {
-    border-radius: 0 0 4px 4px;
+    @apply rounded-t-md;
   }
 
   .privacy-dropdown__dropdown {
-    display: block;
-    box-shadow: 2px 4px 6px rgba($base-shadow-color, 0.1);
+    @apply block shadow-md;
   }
 }
 
diff --git a/app/styles/components/directory.scss b/app/styles/components/directory.scss
index 62f6c7172..b07dabdb3 100644
--- a/app/styles/components/directory.scss
+++ b/app/styles/components/directory.scss
@@ -31,11 +31,10 @@
   }
 
   &__card {
+    @apply rounded-lg bg-gray-100 dark:bg-slate-700;
     box-sizing: border-box;
     margin-bottom: 0;
     box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
-    border-radius: 10px;
-    background: var(--foreground-color);
     overflow: hidden;
     position: relative;
 
@@ -54,9 +53,9 @@
     }
 
     &__img {
+      @apply bg-primary-200 dark:bg-slate-600;
       height: 125px;
       position: relative;
-      background: var(--brand-color--med);
 
       img {
         display: block;
@@ -68,9 +67,9 @@
     }
 
     &__bar {
+      @apply bg-primary-200 dark:bg-slate-600;
       display: flex;
       align-items: center;
-      background: var(--brand-color--med);
       padding: 10px;
 
       &__name {
@@ -104,17 +103,17 @@
         text-align: left;
 
         strong {
+          @apply text-black dark:text-white;
           font-size: 15px;
-          color: var(--primary-text-color);
           font-weight: 500;
           overflow: hidden;
           text-overflow: ellipsis;
         }
 
         span:not(.verified-icon) {
+          @apply text-gray-500 dark:text-gray-400;
           display: block;
           font-size: 14px;
-          color: var(--primary-text-color--faint);
           font-weight: 400;
           overflow: hidden;
           text-overflow: ellipsis;
@@ -145,9 +144,9 @@
       }
 
       .account__header__content {
+        @apply border-b border-solid border-gray-200 dark:border-slate-600;
         box-sizing: border-box;
         padding: 15px 10px;
-        border-bottom: 1px solid var(--brand-color--med);
         width: 100%;
         min-height: 50px;
         white-space: nowrap;
diff --git a/app/styles/components/dropdown-menu.scss b/app/styles/components/dropdown-menu.scss
index b31d8b55a..4be465849 100644
--- a/app/styles/components/dropdown-menu.scss
+++ b/app/styles/components/dropdown-menu.scss
@@ -1,5 +1,5 @@
 .dropdown-menu {
-  @apply absolute bg-white z-40 rounded-md shadow-lg py-1 w-56;
+  @apply absolute bg-white dark:bg-slate-900 z-40 rounded-md shadow-lg py-1 w-56;
 
   &.left { transform-origin: 100% 50%; }
   &.top { transform-origin: 50% 100%; }
@@ -11,31 +11,31 @@
     border: 0 solid transparent;
 
     &.left {
+      @apply border-l-white dark:border-l-slate-900;
       right: -5px;
       margin-top: -5px;
       border-width: 5px 0 5px 5px;
-      border-left-color: #fff;
     }
 
     &.top {
+      @apply border-t-white dark:border-t-slate-900;
       bottom: -5px;
       margin-left: -5px;
       border-width: 5px 5px 0;
-      border-top-color: #fff;
     }
 
     &.bottom {
+      @apply border-b-white dark:border-b-slate-900;
       top: -5px;
       margin-left: -5px;
       border-width: 0 5px 5px;
-      border-bottom-color: #fff;
     }
 
     &.right {
+      @apply border-r-white dark:border-r-slate-900;
       left: -5px;
       margin-top: -5px;
       border-width: 5px 5px 5px 0;
-      border-right-color: #fff;
     }
   }
 
@@ -45,27 +45,24 @@
 
   &__item {
     a {
-      @apply flex px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer;
-    }
+      @apply flex px-4 py-2.5 text-sm text-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-slate-800 cursor-pointer;
 
-    a {
       > .svg-icon:first-child {
         @apply h-5 w-5 mr-2.5 transition-none;
 
         svg {
-          stroke-width: 1.5;
-          transition: none;
+          @apply stroke-[1.5px] transition-none;
         }
       }
     }
 
     &.destructive a {
-      @apply text-danger-600;
+      @apply text-danger-600 dark:text-danger-400;
     }
   }
 
   &__separator {
-    @apply block my-2 h-[1px] bg-gray-200;
+    @apply block my-2 h-[1px] bg-gray-200 dark:bg-gray-600;
   }
 }
 // end .dropdown-menu
diff --git a/app/styles/emoji_picker.scss b/app/styles/emoji_picker.scss
index ae4d95213..3b7f2bd3a 100644
--- a/app/styles/emoji_picker.scss
+++ b/app/styles/emoji_picker.scss
@@ -5,7 +5,7 @@
 }
 
 .emoji-mart {
-  @apply text-base inline-block text-gray-900 rounded bg-white shadow-lg;
+  @apply text-base inline-block text-gray-900 dark:text-gray-100 rounded bg-white dark:bg-slate-900 shadow-lg;
 }
 
 .emoji-mart .emoji-mart-emoji {
@@ -33,7 +33,7 @@
 }
 
 .emoji-mart-anchor {
-  @apply relative block flex-auto text-gray-400 text-center overflow-hidden transition-colors py-3 px-1;
+  @apply relative block flex-auto text-gray-400 dark:text-gray-500 text-center overflow-hidden transition-colors py-3 px-1;
 }
 
 .emoji-mart-anchor:focus { outline: 0; }
@@ -41,7 +41,7 @@
 .emoji-mart-anchor:hover,
 .emoji-mart-anchor:focus,
 .emoji-mart-anchor-selected {
-  @apply text-gray-600;
+  @apply text-gray-600 dark:text-gray-300;
 }
 
 .emoji-mart-anchor-selected .emoji-mart-anchor-bar {
@@ -73,11 +73,11 @@
 }
 
 .emoji-mart-search {
-  @apply relative mt-1.5 p-2.5 pr-12 bg-white;
+  @apply relative mt-1.5 p-2.5 pr-12 bg-white dark:bg-slate-900;
 }
 
 .emoji-mart-search input {
-  @apply text-sm pr-9 block w-full border-gray-300 rounded-full focus:ring-primary-500 focus:border-primary-500;
+  @apply text-sm pr-9 block w-full border-gray-300 dark:border-gray-600 rounded-full focus:ring-primary-500 focus:border-primary-500;
 
   &::-moz-focus-inner {
     border: 0;
@@ -125,6 +125,7 @@
 }
 
 .emoji-mart-category .emoji-mart-emoji:hover::before {
+  @apply bg-gray-50 dark:bg-slate-800;
   z-index: 0;
   content: "";
   position: absolute;
@@ -132,7 +133,6 @@
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: #f4f4f4;
   border-radius: 100%;
 }
 
@@ -145,12 +145,11 @@
 }
 
 .emoji-mart-category-label span {
+  @apply bg-white dark:bg-slate-900;
   display: block;
   width: 100%;
   font-weight: 500;
   padding: 5px 6px;
-  background-color: #fff;
-  background-color: rgba(255, 255, 255, 0.95);
 }
 
 .emoji-mart-category-list {
@@ -181,7 +180,7 @@
 }
 
 .emoji-mart-no-results {
-  @apply text-sm text-center text-gray-600;
+  @apply text-sm text-center text-gray-600 dark:text-gray-300;
   padding-top: 70px;
 }
 
@@ -242,22 +241,18 @@
 }
 
 .emoji-picker-dropdown__modifiers__menu {
-  @apply absolute bg-white rounded-3xl shadow overflow-hidden;
+  @apply absolute bg-white dark:bg-slate-900 rounded-3xl shadow overflow-hidden;
   z-index: 4;
   top: -4px;
   left: -8px;
 
   button {
-    display: block;
-    cursor: pointer;
-    border: 0;
-    padding: 4px 8px;
-    background: transparent;
+    @apply block cursor-pointer border-0 px-2 py-1 bg-transparent;
 
     &:hover,
     &:focus,
     &:active {
-      background: hsla(var(--background-color_hsl), 0.4);
+      @apply bg-gray-300 dark:bg-slate-600;
     }
   }
 
diff --git a/app/styles/navigation.scss b/app/styles/navigation.scss
index da6c2b5bb..ee0f7624b 100644
--- a/app/styles/navigation.scss
+++ b/app/styles/navigation.scss
@@ -86,7 +86,7 @@
 }
 
 .thumb-navigation {
-  @apply fixed lg:hidden bottom-0 bg-white border-t border-solid border-gray-200 left-0 right-0 shadow-2xl w-full flex z-50;
+  @apply fixed lg:hidden bottom-0 bg-white dark:bg-slate-800 border-t border-solid border-gray-200 dark:border-gray-700 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;