From 05d18a696656fbda01635f38b7550ab22dce2faa Mon Sep 17 00:00:00 2001
From: Daniel Williams <dannyhyunsoowilliams@gmail.com>
Date: Sat, 28 Feb 2026 15:49:32 +0000
Subject: [PATCH 1/2] fix: use themed colors in actions panel for dark mode
 support

Replace hardcoded light-mode colors in ActionLogger with styled
components from @storybook/react-native-theming so the actions
panel is readable in both light and dark mode.
---
 packages/ondevice-actions/package.json        |   1 +
 .../src/components/ActionLogger/Inspect.tsx   | 104 +++++++++---------
 .../src/components/ActionLogger/index.tsx     |   9 +-
 pnpm-lock.yaml                                |   3 +
 4 files changed, 65 insertions(+), 52 deletions(-)

diff --git a/packages/ondevice-actions/package.json b/packages/ondevice-actions/package.json
index 5ffa7d97e8..1f5fea339a 100644
--- a/packages/ondevice-actions/package.json
+++ b/packages/ondevice-actions/package.json
@@ -28,6 +28,7 @@
     "check:types": "tsc --noEmit"
   },
   "dependencies": {
+    "@storybook/react-native-theming": "^10.3.0-next.2",
     "fast-deep-equal": "^3.1.3"
   },
   "devDependencies": {
diff --git a/packages/ondevice-actions/src/components/ActionLogger/Inspect.tsx b/packages/ondevice-actions/src/components/ActionLogger/Inspect.tsx
index 1dd5ca0695..9eb3c471fa 100644
--- a/packages/ondevice-actions/src/components/ActionLogger/Inspect.tsx
+++ b/packages/ondevice-actions/src/components/ActionLogger/Inspect.tsx
@@ -1,19 +1,39 @@
 import React, { useState } from 'react';
-import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
-
-const theme = {
-  OBJECT_NAME_COLOR: 'rgb(136, 19, 145)',
-  OBJECT_VALUE_NULL_COLOR: 'rgb(128, 128, 128)',
-  OBJECT_VALUE_UNDEFINED_COLOR: 'rgb(128, 128, 128)',
-  OBJECT_VALUE_REGEXP_COLOR: 'rgb(196, 26, 22)',
-  OBJECT_VALUE_STRING_COLOR: 'rgb(196, 26, 22)',
-  OBJECT_VALUE_SYMBOL_COLOR: 'rgb(196, 26, 22)',
-  OBJECT_VALUE_NUMBER_COLOR: 'rgb(28, 0, 207)',
-  OBJECT_VALUE_BOOLEAN_COLOR: 'rgb(28, 0, 207)',
-  OBJECT_VALUE_FUNCTION_PREFIX_COLOR: 'rgb(13, 34, 170)',
-
-  ARROW_COLOR: '#859499',
-};
+import { View, StyleSheet, TouchableOpacity } from 'react-native';
+import { styled } from '@storybook/react-native-theming';
+
+const DefaultText = styled.Text(({ theme }) => ({
+  color: theme.color.defaultText,
+}));
+
+const ObjectNameText = styled.Text(({ theme }) => ({
+  color: theme.color.secondary,
+}));
+
+const MutedText = styled.Text(({ theme }) => ({
+  color: theme.textMutedColor,
+}));
+
+const StringText = styled.Text(({ theme }) => ({
+  color: theme.color.orange,
+}));
+
+const NumberText = styled.Text(({ theme }) => ({
+  color: theme.color.green,
+}));
+
+const BooleanText = styled.Text(({ theme }) => ({
+  color: theme.color.seafoam,
+}));
+
+const FunctionText = styled.Text(({ theme }) => ({
+  color: theme.color.purple,
+}));
+
+const ArrowText = styled.Text<{ visible: boolean }>(({ theme, visible }) => ({
+  color: visible ? theme.textMutedColor : 'transparent',
+  paddingRight: 8,
+}));
 
 interface InspectProps {
   name?: string;
@@ -32,15 +52,9 @@ const Inspect = ({ name, value }: InspectProps) => {
     }
   }, [canExpand]);
 
-  const toggle = (
-    <Text style={{ color: canExpand ? theme.ARROW_COLOR : 'transparent', paddingRight: 8 }}>
-      {expanded ? '▼' : '▶'}
-    </Text>
-  );
+  const toggle = <ArrowText visible={!!canExpand}>{expanded ? '▼' : '▶'}</ArrowText>;
 
-  const nameComponent = name ? (
-    <Text style={{ color: theme.OBJECT_NAME_COLOR }}>{name}</Text>
-  ) : null;
+  const nameComponent = name ? <ObjectNameText>{name}</ObjectNameText> : null;
 
   if (Array.isArray(value)) {
     if (name) {
@@ -49,7 +63,7 @@ const Inspect = ({ name, value }: InspectProps) => {
           <TouchableOpacity onPress={toggleExpanded} style={styles.row}>
             {toggle}
             {nameComponent}
-            <Text>{`: ${value.length === 0 ? '[]' : expanded ? '[' : '[...]'}`}</Text>
+            <DefaultText>{`: ${value.length === 0 ? '[]' : expanded ? '[' : '[...]'}`}</DefaultText>
           </TouchableOpacity>
           {expanded ? (
             <View style={styles.expanded}>
@@ -59,7 +73,7 @@ const Inspect = ({ name, value }: InspectProps) => {
                 </View>
               ))}
               <View style={styles.spacingLeft}>
-                <Text>]</Text>
+                <DefaultText>]</DefaultText>
               </View>
             </View>
           ) : null}
@@ -68,13 +82,13 @@ const Inspect = ({ name, value }: InspectProps) => {
     }
     return (
       <>
-        <Text>[</Text>
+        <DefaultText>[</DefaultText>
         {value.map((v, i) => (
           <View key={i} style={styles.spacingLeft}>
             <Inspect value={v} />
           </View>
         ))}
-        <Text>]</Text>
+        <DefaultText>]</DefaultText>
       </>
     );
   }
@@ -85,7 +99,7 @@ const Inspect = ({ name, value }: InspectProps) => {
           <TouchableOpacity style={styles.row} onPress={toggleExpanded}>
             {toggle}
             {nameComponent}
-            <Text>{`: ${Object.keys(value).length === 0 ? '{}' : expanded ? '{' : '{...}'}`}</Text>
+            <DefaultText>{`: ${Object.keys(value).length === 0 ? '{}' : expanded ? '{' : '{...}'}`}</DefaultText>
           </TouchableOpacity>
           {expanded ? (
             <View style={styles.expanded}>
@@ -95,7 +109,7 @@ const Inspect = ({ name, value }: InspectProps) => {
                 </View>
               ))}
               <View style={styles.spacingLeft}>
-                <Text>{'}'}</Text>
+                <DefaultText>{'}'}</DefaultText>
               </View>
             </View>
           ) : null}
@@ -104,13 +118,13 @@ const Inspect = ({ name, value }: InspectProps) => {
     }
     return (
       <>
-        <Text>{'{'}</Text>
+        <DefaultText>{'{'}</DefaultText>
         {Object.entries(value).map(([key, v]) => (
           <View key={key}>
             <Inspect name={key} value={v} />
           </View>
         ))}
-        <Text>{'}'}</Text>
+        <DefaultText>{'}'}</DefaultText>
       </>
     );
   }
@@ -119,7 +133,7 @@ const Inspect = ({ name, value }: InspectProps) => {
       <View style={styles.row}>
         {toggle}
         {nameComponent}
-        <Text>: </Text>
+        <DefaultText>: </DefaultText>
         <Value value={value} />
       </View>
     );
@@ -129,35 +143,25 @@ const Inspect = ({ name, value }: InspectProps) => {
 
 function Value({ value }: { value: any }) {
   if (value === null) {
-    return <Text style={{ color: theme.OBJECT_VALUE_NULL_COLOR }}>null</Text>;
+    return <MutedText>null</MutedText>;
   }
   if (value === undefined) {
-    return <Text style={{ color: theme.OBJECT_VALUE_UNDEFINED_COLOR }}>undefined</Text>;
+    return <MutedText>undefined</MutedText>;
   }
   if (value instanceof RegExp) {
-    return (
-      <Text style={{ color: theme.OBJECT_VALUE_REGEXP_COLOR }}>
-        {`/${value.source}/${value.flags}`}
-      </Text>
-    );
+    return <StringText>{`/${value.source}/${value.flags}`}</StringText>;
   }
   switch (typeof value) {
     case 'string':
-      return (
-        <Text style={{ color: theme.OBJECT_VALUE_STRING_COLOR }}>{JSON.stringify(value)}</Text>
-      );
+      return <StringText>{JSON.stringify(value)}</StringText>;
     case 'number':
-      return (
-        <Text style={{ color: theme.OBJECT_VALUE_NUMBER_COLOR }}>{JSON.stringify(value)}</Text>
-      );
+      return <NumberText>{JSON.stringify(value)}</NumberText>;
     case 'boolean':
-      return (
-        <Text style={{ color: theme.OBJECT_VALUE_BOOLEAN_COLOR }}>{JSON.stringify(value)}</Text>
-      );
+      return <BooleanText>{JSON.stringify(value)}</BooleanText>;
     case 'function':
-      return <Text style={{ color: theme.OBJECT_VALUE_FUNCTION_PREFIX_COLOR }}>[Function]</Text>;
+      return <FunctionText>[Function]</FunctionText>;
     default:
-      return <Text>{JSON.stringify(value)}</Text>;
+      return <DefaultText>{JSON.stringify(value)}</DefaultText>;
   }
 }
 
diff --git a/packages/ondevice-actions/src/components/ActionLogger/index.tsx b/packages/ondevice-actions/src/components/ActionLogger/index.tsx
index 41890370fd..8da0f192e3 100644
--- a/packages/ondevice-actions/src/components/ActionLogger/index.tsx
+++ b/packages/ondevice-actions/src/components/ActionLogger/index.tsx
@@ -1,7 +1,12 @@
 import { ActionDisplay } from 'storybook/actions';
-import { Button, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { Button, ScrollView, StyleSheet, View } from 'react-native';
+import { styled } from '@storybook/react-native-theming';
 import Inspect from './Inspect';
 
+const CountText = styled.Text(({ theme }) => ({
+  color: theme.color.defaultText,
+}));
+
 interface ActionLoggerProps {
   actions: ActionDisplay[];
   onClear: () => void;
@@ -13,7 +18,7 @@ export const ActionLogger = ({ actions, onClear }: ActionLoggerProps) => (
       <View>
         {actions.map((action: ActionDisplay) => (
           <View key={action.id} style={styles.row}>
-            <View>{action.count > 1 ? <Text>{action.count}</Text> : null}</View>
+            <View>{action.count > 1 ? <CountText>{action.count}</CountText> : null}</View>
             <View style={styles.grow}>
               <Inspect name={action.data.name} value={action.data.args || action.data} />
             </View>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9e9b8f7e45..1f812a7e0e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -228,6 +228,9 @@ importers:
 
   packages/ondevice-actions:
     dependencies:
+      '@storybook/react-native-theming':
+        specifier: ^10.3.0-next.2
+        version: link:../react-native-theming
       fast-deep-equal:
         specifier: ^3.1.3
         version: 3.1.3

From e12e4cf5563b7453001b3abe88d1ca719097932a Mon Sep 17 00:00:00 2001
From: Daniel Williams <dannyhyunsoowilliams@gmail.com>
Date: Sat, 28 Feb 2026 16:29:30 +0000
Subject: [PATCH 2/2] changeset

---
 .changeset/tender-buttons-judge.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/tender-buttons-judge.md

diff --git a/.changeset/tender-buttons-judge.md b/.changeset/tender-buttons-judge.md
new file mode 100644
index 0000000000..acd36791b4
--- /dev/null
+++ b/.changeset/tender-buttons-judge.md
@@ -0,0 +1,5 @@
+---
+'@storybook/addon-ondevice-actions': patch
+---
+
+fix actions logs not themed