Make the ThemeToggle look decent, unhide it

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

@@ -68,9 +68,7 @@ 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 />
-            )}
+            <ThemeToggle />
 
             {account ? (
               <div className='hidden relative lg:flex items-center'>

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/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;
   }
 }