1import { HTML_RENDER_DEFAULT_FONTS, htmlRenderTheme } from "@t3tools/shared/htmlRender";
2
3import {
4 DEFAULT_MOBILE_THEME_ID,
5 getMobileThemeColors,
6 nativeColors,
7 type MobileThemeAppearance,
8 type MobileThemeId,
9 type MobileThemeVariables,
10} from "./mobileTheme";
11
12/**
13 * The theme an HTML render styles against. Its background is the feed's own canvas.
14 * Material You has no shared palette: it starts from the default one and takes the
15 * roles its system colors replace. WebViews cannot load the app's bundled fonts, so
16 * renders use system stacks.
17 */
18export function mobileHtmlRenderTheme(input: {
19 readonly themeId: MobileThemeId;
20 readonly appearance: MobileThemeAppearance;
21 readonly variables: MobileThemeVariables;
22 readonly systemColors: boolean;
23 readonly platform: string;
24}) {
25 const { variables: v } = input;
26 const palette = getMobileThemeColors(
27 input.themeId === "material-you" ? DEFAULT_MOBILE_THEME_ID : input.themeId,
28 input.appearance,
29 );
30 const colors = nativeColors(
31 input.systemColors
32 ? {
33 ...palette,
34 text: v["--color-foreground"],
35 textMuted: v["--color-foreground-secondary"],
36 muted: v["--color-subtle"],
37 mutedForeground: v["--color-foreground-muted"],
38 surface: v["--color-card"],
39 surfaceRaised: v["--color-card-alt"],
40 surfaceOverlay: v["--color-card-alt"],
41 border: v["--color-border"],
42 input: v["--color-input-border"],
43 focus: v["--color-focus"],
44 accent: v["--color-primary"],
45 accentForeground: v["--color-primary-foreground"],
46 accentSurface: v["--color-inline-skill-background"],
47 accentSurfaceForeground: v["--color-inline-skill-foreground"],
48 messageAction: v["--color-primary"],
49 messageActionForeground: v["--color-primary-foreground"],
50 secondary: v["--color-secondary"],
51 secondaryForeground: v["--color-secondary-foreground"],
52 errorSurface: v["--color-danger"],
53 errorForeground: v["--color-danger-foreground"],
54 codeBackground: v["--color-md-code-bg"],
55 codeForeground: v["--color-md-code-text"],
56 }
57 : palette,
58 );
59 // Android paints the thread on its own canvas role; iOS uses the screen.
60 const canvas = v[input.platform === "android" ? "--color-thread-canvas" : "--color-screen"];
61 return htmlRenderTheme({ ...colors, canvas }, input.appearance, HTML_RENDER_DEFAULT_FONTS);
62}