useDarkMode emoji fix

src/components/@shared/Orbis/FloatingChat/ChatToolbar.tsx

@@ -5,14 +5,18 @@ import EmojiIcon from '@images/emoji.svg'
 import Input from '@shared/FormInput'
 import { useOrbis } from '@context/Orbis'
 import dynamic from 'next/dynamic'
-import Picker, { EmojiClickData, EmojiStyle, Theme } from 'emoji-picker-react'
+import { EmojiClickData, EmojiStyle, Theme } from 'emoji-picker-react'
+import useDarkMode from '@oceanprotocol/use-dark-mode'
+import { useMarketMetadata } from '@context/MarketMetadata'
 
-interface ChatToolbarProps {
-  mode: boolean
-}
+// interface ChatToolbarProps {
+//   mode: boolean
+// }
+
+const ChatToolbar = () => {
+  const { appConfig } = useMarketMetadata()
+  const darkMode = useDarkMode(false, appConfig?.darkModeConfig)
 
-const ChatToolbar: FC<ChatToolbarProps> = ({ mode }) => {
-  console.log('THEME', mode)
   const { orbis, conversationId } = useOrbis()
   const [content, setContent] = useState<string>('')
   const [showPicker, setShowPicker] = useState(false)
@@ -30,8 +34,8 @@ const ChatToolbar: FC<ChatToolbarProps> = ({ mode }) => {
   }
 
   useEffect(() => {
-    console.log(content)
-  }, [content])
+    console.log(darkMode)
+  }, [darkMode])
 
   const sendMessage = async () => {
     const res = await orbis.sendMessage({
@@ -72,7 +76,7 @@ const ChatToolbar: FC<ChatToolbarProps> = ({ mode }) => {
         {showPicker && (
           <Picker
             onEmojiClick={onEmojiClick}
-            theme={mode ? Theme.DARK : Theme.LIGHT}
+            theme={darkMode.value ? Theme.DARK : Theme.LIGHT}
             emojiStyle={EmojiStyle.NATIVE}
             autoFocusSearch={false}
             lazyLoadEmojis={false}

src/components/@shared/Orbis/FloatingChat/index.tsx

@@ -88,18 +88,6 @@ export default function FloatingChat() {
     }
   }, [conversationId])
 
-  const [mode, setMode] = useState(true)
-
-  const storage: boolean =
-    window !== undefined
-      ? window.localStorage.getItem('oceanDarkMode') === 'true'
-      : false
-
-  useEffect(() => {
-    console.log(storage)
-    setMode(storage)
-  }, [storage])
-
   return (
     <div className={`${styles.wrapper} ${!convOpen && styles.isClosed}`}>
       <div className={styles.floating}>
@@ -163,7 +151,7 @@ export default function FloatingChat() {
               </button>
             </div>
             <Conversation messages={messages} />
-            <ChatToolbar mode={mode} />
+            <ChatToolbar />
           </div>
         )}
       </div>