From bec07964beb8476488dc39f032478c0c0fa3d47a Mon Sep 17 00:00:00 2001 From: xxxigm Date: Sat, 6 Jun 2026 15:33:13 +0700 Subject: [PATCH] fix(desktop): add color-emoji font fallback so emoji render (#40364) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit None of the UI sans/mono font stacks (themes/presets.ts, styles.css) carry emoji glyphs, so on platforms whose default text font lacks them (e.g. Linux) emoji rendered as tofu boxes in the composer and chat. Append a color-emoji fallback — Apple Color Emoji / Segoe UI Emoji / Segoe UI Symbol / Noto Color Emoji / the `emoji` generic — to every font stack (SYSTEM_SANS, SYSTEM_MONO, the Courier theme, and the CSS --dt-font-* defaults). Text still uses the primary fonts; the browser only falls back for emoji codepoints. Custom themes build on SYSTEM_* so they inherit it automatically. --- apps/desktop/src/styles.css | 6 ++++-- apps/desktop/src/themes/presets.ts | 19 ++++++++++++++----- 2 files changed, 18 insertions(+), 7 deletions(-) diff --git a/apps/desktop/src/styles.css b/apps/desktop/src/styles.css index be5e8ab10d7..fc7d3a03bf9 100644 --- a/apps/desktop/src/styles.css +++ b/apps/desktop/src/styles.css @@ -266,8 +266,10 @@ --dt-user-bubble: var(--ui-chat-bubble-background); --dt-user-bubble-border: var(--ui-stroke-tertiary); - --dt-font-sans: 'Segoe WPC', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif; - --dt-font-mono: 'Cascadia Code', 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, Consolas, monospace; + --dt-font-sans: 'Segoe WPC', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif, + 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', emoji; + --dt-font-mono: 'Cascadia Code', 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, Consolas, monospace, + 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', emoji; --dt-base-size: 1rem; --dt-line-height: 1.5; --dt-letter-spacing: 0; diff --git a/apps/desktop/src/themes/presets.ts b/apps/desktop/src/themes/presets.ts index 170b5456e57..b1f85a9a7f3 100644 --- a/apps/desktop/src/themes/presets.ts +++ b/apps/desktop/src/themes/presets.ts @@ -5,10 +5,19 @@ import type { DesktopTheme, DesktopThemeTypography } from './types' -const SYSTEM_SANS = - '"Segoe WPC", "Segoe UI", -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif' +// Color-emoji fonts to append to every stack as a last resort. None of the UI +// text/mono fonts carry emoji glyphs, so without this emoji render as tofu +// boxes on platforms whose default text font lacks them (e.g. Linux/#40364). +// Covers macOS, Windows, Linux, plus the `emoji` generic for anything else. +export const EMOJI_FALLBACK = + '"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", emoji' -const SYSTEM_MONO = '"Cascadia Code", "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Monaco, Consolas, monospace' +const SYSTEM_SANS = + '"Segoe WPC", "Segoe UI", -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif, ' + + EMOJI_FALLBACK + +const SYSTEM_MONO = + '"Cascadia Code", "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Monaco, Consolas, monospace, ' + EMOJI_FALLBACK export const DEFAULT_TYPOGRAPHY: DesktopThemeTypography = { fontSans: SYSTEM_SANS, fontMono: SYSTEM_MONO } @@ -228,8 +237,8 @@ export const cyberpunkTheme: DesktopTheme = { userBubbleBorder: '#004800' }, typography: { - fontMono: `"Courier New", Courier, monospace`, - fontSans: `"Courier New", Courier, monospace` + fontMono: `"Courier New", Courier, monospace, ${EMOJI_FALLBACK}`, + fontSans: `"Courier New", Courier, monospace, ${EMOJI_FALLBACK}` } }