User Settings: move darker dark mode to theme

src/components/Settings/UserSettings/Personalization.tsx

@@ -29,23 +29,6 @@ export default function Personalization({
 
   return (
     <>
-      <FormControlLabel
-        control={
-          <Checkbox
-            checked={settings.theme?.dark?.palette?.darker}
-            onChange={(e) => {
-              updateSettings({
-                theme: _merge(settings.theme, {
-                  dark: { palette: { darker: e.target.checked } },
-                }),
-              });
-            }}
-          />
-        }
-        label="Darker dark theme"
-        sx={{ my: -10 / 8 }}
-      />
-
       <FormControlLabel
         control={
           <Checkbox
@@ -62,7 +45,7 @@ export default function Personalization({
           />
         }
         label="Customize theme colors"
-        style={{ marginLeft: -11, marginBottom: -10 }}
+        style={{ marginLeft: -11, marginBottom: -10, marginTop: -10 }}
       />
 
       <Collapse in={customizedThemeColor} style={{ marginTop: 0 }}>

src/components/Settings/UserSettings/Theme.tsx

@@ -1,39 +1,68 @@
+import { IUserSettingsChildProps } from "pages/Settings/UserSettings";
+import _merge from "lodash/merge";
+
 import {
   FormControl,
   RadioGroup,
   FormControlLabel,
   Radio,
+  Divider,
+  Checkbox,
 } from "@mui/material";
 
 import { useAppContext } from "contexts/AppContext";
 
-export default function Theme() {
+export default function Theme({
+  settings,
+  updateSettings,
+}: IUserSettingsChildProps) {
   const { theme, themeOverridden, setTheme, setThemeOverridden } =
     useAppContext();
 
   return (
-    <FormControl component="fieldset" variant="standard" sx={{ my: -10 / 8 }}>
-      <legend style={{ fontSize: 0 }}>Theme</legend>
+    <>
+      <FormControl component="fieldset" variant="standard" sx={{ my: -10 / 8 }}>
+        <legend style={{ fontSize: 0 }}>Theme</legend>
 
-      <RadioGroup
-        value={themeOverridden ? theme : "system"}
-        onChange={(e) => {
-          if (e.target.value === "system") {
-            setThemeOverridden(false);
-          } else {
-            setTheme(e.target.value as typeof theme);
-            setThemeOverridden(true);
-          }
-        }}
-      >
-        <FormControlLabel
-          control={<Radio />}
-          value="system"
-          label="Match system theme"
-        />
-        <FormControlLabel control={<Radio />} value="light" label="Light" />
-        <FormControlLabel control={<Radio />} value="dark" label="Dark" />
-      </RadioGroup>
-    </FormControl>
+        <RadioGroup
+          value={themeOverridden ? theme : "system"}
+          onChange={(e) => {
+            if (e.target.value === "system") {
+              setThemeOverridden(false);
+            } else {
+              setTheme(e.target.value as typeof theme);
+              setThemeOverridden(true);
+            }
+          }}
+        >
+          <FormControlLabel
+            control={<Radio />}
+            value="system"
+            label="Match system theme"
+          />
+          <FormControlLabel control={<Radio />} value="light" label="Light" />
+          <FormControlLabel control={<Radio />} value="dark" label="Dark" />
+        </RadioGroup>
+      </FormControl>
+
+      <Divider />
+
+      <FormControlLabel
+        control={
+          <Checkbox
+            checked={settings.theme?.dark?.palette?.darker}
+            onChange={(e) => {
+              updateSettings({
+                theme: _merge(settings.theme, {
+                  dark: { palette: { darker: e.target.checked } },
+                }),
+              });
+            }}
+          />
+        }
+        label="Darker dark theme"
+        style={{ marginLeft: -11, marginBottom: -10, marginTop: 13 }}
+      />
+    </>
   );
 }

src/pages/Settings/UserSettings.tsx

@@ -48,7 +48,7 @@ export default function UserSettingsPage() {
 
   const sections = [
     { title: "Account", Component: Account, props: childProps },
-    { title: "Theme", Component: Theme },
+    { title: "Theme", Component: Theme, props: childProps },
     { title: "Personalization", Component: Personalization, props: childProps },
   ];