feat: try runtime themeing

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
@@ -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;
@@ -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]: