Merge branch 'next-theme-picker' into 'next'

Next: Make the ThemeToggle look decent, unhide it

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

app/soapbox/features/ui/components/navbar.tsx

@@ -7,7 +7,7 @@ import { Link } from 'react-router-dom';
 import { Avatar, Button, Icon } from 'soapbox/components/ui';
 import Search from 'soapbox/features/compose/components/search';
 import ThemeToggle from 'soapbox/features/ui/components/theme_toggle';
-import { useOwnAccount, useSoapboxConfig, useSettings } from 'soapbox/hooks';
+import { useOwnAccount, useSoapboxConfig, useSettings, useFeatures } from 'soapbox/hooks';
 
 import { openSidebar } from '../../../actions/sidebar';
 
@@ -19,6 +19,7 @@ const Navbar = () => {
 
   const account = useOwnAccount();
   const settings = useSettings();
+  const features = useFeatures();
   const soapboxConfig = useSoapboxConfig();
   const singleUserMode = soapboxConfig.get('singleUserMode');
 
@@ -68,7 +69,8 @@ const Navbar = () => {
           </div>
 
           <div className='absolute inset-y-0 right-0 flex items-center pr-2 lg:static lg:inset-auto lg:ml-6 lg:pr-0 space-x-3'>
-            {settings.get('isDeveloper') && (
+            {/* TODO: make this available for everyone when it's ready (possibly in a different place) */}
+            {(features.darkMode || settings.get('isDeveloper')) && (
               <ThemeToggle />
             )}
 

app/soapbox/features/ui/components/theme_toggle.tsx

@@ -37,8 +37,8 @@ function ThemeToggle({ showLabel }: IThemeToggle) {
           id={id}
           checked={themeMode === 'light'}
           icons={{
-            checked: <Icon src={require('@tabler/icons/icons/sun.svg')} />,
-            unchecked: <Icon src={require('@tabler/icons/icons/moon.svg')} />,
+            checked: <Icon className='w-4 h-4' src={require('@tabler/icons/icons/sun.svg')} />,
+            unchecked: <Icon className='w-4 h-4' src={require('@tabler/icons/icons/moon.svg')} />,
           }}
           onChange={onToggle}
         />

app/soapbox/utils/features.ts

@@ -134,6 +134,10 @@ const getInstanceFeatures = (instance: Instance) => {
     trendingTruths: v.software === TRUTHSOCIAL,
     trendingStatuses: v.software === MASTODON && gte(v.compatVersion, '3.5.0'),
     pepe: v.software === TRUTHSOCIAL,
+
+    // FIXME: long-term this shouldn't be a feature,
+    // but for now we want it to be overrideable in the build
+    darkMode: true,
   };
 };
 

app/styles/components/theme-toggle.scss

@@ -27,8 +27,11 @@
     }
   }
 
-  .svg-icon {
-    width: 18px;
-    height: 18px;
+  .react-toggle-track {
+    @apply dark:bg-slate-600;
+  }
+
+  .react-toggle-thumb {
+    @apply dark:bg-slate-900 dark:border-slate-800;
   }
 }