# 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:** 1
**Showing post:** 1

<div class="post-metadata">

### Author: ![chapoi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chapoi/32/537252_2.png) [@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")

</div>

⚠ 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.

 ![image](https://global.discourse-cdn.com/meta/original/4X/e/b/9/eb9ca30d69959b16a6fe5feecf8e043712c8aea1.jpeg)

### 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`.

 ![image](https://global.discourse-cdn.com/meta/original/4X/d/7/2/d72ffd5248d0648ebde991e701dd0db113c7d65b.png)

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

 ![image](https://global.discourse-cdn.com/meta/original/4X/8/8/0/8804998eba070a627f7646c9a35bafa6af7492f5.jpeg)

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

---

_[View the full topic](https://meta.discourse.org/t/chat-whatsapp-bubbles/286735)._