From 93c4e126806fec53f49c1a70e09bb287141d5702 Mon Sep 17 00:00:00 2001
From: Noah Petherbridge <root@kirsle.net>
Date: Sat, 6 Apr 2024 16:59:23 -0700
Subject: [PATCH] Theme fix for emoji picker popup

---
 src/App.vue                   |  2 +-
 src/components/MessageBox.vue | 13 +++++++++++--
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index ed7f0cc..b75581e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4371,7 +4371,7 @@ export default {
                                     label on the chat history panel -->
                                 <div class="dropdown-content p-0">
                                     <EmojiPicker :native="true" :display-recent="true" :disable-skin-tones="true"
-                                        theme="auto" @select="onSelectEmoji">
+                                        :theme="prefs.theme !== 'auto' ? prefs.theme : 'auto'" @select="onSelectEmoji">
                                     </EmojiPicker>
                                 </div>
                             </div>
diff --git a/src/components/MessageBox.vue b/src/components/MessageBox.vue
index 8809617..c6c8271 100644
--- a/src/components/MessageBox.vue
+++ b/src/components/MessageBox.vue
@@ -1,5 +1,6 @@
 <script>
 import EmojiPicker from 'vue3-emoji-picker';
+import LocalStorage from '../lib/LocalStorage';
 import 'vue3-emoji-picker/css';
 
 export default {
@@ -81,7 +82,15 @@ export default {
         // Compactify a message (remove paragraph breaks added by Markdown renderer)
         compactMessage() {
             return this.message.message.replace(/<\/p>\s*<p>/g, "<br><br>").replace(/<\/?p>/g, "");
-        }
+        },
+
+        emojiPickerTheme() {
+            let theme = LocalStorage.get('theme');
+            if (theme === 'light' || theme === 'dark') {
+                return theme;
+            }
+            return 'auto';
+        },
     },
     methods: {
         openProfile() {
@@ -332,7 +341,7 @@ export default {
                         <!-- Emoji reactions menu -->
                         <EmojiPicker v-if="showEmojiPicker" :native="true" :display-recent="true" :disable-skin-tones="true"
                             :additional-groups="customEmojiGroups" :group-names="{ frequently_used: 'Frequently Used' }"
-                            theme="auto" @select="onSelectEmoji"></EmojiPicker>
+                            :theme="emojiPickerTheme" @select="onSelectEmoji"></EmojiPicker>
                     </div>
                 </div>
             </div>