demo · v131
chat bubble: force colour-emoji presentation
Some users disable colour emoji rendering at the OS level. In a chat product you usually want the opposite — emoji should always render in colour, regardless of OS or font. Setting font-variant-emoji: emoji on the message bubble guarantees a consistent product look. Toggle the dropdown to flip between values.
why a product-level switch
Without font-variant-emoji, the platform decides per-codepoint whether ☀ renders as a colour sun or a monochrome glyph. On macOS the default is colour. On many Linux installs without an emoji font, it's monochrome. For consistency, set the variant explicitly on UI surfaces.
the api
.chat .msg {
font-variant-emoji: emoji; /* always colour */
}
.icon-font {
font-variant-emoji: text; /* always monochrome */
}
/* respect the user's OS preference */
.body { font-variant-emoji: normal; }