Add ThemeToggle to Navbar (developers only)

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

@@ -6,6 +6,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 { openSidebar } from '../../../actions/sidebar';
@@ -67,6 +68,10 @@ 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') && (
+              <ThemeToggle />
+            )}
+
             {account ? (
               <div className='hidden relative lg:flex items-center'>
                 <ProfileDropdown account={account}>

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

@@ -5,6 +5,7 @@ import Toggle from 'react-toggle';
 import { v4 as uuidv4 } from 'uuid';
 
 import { changeSetting } from 'soapbox/actions/settings';
+import { Icon } from 'soapbox/components/ui';
 import { useSettings } from 'soapbox/hooks';
 
 const messages = defineMessages({
@@ -13,7 +14,7 @@ const messages = defineMessages({
 });
 
 interface IThemeToggle {
-  showLabel: boolean,
+  showLabel?: boolean,
 }
 
 function ThemeToggle({ showLabel }: IThemeToggle) {
@@ -35,6 +36,10 @@ function ThemeToggle({ showLabel }: IThemeToggle) {
         <Toggle
           id={id}
           checked={themeMode === 'light'}
+          icons={{
+            checked: <Icon src={require('@tabler/icons/icons/sun.svg')} />,
+            unchecked: <Icon src={require('@tabler/icons/icons/moon.svg')} />,
+          }}
           onChange={onToggle}
         />
         {showLabel && (<label htmlFor={id} className='setting-toggle__label'>{label}</label>)}