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/** WebViews cannot load bundled app fonts; use system stacks. */
13export function mobileHtmlRenderTheme(input: {
14 readonly themeId: MobileThemeId;
15 readonly appearance: MobileThemeAppearance;
16 readonly variables: MobileThemeVariables;
17 readonly systemColors: boolean;
18 readonly platform: string;
19}) {
20 const { variables: v } = input;
21 const palette = getMobileThemeColors(
22 input.themeId === "material-you" ? DEFAULT_MOBILE_THEME_ID : input.themeId,
23 input.appearance,
24 );
25 const colors = nativeColors(
26 input.systemColors
27 ? {
28 ...palette,
29 text: v["--color-foreground"],
30 textMuted: v["--color-foreground-secondary"],
31 muted: v["--color-subtle"],
32 mutedForeground: v["--color-foreground-muted"],
33 surface: v["--color-card"],
34 surfaceRaised: v["--color-card-alt"],
35 surfaceOverlay: v["--color-card-alt"],
36 border: v["--color-border"],
37 input: v["--color-input-border"],
38 focus: v["--color-focus"],
39 accent: v["--color-primary"],
40 accentForeground: v["--color-primary-foreground"],
41 accentSurface: v["--color-inline-skill-background"],
42 accentSurfaceForeground: v["--color-inline-skill-foreground"],
43 messageAction: v["--color-primary"],
44 messageActionForeground: v["--color-primary-foreground"],
45 secondary: v["--color-secondary"],
46 secondaryForeground: v["--color-secondary-foreground"],
47 errorSurface: v["--color-danger"],
48 errorForeground: v["--color-danger-foreground"],
49 codeBackground: v["--color-md-code-bg"],
50 codeForeground: v["--color-md-code-text"],
51 }
52 : palette,
53 );
54 const canvas = v[input.platform === "android" ? "--color-thread-canvas" : "--color-screen"];
55 return htmlRenderTheme({ ...colors, canvas }, input.appearance, HTML_RENDER_DEFAULT_FONTS);
56}