Any idea how we can change new message color. It show as bold and i need change also color for clarify.

[ataryandev]

Is your feature request related to a problem? Please describe

A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like

A clear and concise description of what you want to happen.

Describe alternatives you've considered

A clear and concise description of any alternative solutions or features you've considered.

Additional context

Add any other context or screenshots about the feature request here.

[antoine92190]

You can override css using shadow DOM:

Shadow DOM
CSS classes cannot be simply overridden anymore. You can still use CSS variables, and if needed you can override CSS classes like this:

const style = document.createElement('style')
const styles = await import('./src/styles/theme.scss')
style.innerHTML = styles
this.$refs.chatWindow.shadowRoot.appendChild(style)

[antoine92190]

Closing this, please reopen if you still have an issue

[khanhzizu]

Closing this, please reopen if you still have an issue

Hi Antoine, can you show me where to write the code to edit the css? I write it in Created(), then console log "can not read properties of undefined (reading 'shadowRoot')"

[antoine92190]

Have you added chatWindow ref to the chat window component?
Please refer to the demo code, everything is there: https://github.com/antoine92190/vue-advanced-chat/blob/master/demo/src/ChatContainer.vue#L33

[khanhzizu]

Have you added chatWindow ref to the chat window component? Please refer to the demo code, everything is there: https://github.com/antoine92190/vue-advanced-chat/blob/master/demo/src/ChatContainer.vue#L33

It worked. Thank you very much

[ataryandev]

Here is my solution

Added into Component

class="chat-container__chat-window"

And Styles

------------------------------------
&__chat-window {
  :deep(.vac-message-new) {
        animation: new-message 1s infinite;
        font-size: 14px;
        font-weight: 700;
  
        @keyframes new-message {
          50% {
            color: #f00;
          }
        }
      }
}
-------------------------------------

[seyfer]

It worked for me as well, but since I use webpack and typescript, I was getting Module object on scss import instead of CSS text.

Solved by altering webpack import behavior.

// eslint-disable-next-line import/no-webpack-loader-syntax,import/no-named-default
import { default as ChatCss } from '!css-loader!sass-loader!./chat-shadow-dom.scss';

// have to alter webpack behavior to make it load text, not Module object
// @see https://stackoverflow.com/a/66539355/1074834

const ChatCssString = ChatCss.toString();

export default ChatCssString;

then use ChatCssString to add

 const addChatShadowDomCss = async () => {
    const style = document.createElement('style');
    style.innerHTML = ChatCssString;
    chatWindow.value.shadowRoot.appendChild(style);
  };

[reslear]

better solution #453 (comment)

[seyfer]

@reslear as to me it is not better, as I want my styles to be SCSS and loaded from a file

[elfaz2]

<script setup type="module">
const vacRef = ref(null)
const addCustomStyle = () => {
    if (!vacRef.value) return
    const style = document.createElement('style')
    style.textContent = '.vac-message-wrapper .vac-message-current{background: linear-gradient(90deg, #BD42BB 0%, #663E97 100%) !important; color: white} .vac-message-actions-wrapper .vac-options-me {background: transparent;}'
    vacRef.value.shadowRoot.appendChild(style)
}
onMounted(() => { addCustomStyle() });
</script>
<template>
<vue-advanced-chat
            ref="vacRef"/>
</template>