arthur/xtablo-source
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions 5

Update Stream Chat theme to match purple #804EEC design system

Browse source 
- Primary color: #804EEC (was #8b7396)
- Own message bubbles: solid #804EEC with white text in both light and dark modes
- Surface colors updated to use purple-tinted variants
- Dark mode uses consistent purple-based alpha colors

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Arthur Belleville 2026-02-21 21:17:33 +01:00
parent bae9e696f2
commit 32f22b021f
No known key found for this signature in database
1 changed files with 15 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
apps/main/src/main.css
View file

@ -125,28 +125,32 @@
}
.str-chat {
--str-chat__primary-color: #8b7396;
--str-chat__active-primary-color: #6e5c7d;
--str-chat__primary-color: #804EEC;
--str-chat__active-primary-color: #6f3fd4;
--str-chat__surface-color: #f5f3f7;
--str-chat__secondary-surface-color: #e8e4ec;
--str-chat__primary-surface-color: #ebe7f0;
--str-chat__primary-surface-color-low-emphasis: #f2f0f5;
--str-chat__primary-surface-color: #F4F3FF;
--str-chat__primary-surface-color-low-emphasis: #f8f7ff;
--str-chat__border-radius-circle: 6px;
--str-chat__own-message-bubble-color: #804EEC;
--str-chat__own-message-text-color: #ffffff;
}
.dark .str-chat {
--str-chat__primary-color: #a68bb5;
--str-chat__active-primary-color: #8b7396;
--str-chat__surface-color: rgba(120, 107, 130, 0.25);
--str-chat__secondary-surface-color: rgba(140, 130, 150, 0.18);
--str-chat__primary-surface-color: rgba(166, 139, 181, 0.12);
--str-chat__primary-surface-color-low-emphasis: rgba(166, 139, 181, 0.06);
--str-chat__primary-color: #9b6ff0;
--str-chat__active-primary-color: #804EEC;
--str-chat__surface-color: rgba(128, 78, 236, 0.15);
--str-chat__secondary-surface-color: rgba(128, 78, 236, 0.1);
--str-chat__primary-surface-color: rgba(128, 78, 236, 0.12);
--str-chat__primary-surface-color-low-emphasis: rgba(128, 78, 236, 0.06);
--str-chat__background-color: rgba(110, 100, 120, 0.2);
--str-chat__secondary-background-color: rgba(80, 72, 88, 0.35);
--str-chat__border-color: rgba(120, 107, 130, 0.28);
--str-chat__border-color: rgba(128, 78, 236, 0.2);
--str-chat__text-color: #f5f3f7;
--str-chat__text-low-emphasis-color: #b8b0c0;
--str-chat__disabled-color: rgba(155, 143, 165, 0.35);
--str-chat__own-message-bubble-color: #804EEC;
--str-chat__own-message-text-color: #ffffff;
}
@keyframes gradient-x {