@bcc-code/vue-bcc-chat-ui 1.5.0 → 1.6.1

package/package.json

@@ -2,7 +2,7 @@
   "name": "@bcc-code/vue-bcc-chat-ui",
   "author": "bcc-code",
   "license": "Apache-2.0",
-  "version": "1.5.0",
+  "version": "1.6.1",
   "type": "module",
   "private": false,
   "files": [

package/src/components/BccChatMessageList.vue

@@ -34,9 +34,19 @@ watch(chatGroup, (exists: null) => {
   nextTick(() => {
     watchAndApplyStyle(
       ".bcc-chat-message-list",
-      ".cc__imageviewer__close-button",
-      { "padding-top": "env(safe-area-inset-top)" },
-      'cometchat-full-screen-viewer'
+      [{
+        selector: '.cc__imageviewer__close-button',
+        style: { "padding-top": "env(safe-area-inset-top)" },
+        shadowDomSelector: 'cometchat-full-screen-viewer'
+      }, {
+        selector: '.cc__text',
+        style: { color: 'var(--cc__text-color)' },
+        shadowDomSelector: 'cometchat-text-bubble'
+      }, {
+        selector: '.cc__linkpreview-title',
+        style: { color: 'var(--cc__text-color)' },
+        shadowDomSelector: 'link-preview'
+      }]
     );
   });
 })
@@ -186,8 +196,66 @@ function getMessageListConfiguration(): MessageListConfiguration {
 </template>
 
 <style lang="scss">
+body {
+  background: #fff;
+  color: #000;
+
+  @media (prefers-color-scheme: dark) {
+    background: #000;
+    color: #fff;  
+  }
+}
+
+/*
+primary: my bubble
+accent: message bar text
+accent100: message bar and widget buttons bg, others bubble
+accent200: horizontal line on message bar
+accent500: icons on message bar
+accent600: dates and date separator and popup icons
+accent700: avatar background, widget buttons text
+accent900: text in avatar
+*/
+
 .bcc-chat-message-list {
   height: 100%;
+  --cc__primary: linear-gradient(45deg, #CFEAC8 0%, #E7F5E3 100%);
+  --cc__background: #F3FAF7;
+  --cc__secondary: white;
+  --cc__accent: #004e48;
+  --cc__accent50: rgba(62, 142, 117, 0.04);
+  --cc__accent100: #FFFFFF;
+  --cc__accent200: rgba(62, 142, 117, 0.15);
+  --cc__accent300: rgba(62, 142, 117, 0.24);
+  --cc__accent400: rgba(62, 142, 117, 0.33);
+  --cc__accent500: rgba(62, 142, 117, 0.46);
+  --cc__accent600: #004E48;
+  --cc__accent700: #254A40;
+  --cc__accent800: rgba(62, 142, 117, 0.82);
+  --cc__accent900: #F3FAF7;
+  --cc__text-color: #000;
+
+  @media (prefers-color-scheme: dark) {
+    --cc__primary: linear-gradient(45deg, #3F4669 0%, #57639E 100%);
+    --cc__background: linear-gradient(45deg, transparent 0%, rgba(63,70,105,0.8) 100%),
+            linear-gradient(315deg, transparent 0%, #020A0B 100%),
+            linear-gradient(135deg, transparent 0%, #020A0B 100%),
+            #020A0B;
+    --cc__secondary: #111827;
+    --cc__accent: #6274AE;
+    --cc__accent50: rgba(98, 116, 174, 0.24);
+    --cc__accent100: linear-gradient(45deg, hsl(221, 39%, 6%) 0%, #111827 100%);
+    --cc__accent200: rgba(98, 116, 174, 0.35);
+    --cc__accent300: rgba(98, 116, 174, 0.44);
+    --cc__accent400: rgba(98, 116, 174, 0.53);
+    --cc__accent500: rgba(98, 116, 174, 0.66);
+    --cc__accent600: #758ABC;
+    --cc__accent700: #6274AE;
+    --cc__accent800: rgba(98, 116, 174, 0.92);
+    --cc__accent900: #F3FAF7;
+    --cc__text-color: #fff;
+  }
+
   /* 1. Wrapper for Messages component */
   .cc-messages-wrapper {
     /* 1.1 Messages component */
@@ -198,6 +266,13 @@ function getMessageListConfiguration(): MessageListConfiguration {
       }
     }
   }
+
+  .cc-messagebubble-wrapper__messageoptions {
+    border-radius: 8px;
+    .cc-context-menu__top-menu {
+      border: 1px var(--cc__secondary) solid !important;
+    }
+  }
 }
 
 .cc-messagecomposer__emojikeyboard {