feat(mobx): start implementing theme store

src/components/common/UpdateIndicator.tsx

@@ -1,11 +1,11 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import { Download, CloudDownload } from "@styled-icons/boxicons-regular";
 
-import { useContext, useEffect, useState } from "preact/hooks";
+import { useEffect, useState } from "preact/hooks";
 
 import { internalSubscribe } from "../../lib/eventEmitter";
 
-import { ThemeContext } from "../../context/Theme";
+import { useApplicationState } from "../../mobx/State";
 
 import IconButton from "../ui/IconButton";
 
@@ -27,7 +27,7 @@ export default function UpdateIndicator({ style }: Props) {
     });
 
     if (!pending) return null;
-    const theme = useContext(ThemeContext);
+    const theme = useApplicationState().settings.theme;
 
     if (style === "titlebar") {
         return (
@@ -36,7 +36,10 @@ export default function UpdateIndicator({ style }: Props) {
                     content="A new update is available!"
                     placement="bottom">
                     <div onClick={() => updateSW(true)}>
-                        <CloudDownload size={22} color={theme.success} />
+                        <CloudDownload
+                            size={22}
+                            color={theme.getVariable("success")}
+                        />
                     </div>
                 </Tooltip>
             </div>
@@ -47,7 +50,7 @@ export default function UpdateIndicator({ style }: Props) {
 
     return (
         <IconButton onClick={() => updateSW(true)}>
-            <Download size={22} color={theme.success} />
+            <Download size={22} color={theme.getVariable("success")} />
         </IconButton>
     );
 }

src/components/common/user/UserIcon.tsx

@@ -5,12 +5,10 @@ import { useParams } from "react-router-dom";
 import { Masquerade } from "revolt-api/types/Channels";
 import { Presence } from "revolt-api/types/Users";
 import { User } from "revolt.js/dist/maps/Users";
-import { Nullable } from "revolt.js/dist/util/null";
 import styled, { css } from "styled-components";
 
-import { useContext } from "preact/hooks";
+import { useApplicationState } from "../../../mobx/State";
 
-import { ThemeContext } from "../../../context/Theme";
 import { useClient } from "../../../context/revoltjs/RevoltClient";
 
 import fallback from "../assets/user.png";
@@ -26,15 +24,15 @@ interface Props extends IconBaseProps<User> {
 }
 
 export function useStatusColour(user?: User) {
-    const theme = useContext(ThemeContext);
+    const theme = useApplicationState().settings.theme;
 
     return user?.online && user?.status?.presence !== Presence.Invisible
         ? user?.status?.presence === Presence.Idle
-            ? theme["status-away"]
+            ? theme.getVariable("status-away")
             : user?.status?.presence === Presence.Busy
-            ? theme["status-busy"]
-            : theme["status-online"]
-        : theme["status-invisible"];
+            ? theme.getVariable("status-busy")
+            : theme.getVariable("status-online")
+        : theme.getVariable("status-invisible");
 }
 
 const VoiceIndicator = styled.div<{ status: VoiceStatus }>`