diff --git a/app/soapbox/features/ui/components/theme_toggle.js b/app/soapbox/features/ui/components/theme_toggle.js
deleted file mode 100644
index c91c67c807..0000000000
Binary files a/app/soapbox/features/ui/components/theme_toggle.js and /dev/null differ
diff --git a/app/soapbox/features/ui/components/theme_toggle.tsx b/app/soapbox/features/ui/components/theme_toggle.tsx
new file mode 100644
index 0000000000..34d5d3b0e2
--- /dev/null
+++ b/app/soapbox/features/ui/components/theme_toggle.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { useDispatch } from 'react-redux';
+import Toggle from 'react-toggle';
+import { v4 as uuidv4 } from 'uuid';
+
+import { changeSetting } from 'soapbox/actions/settings';
+import { useSettings } from 'soapbox/hooks';
+
+const messages = defineMessages({
+  switchToLight: { id: 'tabs_bar.theme_toggle_light', defaultMessage: 'Switch to light theme' },
+  switchToDark: { id: 'tabs_bar.theme_toggle_dark', defaultMessage: 'Switch to dark theme' },
+});
+
+interface IThemeToggle {
+  showLabel: boolean,
+}
+
+function ThemeToggle({ showLabel }: IThemeToggle) {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const themeMode = useSettings().get('themeMode');
+
+  const id = uuidv4();
+  const label = intl.formatMessage(themeMode === 'light' ? messages.switchToDark : messages.switchToLight);
+
+  const onToggle = () => {
+    const setting = themeMode === 'light' ? 'dark' : 'light';
+    dispatch(changeSetting(['themeMode'], setting));
+  };
+
+  return (
+    <div className='theme-toggle'>
+      <div className='setting-toggle' aria-label={label}>
+        <Toggle
+          id={id}
+          checked={themeMode === 'light'}
+          onChange={onToggle}
+        />
+        {showLabel && (<label htmlFor={id} className='setting-toggle__label'>{label}</label>)}
+      </div>
+    </div>
+  );
+}
+
+export default ThemeToggle;
diff --git a/app/soapbox/features/ui/components/theme_toggle_container.js b/app/soapbox/features/ui/components/theme_toggle_container.js
deleted file mode 100644
index b000d1ba54..0000000000
Binary files a/app/soapbox/features/ui/components/theme_toggle_container.js and /dev/null differ
diff --git a/package.json b/package.json
index 4ec9a63724..42bc832591 100644
--- a/package.json
+++ b/package.json
@@ -72,6 +72,7 @@
     "@types/lodash": "^4.14.180",
     "@types/react-helmet": "^6.1.5",
     "@types/react-router-dom": "^5.3.3",
+    "@types/react-toggle": "^4.0.3",
     "@types/uuid": "^8.3.4",
     "array-includes": "^3.0.3",
     "autoprefixer": "^10.4.2",
diff --git a/yarn.lock b/yarn.lock
index 65de52edfc..146c677b17 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2129,6 +2129,13 @@
     "@types/history" "^4.7.11"
     "@types/react" "*"
 
+"@types/react-toggle@^4.0.3":
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/@types/react-toggle/-/react-toggle-4.0.3.tgz#8db98ac8d2c5e8c03c2d3a42027555c1cd2289da"
+  integrity sha512-57QdMWeeQdRjM2/p+udgYerxUbSkmeUIW18kwUttcci6GHkgxoqCsDZfRtsCsAHcvvM5VBQdtDUEgLWo2e87mA==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*", "@types/react@17":
   version "17.0.21"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.21.tgz#069c43177cd419afaab5ce26bb4e9056549f7ea6"