akadmin/chatwoot
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: try runtime themeing

Browse Source
This commit is contained in:
Shivam Mishra
2025-12-01 15:24:54 +05:30
parent 59e5a5feea
commit 567092b9a8
3 changed files with 71 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/dashboard/assets/scss/_next-colors.scss
+20
View File
@@ -109,6 +109,16 @@
--solid-blue: 218 236 255;
--solid-iris: 230 231 255;
// Bubble-specific colors (override these for custom theming)
--bubble-agent-bg: var(--solid-blue);
--bubble-agent-text: var(--slate-12);
--bubble-user-bg: var(--slate-4);
--bubble-user-text: var(--slate-12);
--bubble-private-bg: var(--solid-amber);
--bubble-private-text: var(--amber-12);
--bubble-bot-bg: var(--solid-iris);
--bubble-bot-text: var(--slate-12);
--alpha-1: 67, 67, 67, 0.06;
--alpha-2: 201, 202, 207, 0.15;
--alpha-3: 255, 255, 255, 0.96;
@@ -224,6 +234,16 @@
--solid-iris: 38 42 101;
--text-blue: 126 182 255;
// Bubble-specific colors (override these for custom theming)
--bubble-agent-bg: var(--solid-blue);
--bubble-agent-text: var(--slate-12);
--bubble-user-bg: var(--slate-4);
--bubble-user-text: var(--slate-12);
--bubble-private-bg: var(--solid-amber);
--bubble-private-text: var(--amber-12);
--bubble-bot-bg: var(--solid-iris);
--bubble-bot-text: var(--slate-12);
--alpha-1: 36, 36, 36, 0.8;
--alpha-2: 139, 147, 182, 0.15;
--alpha-3: 36, 38, 45, 0.9;
app/javascript/dashboard/components-next/message/bubbles/Base.vue
+9 -5
View File
@@ -19,13 +19,17 @@ const { variant, orientation, inReplyTo, shouldGroupWithNext } =
const { t } = useI18n();
const varaintBaseMap = {
[MESSAGE_VARIANTS.AGENT]: 'bg-n-solid-blue text-n-slate-12',
[MESSAGE_VARIANTS.AGENT]:
'bg-[rgb(var(--bubble-agent-bg))] text-[rgb(var(--bubble-agent-text))]',
[MESSAGE_VARIANTS.PRIVATE]:
'bg-n-solid-amber text-n-amber-12 [&_.prosemirror-mention-node]:font-semibold',
[MESSAGE_VARIANTS.USER]: 'bg-n-slate-4 text-n-slate-12',
'bg-[rgb(var(--bubble-private-bg))] text-[rgb(var(--bubble-private-text))] [&_.prosemirror-mention-node]:font-semibold',
[MESSAGE_VARIANTS.USER]:
'bg-[rgb(var(--bubble-user-bg))] text-[rgb(var(--bubble-user-text))]',
[MESSAGE_VARIANTS.ACTIVITY]: 'bg-n-alpha-1 text-n-slate-11 text-sm',
[MESSAGE_VARIANTS.BOT]: 'bg-n-solid-iris text-n-slate-12',
[MESSAGE_VARIANTS.TEMPLATE]: 'bg-n-solid-iris text-n-slate-12',
[MESSAGE_VARIANTS.BOT]:
'bg-[rgb(var(--bubble-bot-bg))] text-[rgb(var(--bubble-bot-text))]',
[MESSAGE_VARIANTS.TEMPLATE]:
'bg-[rgb(var(--bubble-bot-bg))] text-[rgb(var(--bubble-bot-text))]',
[MESSAGE_VARIANTS.ERROR]: 'bg-n-ruby-4 text-n-ruby-12',
[MESSAGE_VARIANTS.EMAIL]: 'w-full',
[MESSAGE_VARIANTS.UNSUPPORTED]:
app/javascript/react-components/src/vue-components/ChatwootMessageListWebComponent.vue
+42
View File
@@ -7,6 +7,48 @@ import MessageList from '../../../ui/MessageList.vue';
</template>
<style>
/*
* Runtime Theme Customization
*
* Consumers can override bubble colors from outside the Shadow DOM.
* Set these CSS variables on :root or any ancestor element:
*
* --chatwoot-bubble-agent-bg: RGB values for agent message background
* --chatwoot-bubble-agent-text: RGB values for agent message text
* --chatwoot-bubble-user-bg: RGB values for user message background
* --chatwoot-bubble-user-text: RGB values for user message text
* --chatwoot-bubble-private-bg: RGB values for private note background
* --chatwoot-bubble-private-text: RGB values for private note text
* --chatwoot-bubble-bot-bg: RGB values for bot message background
* --chatwoot-bubble-bot-text: RGB values for bot message text
*
* Example usage in consumer's CSS:
* :root {
* --chatwoot-bubble-agent-bg: 59 130 246;
* --chatwoot-bubble-user-bg: 243 244 246;
* }
*/
:host {
/* FUNKY TEST COLORS - remove these overrides for production */
--bubble-agent-bg: var(
--chatwoot-bubble-agent-bg,
255 105 180
); /* Hot Pink */
--bubble-agent-text: var(--chatwoot-bubble-agent-text, 255 255 255);
--bubble-user-bg: var(
--chatwoot-bubble-user-bg,
144 238 144
); /* Lime Green */
--bubble-user-text: var(--chatwoot-bubble-user-text, 28 32 36);
--bubble-private-bg: var(
--chatwoot-bubble-private-bg,
255 165 0
); /* Orange */
--bubble-private-text: var(--chatwoot-bubble-private-text, 79 52 34);
--bubble-bot-bg: var(--chatwoot-bubble-bot-bg, 0 255 255); /* Cyan */
--bubble-bot-text: var(--chatwoot-bubble-bot-text, 28 32 36);
}
.file-uploads {
overflow: hidden;
position: relative;