Merge branch 'mobx'

src/pages/settings/GenericSettings.tsx

@@ -15,7 +15,7 @@ import {
 
 import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
 
-import { ThemeContext } from "../../context/Theme";
+import { useApplicationState } from "../../mobx/State";
 
 import Category from "../../components/ui/Category";
 import Header from "../../components/ui/Header";
@@ -55,7 +55,7 @@ export function GenericSettings({
     indexHeader,
 }: Props) {
     const history = useHistory();
-    const theme = useContext(ThemeContext);
+    const theme = useApplicationState().settings.theme;
     const { page } = useParams<{ page: string }>();
 
     const [closing, setClosing] = useState(false);
@@ -96,8 +96,8 @@ export function GenericSettings({
                     name="theme-color"
                     content={
                         isTouchscreenDevice
-                            ? theme["background"]
-                            : theme["secondary-background"]
+                            ? theme.getVariable("background")
+                            : theme.getVariable("secondary-background")
                     }
                 />
             </Helmet>