Merge branch 'theme-gate' into 'develop'

Dark theme fixes

See merge request soapbox-pub/soapbox-fe!1308

app/soapbox/features/preferences/index.tsx

@@ -9,6 +9,8 @@ import { SelectDropdown } from 'soapbox/features/forms';
 import SettingToggle from 'soapbox/features/notifications/components/setting_toggle';
 import { useAppSelector } from 'soapbox/hooks';
 
+import ThemeToggle from '../ui/components/theme-toggle';
+
 const languages = {
   en: 'English',
   ar: 'العربية',
@@ -125,13 +127,13 @@ const Preferences = () => {
         >
           <SettingToggle settings={settings} settingPath={['home', 'shows', 'reply']} onChange={onToggleChange} />
         </ListItem>
-
-        {/* <ListItem label={<FormattedMessage id='home.column_settings.show_direct' defaultMessage='Show direct messages' />}>
-          <SettingToggle settings={settings} settingPath={['home', 'shows', 'direct']} onChange={onToggleChange} />
-        </ListItem> */}
       </List>
 
       <List>
+        <ListItem label={<FormattedMessage id='preferences.fields.theme' defaultMessage='Theme' />}>
+          <ThemeToggle />
+        </ListItem>
+
         <ListItem label={<FormattedMessage id='preferences.fields.language_label' defaultMessage='Language' />}>
           <SelectDropdown
             items={languages}

app/soapbox/features/ui/components/profile-dropdown.tsx

@@ -7,7 +7,7 @@ import { Link } from 'react-router-dom';
 import { logOut, switchAccount } from 'soapbox/actions/auth';
 import { fetchOwnAccounts } from 'soapbox/actions/auth';
 import { Menu, MenuButton, MenuDivider, MenuItem, MenuLink, MenuList } from 'soapbox/components/ui';
-import { useAppSelector, useFeatures, useSettings } from 'soapbox/hooks';
+import { useAppSelector, useFeatures } from 'soapbox/hooks';
 import { makeGetAccount } from 'soapbox/selectors';
 
 import Account from '../../../components/account';
@@ -39,7 +39,6 @@ const getAccount = makeGetAccount();
 const ProfileDropdown: React.FC<IProfileDropdown> = ({ account, children }) => {
   const dispatch = useDispatch();
   const features = useFeatures();
-  const settings = useSettings();
   const intl = useIntl();
 
   const authUsers = useAppSelector((state) => state.auth.get('users'));
@@ -79,12 +78,8 @@ const ProfileDropdown: React.FC<IProfileDropdown> = ({ account, children }) => {
       }
     });
 
-    if (features.darkMode || settings.get('isDeveloper')) {
-      menu.push({ text: null });
-
-      menu.push({ text: intl.formatMessage(messages.theme), toggle: <ThemeToggle /> });
-    }
-
+    menu.push({ text: null });
+    menu.push({ text: intl.formatMessage(messages.theme), toggle: <ThemeToggle /> });
     menu.push({ text: null });
 
     menu.push({

app/soapbox/pages/home_page.tsx

@@ -35,7 +35,7 @@ const HomePage: React.FC = ({ children }) => {
 
   return (
     <>
-      <Layout.Main className='divide-y divide-gray-200 divide-solid sm:divide-none'>
+      <Layout.Main className='divide-y divide-gray-200 dark:divide-slate-700 divide-solid sm:divide-none'>
         {me && (
           <Card variant='rounded' ref={composeBlock}>
             <CardBody>

app/soapbox/utils/features.ts

@@ -188,10 +188,6 @@ const getInstanceFeatures = (instance: Instance) => {
       v.software === PIXELFED,
     ]),
 
-    // FIXME: long-term this shouldn't be a feature,
-    // but for now we want it to be overrideable in the build
-    darkMode: true,
-
     /**
      * Legacy DMs timeline where messages are displayed chronologically without groupings.
      * @see GET /api/v1/timelines/direct