From f9d01dab0a006e36f7b40f467163a6f253cd0cd7 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 10 Apr 2022 13:38:08 -0500
Subject: [PATCH 1/2] Make the ThemeToggle look decent, unhide it

---
 app/soapbox/features/ui/components/navbar.tsx       | 4 +---
 app/soapbox/features/ui/components/theme_toggle.tsx | 4 ++--
 app/styles/components/theme-toggle.scss             | 9 ++++++---
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/app/soapbox/features/ui/components/navbar.tsx b/app/soapbox/features/ui/components/navbar.tsx
index d01b2fd27..6ba320195 100644
--- a/app/soapbox/features/ui/components/navbar.tsx
+++ b/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'>
diff --git a/app/soapbox/features/ui/components/theme_toggle.tsx b/app/soapbox/features/ui/components/theme_toggle.tsx
index 5f04be848..e8c63c60f 100644
--- a/app/soapbox/features/ui/components/theme_toggle.tsx
+++ b/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}
         />
diff --git a/app/styles/components/theme-toggle.scss b/app/styles/components/theme-toggle.scss
index 5b59d80b1..112c14972 100644
--- a/app/styles/components/theme-toggle.scss
+++ b/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;
   }
 }

From 8377e3c86b9e840f554383e74d9e75ce1b7f5315 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 12 Apr 2022 19:08:31 -0500
Subject: [PATCH 2/2] Make darkMode a feature (for now)

---
 app/soapbox/features/ui/components/navbar.tsx | 8 ++++++--
 app/soapbox/utils/features.ts                 | 4 ++++
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/features/ui/components/navbar.tsx b/app/soapbox/features/ui/components/navbar.tsx
index 6ba320195..8b7f9286b 100644
--- a/app/soapbox/features/ui/components/navbar.tsx
+++ b/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,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'>
-            <ThemeToggle />
+            {/* TODO: make this available for everyone when it's ready (possibly in a different place) */}
+            {(features.darkMode || settings.get('isDeveloper')) && (
+              <ThemeToggle />
+            )}
 
             {account ? (
               <div className='hidden relative lg:flex items-center'>
diff --git a/app/soapbox/utils/features.ts b/app/soapbox/utils/features.ts
index e1c5d12e0..468015696 100644
--- a/app/soapbox/utils/features.ts
+++ b/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,
   };
 };