fix: dark mode

packages/ondevice-notes/src/components/Notes.tsx

@@ -6,6 +6,7 @@ import Markdown from 'react-native-markdown-display';
 import { RNAddonApi, StoryFromId } from '../register';
 import { ErrorBoundary } from '../ErrorBoundary';
 import { addons } from '@storybook/core/manager-api';
+import { useTheme } from '@storybook/react-native-theming';
 
 export const PARAM_KEY = 'notes';
 
@@ -15,6 +16,7 @@ interface NotesProps {
 }
 
 export const Notes = ({ active, api }: NotesProps) => {
+  const theme = useTheme();
   const [story, setStory] = useState<StoryFromId | null>();
 
   useEffect(() => {
@@ -50,7 +52,9 @@ export const Notes = ({ active, api }: NotesProps) => {
       {textAfterFormatted && (
         <ErrorBoundary>
           {/* @ts-ignore has the wrong types */}
-          <Markdown>{textAfterFormatted}</Markdown>
+          <Markdown style={{ body: { color: theme.color.defaultText } }}>
+            {textAfterFormatted}
+          </Markdown>
         </ErrorBoundary>
       )}
     </View>

packages/react-native-ui/src/Button.tsx

@@ -111,13 +111,13 @@ const StyledButton = styled.TouchableOpacity<
 
   backgroundColor: (() => {
     if (variant === 'solid') return theme.color.secondary;
-    if (variant === 'outline') return theme.button$.background;
+    if (variant === 'outline') return theme.button.background;
     if (variant === 'ghost' && active) return theme.background.hoverable;
 
     return 'transparent';
   })(),
 
-  boxShadow: variant === 'outline' ? `${theme.button$.border} 0 0 0 1px inset` : 'none',
+  boxShadow: variant === 'outline' ? `${theme.button.border} 0 0 0 1px inset` : 'none',
   borderRadius: theme.input.borderRadius,
   // Making sure that the button never shrinks below its minimum size
   flexShrink: 0,

packages/react-native-ui/src/Layout.tsx

@@ -32,7 +32,7 @@ export const Layout = ({
   const insets = useSafeAreaInsets();
 
   return (
-    <View style={{ flex: 1, paddingTop: insets.top }}>
+    <View style={{ flex: 1, paddingTop: insets.top, backgroundColor: theme.background.content }}>
       <View style={{ flex: 1 }}>{children}</View>
       <MobileMenuDrawer ref={mobileMenuDrawerRef} onStateChange={setDrawerOpen}>
         <Sidebar
@@ -63,7 +63,7 @@ export const Layout = ({
               }}
             >
               <MenuIcon color={theme.color.mediumdark} />
-              <Text style={{ flexShrink: 1 }} numberOfLines={1}>
+              <Text style={{ flexShrink: 1, color: theme.color.defaultText }} numberOfLines={1}>
                 {story?.title}/{story?.name}
               </Text>
             </Button>

packages/react-native-ui/src/MobileAddonsPanel.tsx

@@ -12,7 +12,7 @@ import Animated, {
   useSharedValue,
 } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-
+import { useTheme } from '@storybook/react-native-theming';
 import { IconButton } from './IconButton';
 import { CloseIcon } from './icon/CloseIcon';
 
@@ -24,6 +24,7 @@ export const MobileAddonsPanel = forwardRef<
   MobileAddonsPanelRef,
   { storyId?: string; onStateChange: (open: boolean) => void }
 >(({ storyId, onStateChange }, ref) => {
+  const theme = useTheme();
   const reducedMotion = useReducedMotion();
 
   const addonsPanelBottomSheetRef = useRef<BottomSheetModal>(null);
@@ -73,9 +74,11 @@ export const MobileAddonsPanel = forwardRef<
       containerStyle={{}}
       backgroundStyle={{
         borderRadius: 0,
-        borderTopColor: 'lightgrey',
+        borderTopColor: theme.appBorderColor,
         borderTopWidth: 1,
+        backgroundColor: theme.background.content,
       }}
+      handleIndicatorStyle={{ backgroundColor: theme.textMutedColor }}
       keyboardBehavior="extend"
       // keyboardBlurBehavior="restore"
       enableDismissOnClose

packages/react-native-ui/src/MobileMenuDrawer.tsx

@@ -8,6 +8,7 @@ import { ReactNode, forwardRef, useImperativeHandle, useRef } from 'react';
 import { Keyboard } from 'react-native';
 import { useReducedMotion } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useTheme } from '@storybook/react-native-theming';
 
 interface MobileMenuDrawerProps {
   children: ReactNode | ReactNode[];
@@ -32,6 +33,7 @@ export const MobileMenuDrawer = forwardRef<MobileMenuDrawerRef, MobileMenuDrawer
   ({ children, onStateChange }, ref) => {
     const reducedMotion = useReducedMotion();
     const insets = useSafeAreaInsets();
+    const theme = useTheme();
 
     const menuBottomSheetRef = useRef<BottomSheetModal>(null);
 
@@ -65,6 +67,8 @@ export const MobileMenuDrawer = forwardRef<MobileMenuDrawerRef, MobileMenuDrawer
         keyboardBlurBehavior="restore"
         stackBehavior="replace"
         backdropComponent={BottomSheetBackdropComponent}
+        backgroundStyle={{ backgroundColor: theme.background.content }}
+        handleIndicatorStyle={{ backgroundColor: theme.textMutedColor }}
       >
         <BottomSheetScrollView
           keyboardShouldPersistTaps="handled"

packages/react-native-ui/src/SearchResults.tsx

@@ -6,7 +6,7 @@ import type { GetSearchItemProps, SearchResult, SearchResultProps } from './type
 import { isExpandType } from './types';
 
 import { FuseResultMatch } from 'fuse.js';
-import { PressableProps, Text, View } from 'react-native';
+import { PressableProps, View } from 'react-native';
 import { Button } from './Button';
 import { IconButton } from './IconButton';
 import { ComponentIcon } from './icon/ComponentIcon';
@@ -28,7 +28,7 @@ const ResultRow = styled.TouchableOpacity<{ isHighlighted: boolean }>(
     flexDirection: 'row',
     alignItems: 'flex-start',
     textAlign: 'left',
-    color: 'inherit',
+    color: theme.color.defaultText,
     fontSize: theme.typography.size.s2,
     backgroundColor: isHighlighted ? theme.background.hoverable : 'transparent',
     minHeight: 28,
@@ -177,6 +177,10 @@ const Result: FC<SearchResultProps> = React.memo(function Result({
   );
 });
 
+const Text = styled.Text(({ theme }) => ({
+  color: theme.color.defaultText,
+}));
+
 export const SearchResults: FC<{
   query: string;
   results: SearchResult[];

packages/react-native-ui/src/Tree.tsx

@@ -7,18 +7,18 @@ import type {
 } from '@storybook/core/manager-api';
 import { styled } from '@storybook/react-native-theming';
 import React, { useCallback, useMemo, useRef } from 'react';
+import { View } from 'react-native';
 import { IconButton } from './IconButton';
+import { useLayout } from './LayoutProvider';
 import { ComponentNode, GroupNode, StoryNode } from './TreeNode';
+import { CollapseAllIcon } from './icon/CollapseAllIcon';
 import { CollapseIcon } from './icon/CollapseIcon';
+import { ExpandAllIcon } from './icon/ExpandAllIcon';
+import { Item } from './types';
 import type { ExpandAction, ExpandedState } from './useExpanded';
 import { useExpanded } from './useExpanded';
-import { createId, getAncestorIds, getDescendantIds, isStoryHoistable } from './util/tree';
 import { getGroupStatus, statusMapping } from './util/status';
-import { Text, View } from 'react-native';
-import { ExpandAllIcon } from './icon/ExpandAllIcon';
-import { CollapseAllIcon } from './icon/CollapseAllIcon';
-import { Item } from './types';
-import { useLayout } from './LayoutProvider';
+import { createId, getAncestorIds, getDescendantIds, isStoryHoistable } from './util/tree';
 
 interface NodeProps {
   item: Item;
@@ -36,6 +36,10 @@ interface NodeProps {
   status: State['status'][keyof State['status']];
 }
 
+const TextItem = styled.Text(({ theme }) => ({
+  color: theme.color.defaultText,
+}));
+
 export const Node = React.memo<NodeProps>(function Node({
   item,
   refId,
@@ -90,7 +94,7 @@ export const Node = React.memo<NodeProps>(function Node({
           aria-expanded={isExpanded}
         >
           <CollapseIcon isExpanded={isExpanded} />
-          <Text>{item.renderLabel?.(item, {}) || item.name}</Text>
+          <TextItem>{item.renderLabel?.(item, {}) || item.name}</TextItem>
         </CollapseButton>
         {isExpanded && (
           <IconButton

packages/react-native-ui/src/TreeNode.tsx

@@ -17,6 +17,7 @@ const BranchNodeText = styled.Text<{ isSelected?: boolean }>(({ theme }) => ({
   textAlign: 'left',
   fontSize: theme.typography.size.s2,
   flexShrink: 1,
+  color: theme.color.defaultText,
 }));
 
 const BranchNode = styled.TouchableOpacity<{

packages/react-native-ui/src/icon/CollapseAllIcon.tsx

@@ -1,16 +1,19 @@
 import { Path, Svg, SvgProps } from 'react-native-svg';
+import { useTheme } from '@storybook/react-native-theming';
 
 export const CollapseAllIcon = ({
-  color = '#2E3438',
+  color, //= '#2E3438',
   width = 14,
   height = 14,
   ...props
 }: SvgProps) => {
+  const theme = useTheme();
+
   return (
     <Svg width={width} height={height} viewBox="0 0 14 14" fill="none" {...props}>
       <Path
         d="M3.354.146a.5.5 0 10-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 00-.708-.708L7 3.793 3.354.146zM6.646 9.146a.5.5 0 01.708 0l4 4a.5.5 0 01-.708.708L7 10.207l-3.646 3.647a.5.5 0 01-.708-.708l4-4z"
-        fill={color}
+        fill={color ?? theme.color.defaultText}
       />
     </Svg>
   );

packages/react-native-ui/src/icon/CollapseIcon.tsx

@@ -1,6 +1,5 @@
 import { styled } from '@storybook/react-native-theming';
 import type { FC } from 'react';
-import { transparentize } from 'polished';
 import Svg, { Path, SvgProps } from 'react-native-svg';
 
 interface CollapseIconProps {
@@ -14,7 +13,7 @@ export const CollapseIconWrapper = styled.View<{ isExpanded: boolean }>(
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
-    color: transparentize(0.4, theme.textMutedColor),
+    color: theme.textMutedColor,
     transform: isExpanded ? 'rotateZ(90deg)' : 'none',
     transition: 'transform .1s ease-out',
   })

packages/react-native-ui/src/icon/ExpandAllIcon.tsx

@@ -1,16 +1,18 @@
 import { Path, Svg, SvgProps } from 'react-native-svg';
-
+import { useTheme } from '@storybook/react-native-theming';
 export const ExpandAllIcon = ({
-  color = '#2E3438',
+  color, //= '#2E3438',
   width = 14,
   height = 14,
   ...props
 }: SvgProps) => {
+  const theme = useTheme();
+
   return (
     <Svg width={width} height={height} viewBox="0 0 14 14" fill="none" {...props}>
       <Path
         d="M7.354.146l4 4a.5.5 0 01-.708.708L7 1.207 3.354 4.854a.5.5 0 11-.708-.708l4-4a.5.5 0 01.708 0zM11.354 9.146a.5.5 0 010 .708l-4 4a.5.5 0 01-.708 0l-4-4a.5.5 0 11.708-.708L7 12.793l3.646-3.647a.5.5 0 01.708 0z"
-        fill={color}
+        fill={color ?? theme.color.defaultText}
       />
     </Svg>
   );