# Chat – whatsapp bubbles
**URL:** https://meta.discourse.org/t/chat-whatsapp-bubbles/286735
**Category:** Theme component
**Tags:** chat, chat-bubbles
**Created:** [November 27, 2023, 3:03pm UTC](https://meta.discourse.org/t/chat-whatsapp-bubbles/286735 "2023-11-27T15:03:44Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [November 27, 2023, 3:03pm UTC](https://meta.discourse.org/t/chat-whatsapp-bubbles/286735/1 "2023-11-27T15:03:44Z")
⚠ Chat is still in active development so this component is likely unstable and in beta for now. Feedback and bug reports welcome.
| | | |
| --- | --- | --- |
| ℹ | **Summary** | A whatsapp-inspired skin for chat (mobile) |
| 👓 | **Preview** | [Theme Creator](https://discourse.theme-creator.io/?preview_theme_id=9999) (mobile view only) |
| 🛠 | **Repository** | [GitHub - chapoi/discourse-chat-bubbles: A whatsapp-inspired skin for Discourse chat (mobile) · GitHub](https://github.com/chapoi/discourse-chat-bubbles) |
| ❓ | **Install Guide** | [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) |
| 📖 | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |
Install this theme component
## Instructions for preview
1. Make sure you view this on a small screen.
2. Don’t forget to append `?mobile_view=1` to the url to get the correct view.
3. Login to get access to chat.
## Description
A bubble message-style, applied to mobile only.
### Settings
The component comes with an embedded background shown above. This can be changed in the settings. It’s recommend to use an svg pattern. [This website](https://heropatterns.com/) has some for free.
You can also choose the bubble colours and the background behind the pattern, or disable the pattern altogether.
If you leave either light or dark setting empty, the bubbles will default to `secondary` and `tertiary-low`. If you leave the background colour empty, it will default to `primary-high`.
Using a full image as background can also work, but you’ll need to make sure it’s an optimised size for the mobile viewport.
### Dark Mode
You can choose different background and bubble colours for dark mode.
To avoid having to change the background-pattern it’s using a background-blend in dark mode.
For best results, choose a light-coloured pattern which works nicely in light mode, and it should be automatically muted in dark mode (unfortunately not on all devices – [see below](https://meta.discourse.org/t/chat-whatsapp-bubbles/286735/8)).
### Known issues
- The timestamps for your own messages are differently placed than for other peoples messages
- ~~Doesn’t have a dark mode (yet)~~
- dark mode acts weird on some devices
- doesn’t work well with threading enabled
---
### Author:  [@fbpbdmin](https://meta.discourse.org/u/fbpbdmin)
#### Post date: [November 29, 2023, 5:17am UTC](https://meta.discourse.org/t/chat-whatsapp-bubbles/286735/3 "2023-11-29T05:17:13Z")
this is very nice !
one suggestion,
possible to let everyone to change their own background image ?
and the default circuit SVG is rendered differently on iphone and android dark theme
on iphone, the lines looks more bright, not as the example in the doc post… not sure why…
---
### Author:  [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [November 29, 2023, 9:03am UTC](https://meta.discourse.org/t/chat-whatsapp-bubbles/286735/4 "2023-11-29T09:03:15Z")
Can I disable background pattern totally?
> [@fbpbdmin](#):
>
> possible to let everyone to change their own background image
I would guess that is really difficult and if it can be done it needs a plugin. But I don’t remember any plugin that gives an option to users adjust such things. It would be nice, though. But it could lead to UX nightmare too when preferences are here, there and everywhere.
An user can’t even tune toolbox of composer and that would be an important feature.
---
### Author:  [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [November 29, 2023, 9:47am UTC](https://meta.discourse.org/t/chat-whatsapp-bubbles/286735/5 "2023-11-29T09:47:53Z")
> [@fbpbdmin](#):
>
> possible to let everyone to change their own background image ?
> [@Jagster](#):
>
> I would guess that is really difficult and if it can be done it needs a plugin.
Yes unfortunately that’s a whole other league. If the interest is ever big enough for this skin in general, I’d love to expand on this but for now that’s not happening.
> [@Jagster](#):
>
> Can I disable background pattern totally?
Oh yeah, that’s easy enough. Can make an update for that. 👍
---
### Author:  [@fbpbdmin](https://meta.discourse.org/u/fbpbdmin)
#### Post date: [November 30, 2023, 4:43am UTC](https://meta.discourse.org/t/chat-whatsapp-bubbles/286735/6 "2023-11-30T04:43:47Z")
@chapoi could you try dark theme on iphone, most patterns are rendered weird there.
say, the default one, on iphone dark, the links are white, looks too busy
it looks ok on android dark theme tho…
thanks
---
### Author:  [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [November 30, 2023, 6:11am UTC](https://meta.discourse.org/t/chat-whatsapp-bubbles/286735/7 "2023-11-30T06:11:16Z")
Oh wow! Thanks for that, Ill try to take a look at the dark mode over the weekend
---
### Author:  [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [December 1, 2023, 12:15pm UTC](https://meta.discourse.org/t/chat-whatsapp-bubbles/286735/8 "2023-12-01T12:15:22Z")
I’ve added a setting to disable the pattern completely.
The dark-mode issues on Iphone are due to a bug in safari, which prevents the `background-mode-blend` property from working when the `background-repeat` is used… Quite annoying and I don’t have a workaround yet.
It might come down to two separate uploads for dark/light mode, which isn’t elegant at all.
Either way, I’d recommend for now to use it without the pattern, if you’re on Iphone and use your device in dark mode.
---
### Author:  [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [December 1, 2023, 1:04pm UTC](https://meta.discourse.org/t/chat-whatsapp-bubbles/286735/9 "2023-12-01T13:04:00Z")
> [@chapoi](#):
>
> > [@fbpbdmin](#):
> >
> > possible to let everyone to change their own background image ?
>
> > [@Jagster](#):
> >
> > I would guess that is really difficult and if it can be done it needs a plugin.
>
> Yes unfortunately that’s a whole other league. If the interest is ever big enough for this skin in general, I’d love to expand on this but for now that’s not happening.
Maybe an user option to use their existing “User Card Background” image as the chat background?
---
### Author:  [@Roi](https://meta.discourse.org/u/Roi)
#### Post date: [December 18, 2023, 11:17pm UTC](https://meta.discourse.org/t/chat-whatsapp-bubbles/286735/10 "2023-12-18T23:17:56Z")
> [@chapoi](#):
>
> Quite annoying and I don’t have a workaround yet.
Yeah same here:
But looks great on Android:
Without a pattern it looks boring. I left it enabled for now, but Apple users started complaining. 😜
---
### Author:  [@digitaldominica](https://meta.discourse.org/u/digitaldominica)
#### Post date: [December 19, 2023, 2:50pm UTC](https://meta.discourse.org/t/chat-whatsapp-bubbles/286735/11 "2023-12-19T14:50:26Z")
Hi @chapoi is there a way to change the chat reply icon to an actual left arrow instead of the shareicon that shows up of d-icon-share?
---
### Author:  [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [December 19, 2023, 3:01pm UTC](https://meta.discourse.org/t/chat-whatsapp-bubbles/286735/12 "2023-12-19T15:01:54Z")
Not specifically with this theme component, no.
You could follow something like this
> [@Help replacing an icon](https://meta.discourse.org/t/help-replacing-an-icon/273277):
>
> I am trying to replace the bars icon for opening/closing the sidebar following these instructions [Replace Discourse's default SVG icons with custom icons in a theme](https://meta.discourse.org/t/replace-discourses-default-svg-icons-with-custom-icons-in-a-theme/115736) but I’m not having much luck. I’ve created a spritesheet with the sidebar icon I want to use (blurred out since it’s a pro fontawesome icon) Created a component and uploaded the spritesheet: And used this code (I only want the change on desktop) But I just get no icon: Any ideas? I’m sure …
to replace all instances of the icon. (I don’t think we use the share-icon in any other place, so this could maybe work out).
To replace it only there would involve some more complexity, I’m just not sure what.
---
### Author:  [@digitaldominica](https://meta.discourse.org/u/digitaldominica)
#### Post date: [December 19, 2023, 3:05pm UTC](https://meta.discourse.org/t/chat-whatsapp-bubbles/286735/13 "2023-12-19T15:05:04Z")
Okay thanks I will attempt it, I use the [Kodular Community Theme](https://meta.discourse.org/t/kodular-community-theme/162724) and it same icon show in topics I reply to, I wonder if this is part of the theme specifically. I’ll go ask the dev now.
---
### Author:  [@digitaldominica](https://meta.discourse.org/u/digitaldominica)
#### Post date: [January 2, 2024, 1:53pm UTC](https://meta.discourse.org/t/chat-whatsapp-bubbles/286735/14 "2024-01-02T13:53:37Z")
Thanks for this component.
I’ve made a minor adjustment to the mobile.scss on line 55 - 62
```plaintext
.chat-messages-scroll {
background-color: var(--bubble-bg);
background-image: url(check-empty($background-pattern, $enable_pattern));
background-blend-mode: var(--bubble-bg-mode);
}
.chat-messages-container {
padding: 0;
```
The previous the background was applied to the .chat-messages-container and on scroll my background would move with the messages this way it stays in the back.
I notice there was two instances of .chat-messages-container in the mobile chat which caused this replication on the background.
---
### Author:  [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [January 9, 2024, 11:23am UTC](https://meta.discourse.org/t/chat-whatsapp-bubbles/286735/15 "2024-01-09T11:23:49Z")
Thank you, excellent catch of a silly oversight. Fixed.
---
### Author:  [@digitaldominica](https://meta.discourse.org/u/digitaldominica)
#### Post date: [May 16, 2024, 8:35am UTC](https://meta.discourse.org/t/chat-whatsapp-bubbles/286735/16 "2024-05-16T08:35:37Z")
Hi, it appears that the chat background is no longer visible in the chat, i’m not seeing the css being added to the chat container anymore. I’m currently using version 3.3.0.beta2
---
### Author:  [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [May 16, 2024, 7:32pm UTC](https://meta.discourse.org/t/chat-whatsapp-bubbles/286735/17 "2024-05-16T19:32:02Z")
Hi! Thanks for the report; there’s been a lot of chat changes and probably I need to update this component.
Will try to do soon!
---
### Author:  [@eisammy](https://meta.discourse.org/u/eisammy)
#### Post date: [June 2, 2024, 5:25pm UTC](https://meta.discourse.org/t/chat-whatsapp-bubbles/286735/18 "2024-06-02T17:25:27Z")
I tried taste this theme component a couple days ago if want can i post here the errors screenshots cause I wish to enable again.
---
### Author:  [@eisammy](https://meta.discourse.org/u/eisammy)
#### Post date: [June 5, 2024, 4:17pm UTC](https://meta.discourse.org/t/chat-whatsapp-bubbles/286735/19 "2024-06-05T16:17:51Z")
@chapoi Simply wonderful… errors is gone apparently. plans to implement this to desktop version?
---
### Author:  [@Earnie\_Baird](https://meta.discourse.org/u/Earnie_Baird)
#### Post date: [June 6, 2024, 5:52pm UTC](https://meta.discourse.org/t/chat-whatsapp-bubbles/286735/20 "2024-06-06T17:52:28Z")
Just tested this out. It’s awesome but as others have reported it doesn’t look like it allows you to change the background color or pattern.
With the default light background the white bubbles really blend into the background.
---
### Author:  [@eisammy](https://meta.discourse.org/u/eisammy)
#### Post date: [June 7, 2024, 5:25pm UTC](https://meta.discourse.org/t/chat-whatsapp-bubbles/286735/21 "2024-06-07T17:25:36Z")
A new bug Instagram link
[Next page](https://meta.discourse.org/t/chat-whatsapp-bubbles/286735.md?page=2)