Fix bottom sheet dark theme background

This commit is contained in:
Mohamed Boudra
2025-12-22 04:05:19 +00:00
parent b601d96c23
commit 070314fa5f
2 changed files with 26 additions and 1 deletions

View File

@@ -572,13 +572,14 @@ function ToolCallSheetContent({ data, onClose }: ToolCallSheetContentProps) {
const styles = StyleSheet.create((theme) => ({
sheetBackground: {
backgroundColor: theme.colors.background,
backgroundColor: theme.colors.card,
},
handleIndicator: {
backgroundColor: theme.colors.mutedForeground,
},
container: {
flex: 1,
backgroundColor: theme.colors.card,
},
header: {
flexDirection: "row",
@@ -639,6 +640,7 @@ const styles = StyleSheet.create((theme) => ({
},
content: {
flex: 1,
backgroundColor: theme.colors.card,
},
contentContainer: {
padding: theme.spacing[4],

23
plan.md
View File

@@ -834,3 +834,26 @@ interface ToolCallSheetData {
- **Success criteria**: Bottom sheet has dark background matching app theme, NOT white
- All content text is readable with proper contrast against dark background
- **Done (2025-12-22 15:55)**: SKIPPED. Initial test passed - bottom sheet already works correctly in dark mode. No re-verification needed.
---
## Bottom Sheet Dark Mode - ACTUALLY FIX IT
The previous test was wrong. The screenshot clearly shows a WHITE bottom sheet background in dark mode.
- [x] agent=codex **Fix**: Fix bottom sheet background to use dark theme colors.
- The bottom sheet background is WHITE in dark mode - this is 100% a bug
- Look at `tool-call-sheet.tsx` and find where the BottomSheet component is configured
- Add `backgroundStyle={{ backgroundColor: theme.colors.card }}` to the BottomSheet component
- Also check `handleIndicatorStyle` uses a visible color for dark mode
- The entire sheet (background, handle, content) must be dark in dark mode
- Run typecheck after fix
- Take a new screenshot to verify
- **Done (2025-12-22 04:04)**: Updated BottomSheet modal, container, and content to use the card background color so the sheet matches the dark theme; typecheck passes. Visual verification pending dedicated test task.
- [ ] **Test**: Verify bottom sheet is actually dark in dark mode.
- Take Playwright MCP screenshot
- Move screenshot to ~/public for manual verification
- **Success criteria**: The bottom sheet background is DARK, not white. Period.