fix(reader): make annotation tooltips theme-aware

packages/app-expo/src/screens/ReaderScreen.tsx

@@ -155,7 +155,8 @@ import {
   SCREEN_WIDTH,
 } from "./reader/reader-constants";
 import { BatteryIcon, ListIcon, SettingsIcon } from "./reader/reader-icons";
-import { makeStyles, noteTooltipMdStyles } from "./reader/reader-styles";
+import { createNoteTooltipTheme } from "./reader/note-tooltip-theme";
+import { makeStyles } from "./reader/reader-styles";
 import { useReaderBookmark } from "./reader/useReaderBookmark";
 import { useReaderSearch } from "./reader/useReaderSearch";
 import { useReaderSystemInfo } from "./reader/useReaderSystemInfo";
@@ -208,6 +209,7 @@ export function ReaderScreen({ route, navigation }: Props) {
   const colors = useColors();
   const { mode: themeMode } = useTheme();
   const s = makeStyles(colors);
+  const noteTooltipTheme = createNoteTooltipTheme(colors);
   const { bookId, cfi, highlight: shouldHighlight, openTTS } = route.params;
   const { t, i18n } = useTranslation();
   const isWideLayout = SCREEN_WIDTH >= 768;
@@ -1729,7 +1731,7 @@ export function ReaderScreen({ route, navigation }: Props) {
             <View style={s.noteTooltipContent}>
               <MarkdownRenderer
                 content={adjustedNoteTooltip.note || ""}
-                styleOverrides={noteTooltipMdStyles}
+                styleOverrides={noteTooltipTheme.markdown}
               />
             </View>
           </Pressable>

packages/app-expo/src/screens/reader/note-tooltip-theme.test.ts

@@ -0,0 +1,24 @@
+import { describe, expect, it } from "vitest";
+import { createNoteTooltipTheme } from "./note-tooltip-theme";
+
+describe("reader note tooltip theme", () => {
+  it("uses the active sepia surface and readable foreground colors", () => {
+    const colors = {
+      card: "#f5ebd7",
+      foreground: "#3d2b1f",
+      muted: "#e6d9c3",
+      mutedForeground: "#7a6652",
+      border: "#d4c4a8",
+      primary: "#6b4c2a",
+    };
+
+    const theme = createNoteTooltipTheme(colors);
+
+    expect(theme.surface.backgroundColor).toBe(colors.card);
+    expect(theme.surface.borderColor).toBe(colors.border);
+    expect(theme.markdown.body.color).toBe(colors.foreground);
+    expect(theme.markdown.text.color).toBe(colors.foreground);
+    expect(theme.markdown.link.color).toBe(colors.primary);
+    expect(JSON.stringify(theme)).not.toContain("rgba(15, 23, 42, 0.95)");
+  });
+});

packages/app-expo/src/screens/reader/note-tooltip-theme.ts

@@ -0,0 +1,76 @@
+import type { ThemeColors } from "@/styles/theme";
+
+type NoteTooltipColors = Pick<
+  ThemeColors,
+  "card" | "foreground" | "muted" | "mutedForeground" | "border" | "primary"
+>;
+
+export function createNoteTooltipTheme(colors: NoteTooltipColors) {
+  const text = { color: colors.foreground, fontSize: 13, lineHeight: 19 };
+  const code = {
+    backgroundColor: colors.muted,
+    color: colors.foreground,
+    fontSize: 14,
+    fontFamily: "Menlo",
+  };
+
+  return {
+    surface: {
+      backgroundColor: colors.card,
+      borderColor: colors.border,
+    },
+    content: {
+      maxHeight: 140,
+      overflow: "hidden" as const,
+    },
+    markdown: {
+      body: text,
+      textgroup: text,
+      text,
+      paragraph: { ...text, marginBottom: 4, marginTop: 0 },
+      heading1: {
+        color: colors.foreground,
+        fontSize: 15,
+        fontWeight: "600" as const,
+        marginBottom: 4,
+        marginTop: 4,
+      },
+      heading2: {
+        color: colors.foreground,
+        fontSize: 14,
+        fontWeight: "600" as const,
+        marginBottom: 3,
+        marginTop: 3,
+      },
+      heading3: {
+        color: colors.foreground,
+        fontSize: 13,
+        fontWeight: "600" as const,
+        marginBottom: 2,
+        marginTop: 2,
+      },
+      strong: { fontWeight: "700" as const, color: colors.foreground },
+      em: { fontStyle: "italic" as const, color: colors.mutedForeground },
+      link: { color: colors.primary },
+      code_inline: code,
+      code_block: { ...code, padding: 8 },
+      fence: { ...code, padding: 8 },
+      blockquote: {
+        borderLeftWidth: 2,
+        borderLeftColor: colors.mutedForeground,
+        paddingLeft: 10,
+        backgroundColor: "transparent",
+        color: colors.foreground,
+      },
+      bullet_list: { marginVertical: 2 },
+      ordered_list: { marginVertical: 2 },
+      list_item: { marginBottom: 2, flexDirection: "row" as const },
+      bullet_list_icon: { color: colors.foreground, marginLeft: 0, marginRight: 8 },
+      bullet_list_content: { color: colors.foreground, flex: 1 },
+      ordered_list_icon: { color: colors.foreground, marginLeft: 0, marginRight: 8 },
+      ordered_list_content: { color: colors.foreground, flex: 1 },
+      hardbreak: { color: colors.foreground },
+      softbreak: { color: colors.foreground },
+    },
+  };
+}

packages/app-expo/src/screens/reader/reader-styles.ts

@@ -7,8 +7,6 @@ import { makeToolbarStyles } from "./styles/reader-base-styles";
 import { makeSheetStyles } from "./styles/reader-sheet-styles";
 import { makeNoteStyles } from "./styles/reader-note-styles";
 
-export { TOOLTIP_FG, TOOLTIP_MUTED, noteTooltipMdStyles } from "./styles/reader-note-styles";
-
 export const makeStyles = (colors: ThemeColors) => ({
   ...makeToolbarStyles(colors),
   ...makeSheetStyles(colors),

packages/app-expo/src/screens/reader/styles/index.ts

@@ -1,3 +1,3 @@
 export { makeToolbarStyles } from "./reader-base-styles";
 export { makeSheetStyles } from "./reader-sheet-styles";
-export { makeNoteStyles, noteTooltipMdStyles, TOOLTIP_FG, TOOLTIP_MUTED } from "./reader-note-styles";
+export { makeNoteStyles } from "./reader-note-styles";

packages/app-expo/src/screens/reader/styles/reader-note-styles.ts

@@ -3,44 +3,14 @@
  */
 import { Dimensions, StyleSheet } from "react-native";
 import { type ThemeColors, fontSize, fontWeight, radius } from "@/styles/theme";
+import { createNoteTooltipTheme } from "../note-tooltip-theme";
 
 const SCREEN_HEIGHT = Dimensions.get("window").height;
 
-export const TOOLTIP_FG = "#f1f5f9";
-export const TOOLTIP_MUTED = "rgba(148, 163, 184, 0.5)";
+export const makeNoteStyles = (colors: ThemeColors) => {
+  const tooltipTheme = createNoteTooltipTheme(colors);
 
-/** Markdown styles used inside note tooltip */
-export const noteTooltipMdStyles = {
-  body: { color: TOOLTIP_FG, fontSize: 13, lineHeight: 19 },
-  textgroup: { color: TOOLTIP_FG, fontSize: 13, lineHeight: 19 },
-  text: { color: TOOLTIP_FG, fontSize: 13, lineHeight: 19 },
-  paragraph: { color: TOOLTIP_FG, fontSize: 13, lineHeight: 19, marginBottom: 4, marginTop: 0 },
-  heading1: { color: "#fff", fontSize: 15, fontWeight: "600" as const, marginBottom: 4, marginTop: 4 },
-  heading2: { color: "#fff", fontSize: 14, fontWeight: "600" as const, marginBottom: 3, marginTop: 3 },
-  heading3: { color: "#fff", fontSize: 13, fontWeight: "600" as const, marginBottom: 2, marginTop: 2 },
-  strong: { fontWeight: "700" as const, color: "#fff" },
-  em: { fontStyle: "italic" as const, color: "#e2e8f0" },
-  link: { color: "#60a5fa" },
-  code_inline: { backgroundColor: "rgba(255,255,255,0.1)", color: TOOLTIP_FG, fontSize: 14, fontFamily: "Menlo" },
-  code_block: { backgroundColor: "rgba(0,0,0,0.3)", color: TOOLTIP_FG, fontSize: 14, fontFamily: "Menlo", padding: 8 },
-  fence: { backgroundColor: "rgba(0,0,0,0.3)", color: TOOLTIP_FG, fontSize: 14, fontFamily: "Menlo", padding: 8 },
-  blockquote: {
-    borderLeftWidth: 2, borderLeftColor: TOOLTIP_MUTED,
-    paddingLeft: 10, backgroundColor: "transparent", color: TOOLTIP_FG,
-  },
-  bullet_list: { marginVertical: 2 },
-  ordered_list: { marginVertical: 2 },
-  list_item: { marginBottom: 2, flexDirection: "row" as const },
-  bullet_list_icon: { color: TOOLTIP_FG, marginLeft: 0, marginRight: 8 },
-  bullet_list_content: { color: TOOLTIP_FG, flex: 1 },
-  ordered_list_icon: { color: TOOLTIP_FG, marginLeft: 0, marginRight: 8 },
-  ordered_list_content: { color: TOOLTIP_FG, flex: 1 },
-  hardbreak: { color: TOOLTIP_FG },
-  softbreak: { color: TOOLTIP_FG },
-};
-
-export const makeNoteStyles = (colors: ThemeColors) =>
-  StyleSheet.create({
+  return StyleSheet.create({
     // ── Note view modal ───────────────────────────────────────────────────────
     noteViewOverlay: {
       flex: 1, justifyContent: "flex-end",
@@ -101,15 +71,16 @@ export const makeNoteStyles = (colors: ThemeColors) =>
     noteTooltip: {
       position: "absolute",
       width: 300, maxHeight: 200,
-      backgroundColor: "rgba(15, 23, 42, 0.95)",
+      ...tooltipTheme.surface,
       borderRadius: radius.lg,
       padding: 12,
       shadowColor: "#000",
       shadowOffset: { width: 0, height: 8 },
       shadowOpacity: 0.3, shadowRadius: 16,
       elevation: 12,
-      borderWidth: 1, borderColor: "rgba(100, 116, 139, 0.3)",
+      borderWidth: 1,
       zIndex: 90,
     },
-    noteTooltipContent: { maxHeight: 140, overflow: "hidden" },
+    noteTooltipContent: tooltipTheme.content,
   });
+};