Emoji theme

src/components/MessageBox.tsx

@@ -231,7 +231,11 @@ export default function MessageBox({
           <DropdownMenuContent className="">
             <EmojiPicker
               onEmojiClick={(e) => setText(text + e.emoji)}
-              theme={emoji.Theme.DARK}
+              theme={
+                app.clientSettings.theme === "dark"
+                  ? emoji.Theme.DARK
+                  : emoji.Theme.LIGHT
+              }
             />
           </DropdownMenuContent>
         </DropdownMenu>

src/hooks/use-app.ts

@@ -3,6 +3,7 @@ import { useRef, useState } from "react";
 import { useMessages } from "./use-messages";
 import { StringMap } from "@/types/typeUtils";
 import useUser, { UserProfile } from "./get-user";
+import { useClientSettings } from "./use-settings";
 
 export default function useApp(): App {
   const node = useRef<WebSocket | null>(null);
@@ -10,9 +11,12 @@ export default function useApp(): App {
   const { messages, addMessage } = useMessages();
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const profile = useUser();
+  const [clientSettings, setClientSettings] = useClientSettings();
 
   return {
     node,
+    clientSettings,
+    setClientSettings,
     profile,
     profiles,
     setProfiles,

src/types/app.ts

@@ -2,6 +2,7 @@ import { Dispatch, RefObject, SetStateAction } from "react";
 import { StringMap } from "./typeUtils";
 import { UserProfile } from "@/hooks/get-user";
 import { Message } from "./types";
+import { ClientSettings } from "./settings";
 
 export type SetState<T> = Dispatch<SetStateAction<T>>;
 
@@ -9,6 +10,9 @@ export default interface App {
   node: RefObject<WebSocket | null>;
   profile: UserProfile | null;
 
+  clientSettings: ClientSettings;
+  setClientSettings: SetState<ClientSettings>;
+
   profiles: StringMap<UserProfile | null>;
   setProfiles: SetState<StringMap<UserProfile | null>>;