style(app): theme native scrollbars across all web views (#399)
* style(app): theme native scrollbars in tool call detail views Apply CSS scrollbar-color to all ScrollViews in ToolCallDetailsContent and DiffViewer so the browser scrollbar matches the app's dark theme instead of showing the default white native scrollbar. * refactor: split useWebScrollbarStyle into .web.ts/.native.ts platform files - Native shim returns undefined without calling useUnistyles - Web variant uses properly typed WebScrollbarStyle interface instead of `as any` - Add .d.ts for TypeScript module resolution --------- Co-authored-by: Mohamed Boudra <boudra.moha@gmail.com>
This commit is contained in:
@@ -0,0 +1 @@
|
||||
export * from "./use-web-scrollbar-style.web";
|
||||
@@ -0,0 +1,5 @@
|
||||
import type { ViewStyle } from "react-native";
|
||||
|
||||
export function useWebScrollbarStyle(): ViewStyle | undefined {
|
||||
return undefined;
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
import { useMemo } from "react";
|
||||
import type { ViewStyle } from "react-native";
|
||||
import { useUnistyles } from "react-native-unistyles";
|
||||
|
||||
// CSS scrollbar properties are supported by React Native Web at runtime
|
||||
// but are not included in React Native's ViewStyle type definition.
|
||||
interface WebScrollbarStyle extends ViewStyle {
|
||||
scrollbarColor: string;
|
||||
scrollbarWidth: string;
|
||||
}
|
||||
|
||||
export function useWebScrollbarStyle(): WebScrollbarStyle {
|
||||
const { theme } = useUnistyles();
|
||||
return useMemo(
|
||||
(): WebScrollbarStyle => ({
|
||||
scrollbarColor: `${theme.colors.scrollbarHandle} transparent`,
|
||||
scrollbarWidth: "thin",
|
||||
}),
|
||||
[theme.colors.scrollbarHandle],
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user