feat: allow toggle bg

app/javascript/dashboard/components-next/message/Message.vue

@@ -318,6 +318,7 @@ const contextMenuEnabledOptions = computed(() => {
     delete: hasText || hasAttachments,
     cannedResponse: isOutgoing && hasText,
     replyTo: !props.private && props.inboxSupportsReplyTo.outgoing,
+    toggleBg: variant.value === MESSAGE_VARIANTS.EMAIL,
   };
 });
 
@@ -353,6 +354,20 @@ function handleReplyTo() {
   emitter.emit(BUS_EVENTS.TOGGLE_REPLY_TO_MESSAGE, props);
 }
 
+function toggleBg() {
+  const key = `bg-light-toggle::${props.id}`;
+  const isToggled = LocalStorage.get(key);
+
+  if (isToggled) {
+    LocalStorage.remove(key);
+  } else {
+    LocalStorage.set(`bg-light-toggle::${props.id}`, true);
+  }
+
+  emitter.emit(BUS_EVENTS.TOGGLE_MESSAGE_BG, props.id);
+  closeContextMenu();
+}
+
 provideMessageContext({
   ...toRefs(props),
   isPrivate: computed(() => props.private),
@@ -425,6 +440,7 @@ provideMessageContext({
         @open="openContextMenu"
         @close="closeContextMenu"
         @reply-to="handleReplyTo"
+        @toggle-bg="toggleBg"
       />
     </div>
   </div>