About this set
Speech bubbles for dark interfaces, where a white or pale grey bubble turns into a glaring block. Neon outline bubbles gives two players in a game chat cyan and pink outlined bubbles with rotated-square tails that share the outline, and a drop-shadow glow mixed from the outline colour with color-mix(), which follows the bubble and its tail together. Each bubble starts with the player’s name in the outline colour. Gradient chat bubbles with matching tails sets sent messages on a violet-to-indigo gradient and received ones on slate. The tail is a radial-gradient cut-out in the gradient’s last colour, so the join is invisible. Annotation bubble on a code block pins an amber note to line five of a TypeScript retry function, with line numbers from a CSS counter and the line itself highlighted, the tail pointing back at the code. Below 720px the note moves under the code and its tail turns upward. The code block is a focusable, labelled region so keyboard users can scroll its long lines. The Bootstrap version runs in data-bs-theme=”dark”.
What’s included
- Neon outline bubbles whose glow follows the tail
- Gradient sent bubbles with a matching curved tail
- Amber note pinned to a line of code with CSS line numbers
- Keyboard-scrollable code region with a focus outline
- Bootstrap version in data-bs-theme="dark"
Accessibility
Every text colour was checked against its own bubble at 4.5:1 or more, including the time stamps. Sender names are visible or visually hidden at the start of each message, the code note starts with hidden text Note on line 5, and the scrollable code block is a focusable region with a name and an amber focus outline. Line numbers are generated content and are not read as part of the code.
Customise it
Change --dk-cyan, --dk-pink and --dk-amber on .dk for the accents, the linear-gradient on .dk-msg.me for sent bubbles, and --ln on .dk-body to pin the note to another line. In Tailwind edit the --color-dk-* theme colours and [--ln:5]; Bootstrap uses the same variables on .card.
