snow-ai 0.4.7 → 0.4.9

package/dist/ui/pages/CustomHeadersScreen.js

@@ -5,8 +5,10 @@ import { Alert } from '@inkjs/ui';
 import TextInput from 'ink-text-input';
 import { getCustomHeadersConfig, saveCustomHeadersConfig, } from '../../utils/apiConfig.js';
 import { useI18n } from '../../i18n/index.js';
+import { useTheme } from '../contexts/ThemeContext.js';
 export default function CustomHeadersScreen({ onBack }) {
     const { t } = useI18n();
+    const { theme } = useTheme();
     const [config, setConfig] = useState(() => {
         return (getCustomHeadersConfig() || {
             active: '',
@@ -341,20 +343,20 @@ export default function CustomHeadersScreen({ onBack }) {
     if (view === 'list') {
         const activeScheme = config.schemes.find(s => s.id === config.active);
         return (React.createElement(Box, { flexDirection: "column", padding: 1 },
-            React.createElement(Box, { marginBottom: 1, borderStyle: "round", borderColor: "cyan", paddingX: 2, paddingY: 1 },
+            React.createElement(Box, { marginBottom: 1, borderStyle: "round", borderColor: theme.colors.menuInfo, paddingX: 2, paddingY: 1 },
                 React.createElement(Box, { flexDirection: "column" },
                     React.createElement(Gradient, { name: "rainbow" }, t.customHeaders.title),
-                    React.createElement(Text, { color: "gray", dimColor: true }, t.customHeaders.subtitle))),
+                    React.createElement(Text, { color: theme.colors.menuSecondary, dimColor: true }, t.customHeaders.subtitle))),
             error && (React.createElement(Box, { marginBottom: 1 },
                 React.createElement(Alert, { variant: "error" }, error))),
             React.createElement(Box, { marginBottom: 1 },
                 React.createElement(Text, { bold: true },
                     t.customHeaders.activeScheme,
                     ' ',
-                    React.createElement(Text, { color: "green" }, activeScheme?.name || t.customHeaders.none))),
+                    React.createElement(Text, { color: theme.colors.success }, activeScheme?.name || t.customHeaders.none))),
             config.schemes.length === 0 ? (React.createElement(Box, { marginBottom: 1 },
-                React.createElement(Text, { color: "yellow" }, t.customHeaders.noSchemesConfigured))) : (React.createElement(Box, { flexDirection: "column", marginBottom: 1 },
-                React.createElement(Text, { bold: true, color: "cyan" }, t.customHeaders.availableSchemes),
+                React.createElement(Text, { color: theme.colors.warning }, t.customHeaders.noSchemesConfigured))) : (React.createElement(Box, { flexDirection: "column", marginBottom: 1 },
+                React.createElement(Text, { bold: true, color: theme.colors.menuInfo }, t.customHeaders.availableSchemes),
                 config.schemes.map((scheme, index) => {
                     const headerCount = Object.keys(scheme.headers).length;
                     const headerPreview = headerCount > 0
@@ -365,10 +367,10 @@ export default function CustomHeadersScreen({ onBack }) {
                         : '';
                     return (React.createElement(Box, { key: scheme.id, marginLeft: 2 },
                         React.createElement(Text, { color: index === selectedIndex
-                                ? 'green'
+                                ? theme.colors.menuSelected
                                 : scheme.id === config.active
-                                    ? 'cyan'
-                                    : 'white' },
+                                    ? theme.colors.menuInfo
+                                    : theme.colors.menuNormal },
                             index === selectedIndex ? '❯ ' : '  ',
                             scheme.id === config.active ? '✓ ' : '  ',
                             scheme.name,
@@ -379,8 +381,8 @@ export default function CustomHeadersScreen({ onBack }) {
                                 headerPreview.length > 50 ? '...' : '')))));
                 }))),
             React.createElement(Box, { marginBottom: 1 },
-                React.createElement(Text, { bold: true, color: "cyan" }, t.customHeaders.actions)),
-            React.createElement(Box, { flexDirection: "column", marginBottom: 1, marginLeft: 2 }, actions.map(action => (React.createElement(Text, { key: action, color: currentAction === action ? 'green' : 'gray', bold: currentAction === action },
+                React.createElement(Text, { bold: true, color: theme.colors.menuInfo }, t.customHeaders.actions)),
+            React.createElement(Box, { flexDirection: "column", marginBottom: 1, marginLeft: 2 }, actions.map(action => (React.createElement(Text, { key: action, color: currentAction === action ? theme.colors.menuSelected : theme.colors.menuSecondary, bold: currentAction === action },
                 currentAction === action ? '❯ ' : '  ',
                 action === 'activate' && t.customHeaders.activate,
                 action === 'deactivate' && t.customHeaders.deactivate,
@@ -389,7 +391,7 @@ export default function CustomHeadersScreen({ onBack }) {
                 action === 'add' && t.customHeaders.addNew,
                 action === 'back' && t.customHeaders.escBack)))),
             React.createElement(Box, { marginTop: 1 },
-                React.createElement(Text, { color: "gray", dimColor: true }, t.customHeaders.navigationHint))));
+                React.createElement(Text, { color: theme.colors.menuSecondary, dimColor: true }, t.customHeaders.navigationHint))));
     }
     // Render add/edit view
     if (view === 'add' || view === 'edit') {
@@ -401,7 +403,7 @@ export default function CustomHeadersScreen({ onBack }) {
                 .join(', ')
             : t.customHeaders.notSet;
         return (React.createElement(Box, { flexDirection: "column", padding: 1 },
-            React.createElement(Box, { marginBottom: 1, borderStyle: "round", borderColor: "cyan", paddingX: 2, paddingY: 1 },
+            React.createElement(Box, { marginBottom: 1, borderStyle: "round", borderColor: theme.colors.menuInfo, paddingX: 2, paddingY: 1 },
                 React.createElement(Gradient, { name: "rainbow" }, view === 'add'
                     ? t.customHeaders.addNewTitle
                     : t.customHeaders.editTitle)),
@@ -409,16 +411,16 @@ export default function CustomHeadersScreen({ onBack }) {
                 React.createElement(Alert, { variant: "error" }, error))),
             React.createElement(Box, { marginBottom: 1 },
                 React.createElement(Box, { flexDirection: "column" },
-                    React.createElement(Text, { color: editingField === 'name' ? 'green' : 'white' },
+                    React.createElement(Text, { color: editingField === 'name' ? theme.colors.menuSelected : theme.colors.menuNormal },
                         editingField === 'name' ? '❯ ' : '  ',
                         t.customHeaders.nameLabel),
                     editingField === 'name' && isEditing && (React.createElement(Box, { marginLeft: 3 },
                         React.createElement(TextInput, { value: editName, onChange: setEditName, placeholder: t.customHeaders.enterSchemeName }))),
                     (!isEditing || editingField !== 'name') && (React.createElement(Box, { marginLeft: 3 },
-                        React.createElement(Text, { color: "gray" }, editName || t.customHeaders.notSet))))),
+                        React.createElement(Text, { color: theme.colors.menuSecondary }, editName || t.customHeaders.notSet))))),
             React.createElement(Box, { marginBottom: 1 },
                 React.createElement(Box, { flexDirection: "column" },
-                    React.createElement(Text, { color: editingField === 'headers' ? 'green' : 'white' },
+                    React.createElement(Text, { color: editingField === 'headers' ? theme.colors.menuSelected : theme.colors.menuNormal },
                         editingField === 'headers' ? '❯ ' : '  ',
                         t.customHeaders.headersLabel,
                         " (",
@@ -427,60 +429,60 @@ export default function CustomHeadersScreen({ onBack }) {
                         t.customHeaders.headersConfigured,
                         "):"),
                     editingField === 'headers' && !isEditing ? (React.createElement(Box, { marginLeft: 3 },
-                        React.createElement(Text, { color: "cyan", dimColor: true }, t.customHeaders.pressEnterToEdit))) : (React.createElement(Box, { marginLeft: 3 },
-                        React.createElement(Text, { color: "gray" },
+                        React.createElement(Text, { color: theme.colors.menuInfo, dimColor: true }, t.customHeaders.pressEnterToEdit))) : (React.createElement(Box, { marginLeft: 3 },
+                        React.createElement(Text, { color: theme.colors.menuSecondary },
                             headerPreview.substring(0, 100),
                             headerPreview.length > 100 ? '...' : ''))))),
             React.createElement(Box, { marginTop: 1 },
-                React.createElement(Text, { color: "gray", dimColor: true }, t.customHeaders.editingHint))));
+                React.createElement(Text, { color: theme.colors.menuSecondary, dimColor: true }, t.customHeaders.editingHint))));
     }
     // Render headers edit view
     if (view === 'editHeaders') {
         return (React.createElement(Box, { flexDirection: "column", padding: 1 },
-            React.createElement(Box, { marginBottom: 1, borderStyle: "round", borderColor: "cyan", paddingX: 2, paddingY: 1 },
+            React.createElement(Box, { marginBottom: 1, borderStyle: "round", borderColor: theme.colors.menuInfo, paddingX: 2, paddingY: 1 },
                 React.createElement(Gradient, { name: "rainbow" },
                     t.customHeaders.editHeadersTitle,
                     " - ",
                     editName)),
             headerEditingIndex === -1 ? (React.createElement(React.Fragment, null,
                 React.createElement(Box, { marginBottom: 1 },
-                    React.createElement(Text, { bold: true, color: "cyan" }, t.customHeaders.headerList)),
+                    React.createElement(Text, { bold: true, color: theme.colors.menuInfo }, t.customHeaders.headerList)),
                 headerKeys.length === 0 ? (React.createElement(Box, { marginBottom: 1 },
-                    React.createElement(Text, { color: "yellow" }, t.customHeaders.noHeadersConfigured))) : (React.createElement(Box, { flexDirection: "column", marginBottom: 1 }, headerKeys.map((key, index) => {
+                    React.createElement(Text, { color: theme.colors.warning }, t.customHeaders.noHeadersConfigured))) : (React.createElement(Box, { flexDirection: "column", marginBottom: 1 }, headerKeys.map((key, index) => {
                     const isSelected = index === headerSelectedIndex;
                     return (React.createElement(Box, { key: index, marginLeft: 2 },
-                        React.createElement(Text, { color: isSelected ? 'green' : 'white', bold: isSelected },
+                        React.createElement(Text, { color: isSelected ? theme.colors.menuSelected : theme.colors.menuNormal, bold: isSelected },
                             isSelected ? '❯ ' : '  ',
                             key,
                             ": ",
                             editHeaders[key])));
                 }))),
                 React.createElement(Box, { marginLeft: 2, marginBottom: 1 },
-                    React.createElement(Text, { color: headerSelectedIndex === headerKeys.length ? 'green' : 'gray', bold: headerSelectedIndex === headerKeys.length },
+                    React.createElement(Text, { color: headerSelectedIndex === headerKeys.length ? theme.colors.menuSelected : theme.colors.menuSecondary, bold: headerSelectedIndex === headerKeys.length },
                         headerSelectedIndex === headerKeys.length ? '❯ ' : '  ',
                         t.customHeaders.addNewHeader)),
                 React.createElement(Box, { marginTop: 1 },
-                    React.createElement(Text, { color: "gray", dimColor: true }, t.customHeaders.headerNavigationHint)))) : (React.createElement(React.Fragment, null,
+                    React.createElement(Text, { color: theme.colors.menuSecondary, dimColor: true }, t.customHeaders.headerNavigationHint)))) : (React.createElement(React.Fragment, null,
                 React.createElement(Box, { marginBottom: 1 },
                     React.createElement(Box, { flexDirection: "column" },
-                        React.createElement(Text, { color: headerEditingField === 'key' ? 'green' : 'white' },
+                        React.createElement(Text, { color: headerEditingField === 'key' ? theme.colors.menuSelected : theme.colors.menuNormal },
                             headerEditingField === 'key' ? '❯ ' : '  ',
                             t.customHeaders.keyLabel),
                         headerEditingField === 'key' && isEditing && (React.createElement(Box, { marginLeft: 3 },
                             React.createElement(TextInput, { value: headerEditKey, onChange: setHeaderEditKey, placeholder: t.customHeaders.headerKeyPlaceholder }))),
                         (!isEditing || headerEditingField !== 'key') && (React.createElement(Box, { marginLeft: 3 },
-                            React.createElement(Text, { color: "gray" }, headerEditKey || t.customHeaders.notSet))))),
+                            React.createElement(Text, { color: theme.colors.menuSecondary }, headerEditKey || t.customHeaders.notSet))))),
                 React.createElement(Box, { marginBottom: 1 },
                     React.createElement(Box, { flexDirection: "column" },
-                        React.createElement(Text, { color: headerEditingField === 'value' ? 'green' : 'white' },
+                        React.createElement(Text, { color: headerEditingField === 'value' ? theme.colors.menuSelected : theme.colors.menuNormal },
                             headerEditingField === 'value' ? '❯ ' : '  ',
                             t.customHeaders.valueLabel),
                         headerEditingField === 'value' && isEditing && (React.createElement(Box, { marginLeft: 3 },
                             React.createElement(TextInput, { value: headerEditValue, onChange: setHeaderEditValue, placeholder: t.customHeaders.headerValuePlaceholder }))),
                         (!isEditing || headerEditingField !== 'value') && (React.createElement(Box, { marginLeft: 3 },
-                            React.createElement(Text, { color: "gray" }, headerEditValue || t.customHeaders.notSet))))),
+                            React.createElement(Text, { color: theme.colors.menuSecondary }, headerEditValue || t.customHeaders.notSet))))),
                 React.createElement(Box, { marginTop: 1 },
-                    React.createElement(Text, { color: "gray", dimColor: true }, t.customHeaders.headerEditingHint))))));
+                    React.createElement(Text, { color: theme.colors.menuSecondary, dimColor: true }, t.customHeaders.headerEditingHint))))));
     }
     // Render delete confirmation
     if (view === 'confirmDelete') {
@@ -491,10 +493,10 @@ export default function CustomHeadersScreen({ onBack }) {
                 React.createElement(Text, null,
                     t.customHeaders.deleteConfirmMessage,
                     " \"",
-                    React.createElement(Text, { bold: true, color: "yellow" }, schemeToDelete?.name),
+                    React.createElement(Text, { bold: true, color: theme.colors.warning }, schemeToDelete?.name),
                     "\"?")),
             React.createElement(Box, { marginTop: 1 },
-                React.createElement(Text, { color: "gray", dimColor: true }, t.customHeaders.confirmHint))));
+                React.createElement(Text, { color: theme.colors.menuSecondary, dimColor: true }, t.customHeaders.confirmHint))));
     }
     return null;
 }

package/dist/ui/pages/LanguageSettingsScreen.js

@@ -2,8 +2,10 @@ import React, { useState, useCallback } from 'react';
 import { Box, Text, useInput } from 'ink';
 import Menu from '../components/Menu.js';
 import { useI18n } from '../../i18n/index.js';
+import { useTheme } from '../contexts/ThemeContext.js';
 export default function LanguageSettingsScreen({ onBack, inlineMode = false, }) {
     const { language, setLanguage } = useI18n();
+    const { theme } = useTheme();
     const [selectedLanguage, setSelectedLanguage] = useState(language);
     const languageOptions = [
         {
@@ -39,7 +41,7 @@ export default function LanguageSettingsScreen({ onBack, inlineMode = false, })
         {
             label: '← Back',
             value: 'back',
-            color: 'gray',
+            color: theme.colors.menuSecondary,
             infoText: 'Return to main menu',
         },
     ];
@@ -66,12 +68,12 @@ export default function LanguageSettingsScreen({ onBack, inlineMode = false, })
         }
     });
     return (React.createElement(Box, { flexDirection: "column", paddingX: 1 },
-        !inlineMode && (React.createElement(Box, { borderStyle: "round", borderColor: "cyan", paddingX: 1, marginBottom: 1 },
+        !inlineMode && (React.createElement(Box, { borderStyle: "round", borderColor: theme.colors.menuInfo, paddingX: 1, marginBottom: 1 },
             React.createElement(Box, { flexDirection: "column" },
-                React.createElement(Text, { bold: true, color: "cyan" }, "Language Settings / \u8BED\u8A00\u8BBE\u7F6E")))),
+                React.createElement(Text, { bold: true, color: theme.colors.menuInfo }, "Language Settings / \u8BED\u8A00\u8BBE\u7F6E")))),
         React.createElement(Box, { flexDirection: "column" },
             React.createElement(Box, { paddingX: 1 },
-                React.createElement(Text, { color: "gray", dimColor: true },
+                React.createElement(Text, { color: theme.colors.menuSecondary, dimColor: true },
                     "Current:",
                     ' ',
                     selectedLanguage === 'en'

package/dist/ui/pages/ProxyConfigScreen.js

@@ -5,8 +5,10 @@ import { Alert } from '@inkjs/ui';
 import TextInput from 'ink-text-input';
 import { getProxyConfig, updateProxyConfig, } from '../../utils/apiConfig.js';
 import { useI18n } from '../../i18n/index.js';
+import { useTheme } from '../contexts/ThemeContext.js';
 export default function ProxyConfigScreen({ onBack, onSave, inlineMode = false, }) {
     const { t } = useI18n();
+    const { theme } = useTheme();
     const [enabled, setEnabled] = useState(false);
     const [port, setPort] = useState('7890');
     const [browserPath, setBrowserPath] = useState('');
@@ -88,42 +90,42 @@ export default function ProxyConfigScreen({ onBack, onSave, inlineMode = false,
         }
     });
     return (React.createElement(Box, { flexDirection: "column", padding: 1 },
-        !inlineMode && (React.createElement(Box, { marginBottom: 1, borderStyle: "double", borderColor: 'cyan', paddingX: 2, paddingY: 1 },
+        !inlineMode && (React.createElement(Box, { marginBottom: 1, borderStyle: "double", borderColor: theme.colors.menuInfo, paddingX: 2, paddingY: 1 },
             React.createElement(Box, { flexDirection: "column" },
                 React.createElement(Gradient, { name: "rainbow" }, t.proxyConfig.title),
-                React.createElement(Text, { color: "gray", dimColor: true }, t.proxyConfig.subtitle)))),
+                React.createElement(Text, { color: theme.colors.menuSecondary, dimColor: true }, t.proxyConfig.subtitle)))),
         React.createElement(Box, { flexDirection: "column", marginBottom: 1 },
             React.createElement(Box, { marginBottom: 1 },
                 React.createElement(Box, { flexDirection: "column" },
-                    React.createElement(Text, { color: currentField === 'enabled' ? 'green' : 'white' },
+                    React.createElement(Text, { color: currentField === 'enabled' ? theme.colors.menuSelected : theme.colors.menuNormal },
                         currentField === 'enabled' ? '❯ ' : '  ',
                         t.proxyConfig.enableProxy),
                     React.createElement(Box, { marginLeft: 3 },
-                        React.createElement(Text, { color: "gray" },
+                        React.createElement(Text, { color: theme.colors.menuSecondary },
                             enabled ? t.proxyConfig.enabled : t.proxyConfig.disabled,
                             ' ',
                             t.proxyConfig.toggleHint)))),
             React.createElement(Box, { marginBottom: 1 },
                 React.createElement(Box, { flexDirection: "column" },
-                    React.createElement(Text, { color: currentField === 'port' ? 'green' : 'white' },
+                    React.createElement(Text, { color: currentField === 'port' ? theme.colors.menuSelected : theme.colors.menuNormal },
                         currentField === 'port' ? '❯ ' : '  ',
                         t.proxyConfig.proxyPort),
                     currentField === 'port' && isEditing && (React.createElement(Box, { marginLeft: 3 },
                         React.createElement(TextInput, { value: port, onChange: setPort, placeholder: t.proxyConfig.portPlaceholder }))),
                     (!isEditing || currentField !== 'port') && (React.createElement(Box, { marginLeft: 3 },
-                        React.createElement(Text, { color: "gray" }, port || t.proxyConfig.notSet))))),
+                        React.createElement(Text, { color: theme.colors.menuSecondary }, port || t.proxyConfig.notSet))))),
             React.createElement(Box, { marginBottom: 1 },
                 React.createElement(Box, { flexDirection: "column" },
-                    React.createElement(Text, { color: currentField === 'browserPath' ? 'green' : 'white' },
+                    React.createElement(Text, { color: currentField === 'browserPath' ? theme.colors.menuSelected : theme.colors.menuNormal },
                         currentField === 'browserPath' ? '❯ ' : '  ',
                         t.proxyConfig.browserPath),
                     currentField === 'browserPath' && isEditing && (React.createElement(Box, { marginLeft: 3 },
                         React.createElement(TextInput, { value: browserPath, onChange: setBrowserPath, placeholder: t.proxyConfig.browserPathPlaceholder }))),
                     (!isEditing || currentField !== 'browserPath') && (React.createElement(Box, { marginLeft: 3 },
-                        React.createElement(Text, { color: "gray" }, browserPath || t.proxyConfig.autoDetect)))))),
+                        React.createElement(Text, { color: theme.colors.menuSecondary }, browserPath || t.proxyConfig.autoDetect)))))),
         errors.length > 0 && (React.createElement(Box, { flexDirection: "column", marginBottom: 2 },
-            React.createElement(Text, { color: "red", bold: true }, t.proxyConfig.errors),
-            errors.map((error, index) => (React.createElement(Text, { key: index, color: "red" },
+            React.createElement(Text, { color: theme.colors.error, bold: true }, t.proxyConfig.errors),
+            errors.map((error, index) => (React.createElement(Text, { key: index, color: theme.colors.error },
                 "\u2022 ",
                 error))))),
         React.createElement(Box, { flexDirection: "column" }, isEditing ? (React.createElement(React.Fragment, null,
@@ -134,13 +136,13 @@ export default function ProxyConfigScreen({ onBack, onSave, inlineMode = false,
                 t.proxyConfig.browserExamplesTitle,
                 " ",
                 React.createElement(Newline, null),
-                React.createElement(Text, { color: 'blue' }, t.proxyConfig.windowsExample),
+                React.createElement(Text, { color: theme.colors.menuInfo }, t.proxyConfig.windowsExample),
                 " ",
                 React.createElement(Newline, null),
-                React.createElement(Text, { color: 'green' }, t.proxyConfig.macosExample),
+                React.createElement(Text, { color: theme.colors.success }, t.proxyConfig.macosExample),
                 " ",
                 React.createElement(Newline, null),
-                React.createElement(Text, { color: 'yellow' }, t.proxyConfig.linuxExample),
+                React.createElement(Text, { color: theme.colors.warning }, t.proxyConfig.linuxExample),
                 " ",
                 React.createElement(Newline, null),
                 t.proxyConfig.browserExamplesFooter))));

package/dist/ui/pages/SensitiveCommandConfigScreen.js

@@ -4,6 +4,7 @@ import TextInput from 'ink-text-input';
 import { Alert } from '@inkjs/ui';
 import { getAllSensitiveCommands, toggleSensitiveCommand, addSensitiveCommand, removeSensitiveCommand, resetToDefaults, } from '../../utils/sensitiveCommandManager.js';
 import { useI18n } from '../../i18n/index.js';
+import { useTheme } from '../contexts/ThemeContext.js';
 // Focus event handling
 const focusEventTokenRegex = /(?:\x1b)?\[[0-9;]*[IO]/g;
 const isFocusEventInput = (value) => {
@@ -35,6 +36,7 @@ const stripFocusArtifacts = (value) => {
 };
 export default function SensitiveCommandConfigScreen({ onBack, inlineMode = false, }) {
     const { t } = useI18n();
+    const { theme } = useTheme();
     const [commands, setCommands] = useState([]);
     const [selectedIndex, setSelectedIndex] = useState(0);
     const [viewMode, setViewMode] = useState('list');
@@ -203,16 +205,16 @@ export default function SensitiveCommandConfigScreen({ onBack, inlineMode = fals
     }, [addField, customPattern, customDescription, loadCommands, t]);
     if (viewMode === 'add') {
         return (React.createElement(Box, { flexDirection: "column", paddingX: inlineMode ? 0 : 2, paddingY: 1 },
-            React.createElement(Text, { bold: true, color: "cyan" }, t.sensitiveCommandConfig.addTitle),
+            React.createElement(Text, { bold: true, color: theme.colors.menuInfo }, t.sensitiveCommandConfig.addTitle),
             React.createElement(Box, { marginTop: 1 }),
             React.createElement(Text, { dimColor: true }, t.sensitiveCommandConfig.patternLabel),
             React.createElement(Box, null,
-                React.createElement(Text, { color: addField === 'pattern' ? 'cyan' : 'gray' }, "\u276F "),
+                React.createElement(Text, { color: addField === 'pattern' ? theme.colors.menuInfo : theme.colors.menuSecondary }, "\u276F "),
                 React.createElement(TextInput, { value: customPattern, onChange: handlePatternChange, onSubmit: handleAddSubmit, focus: addField === 'pattern', placeholder: t.sensitiveCommandConfig.patternPlaceholder })),
             React.createElement(Box, { marginTop: 1 }),
             React.createElement(Text, { dimColor: true }, t.sensitiveCommandConfig.descriptionLabel),
             React.createElement(Box, null,
-                React.createElement(Text, { color: addField === 'description' ? 'cyan' : 'gray' }, "\u276F "),
+                React.createElement(Text, { color: addField === 'description' ? theme.colors.menuInfo : theme.colors.menuSecondary }, "\u276F "),
                 React.createElement(TextInput, { value: customDescription, onChange: handleDescriptionChange, onSubmit: handleAddSubmit, focus: addField === 'description' })),
             React.createElement(Box, { marginTop: 1 }),
             React.createElement(Text, { dimColor: true }, t.sensitiveCommandConfig.addEditingHint)));
@@ -224,7 +226,7 @@ export default function SensitiveCommandConfigScreen({ onBack, inlineMode = fals
     const adjustedStart = Math.max(0, endIndex - viewportHeight);
     const selectedCmd = commands[selectedIndex];
     return (React.createElement(Box, { flexDirection: "column", paddingX: inlineMode ? 0 : 2, paddingY: 1 },
-        React.createElement(Text, { bold: true, color: "cyan" }, t.sensitiveCommandConfig.title),
+        React.createElement(Text, { bold: true, color: theme.colors.menuInfo }, t.sensitiveCommandConfig.title),
         React.createElement(Text, { dimColor: true }, t.sensitiveCommandConfig.subtitle),
         showSuccess && (React.createElement(Box, { marginTop: 1 },
             React.createElement(Alert, { variant: "success" }, successMessage))),
@@ -235,17 +237,17 @@ export default function SensitiveCommandConfigScreen({ onBack, inlineMode = fals
                 return null;
             }
             return (React.createElement(Text, { key: cmd.id, color: selectedIndex === index
-                    ? 'cyan'
+                    ? theme.colors.menuInfo
                     : cmd.enabled
-                        ? 'white'
-                        : 'gray', bold: selectedIndex === index, dimColor: !cmd.enabled },
+                        ? theme.colors.menuNormal
+                        : theme.colors.menuSecondary, bold: selectedIndex === index, dimColor: !cmd.enabled },
                 selectedIndex === index ? '❯ ' : '  ',
                 "[",
                 cmd.enabled ? '✓' : ' ',
                 "]",
                 ' ',
                 cmd.pattern,
-                !cmd.isPreset && (React.createElement(Text, { color: "yellow" },
+                !cmd.isPreset && (React.createElement(Text, { color: theme.colors.warning },
                     " (",
                     t.sensitiveCommandConfig.custom,
                     ")"))));
@@ -260,8 +262,8 @@ export default function SensitiveCommandConfigScreen({ onBack, inlineMode = fals
             ")",
             !selectedCmd.isPreset &&
                 ` [${t.sensitiveCommandConfig.customLabel}]`)),
-        confirmDelete && selectedCmd && (React.createElement(Text, { bold: true, color: "yellow" }, t.sensitiveCommandConfig.confirmDeleteMessage.replace('{pattern}', selectedCmd.pattern))),
-        confirmReset && (React.createElement(Text, { bold: true, color: "yellow" }, t.sensitiveCommandConfig.confirmResetMessage)),
+        confirmDelete && selectedCmd && (React.createElement(Text, { bold: true, color: theme.colors.warning }, t.sensitiveCommandConfig.confirmDeleteMessage.replace('{pattern}', selectedCmd.pattern))),
+        confirmReset && (React.createElement(Text, { bold: true, color: theme.colors.warning }, t.sensitiveCommandConfig.confirmResetMessage)),
         React.createElement(Box, { marginTop: 1 }),
         React.createElement(Text, { dimColor: true }, confirmDelete || confirmReset
             ? t.sensitiveCommandConfig.confirmHint

package/dist/ui/pages/SubAgentConfigScreen.js

@@ -5,6 +5,7 @@ import { Alert, Spinner } from '@inkjs/ui';
 import { getMCPServicesInfo } from '../../utils/mcpToolsManager.js';
 import { createSubAgent, updateSubAgent, getSubAgent, validateSubAgent, } from '../../utils/subAgentConfig.js';
 import { useI18n } from '../../i18n/index.js';
+import { useTheme } from '../contexts/ThemeContext.js';
 // Focus event handling - prevent terminal focus events from appearing as input
 const focusEventTokenRegex = /(?:\x1b)?\[[0-9;]*[IO]/g;
 const isFocusEventInput = (value) => {
@@ -39,6 +40,7 @@ const stripFocusArtifacts = (value) => {
         .replace(/[\x00-\x08\x0B\x0C\x0E-\x1F\x7F]/g, '');
 };
 export default function SubAgentConfigScreen({ onBack, onSave, inlineMode = false, agentId, }) {
+    const { theme } = useTheme();
     const { t } = useI18n();
     const [agentName, setAgentName] = useState('');
     const [description, setDescription] = useState('');
@@ -352,11 +354,11 @@ export default function SubAgentConfigScreen({ onBack, onSave, inlineMode = fals
     });
     const renderToolSelection = () => {
         return (React.createElement(Box, { flexDirection: "column" },
-            React.createElement(Text, { bold: true, color: "cyan" }, t.subAgentConfig.toolSelection),
+            React.createElement(Text, { bold: true, color: theme.colors.menuInfo }, t.subAgentConfig.toolSelection),
             isLoadingMCP && (React.createElement(Box, null,
                 React.createElement(Spinner, { label: t.subAgentConfig.loadingMCP }))),
             loadError && (React.createElement(Box, null,
-                React.createElement(Text, { color: "yellow" },
+                React.createElement(Text, { color: theme.colors.warning },
                     t.subAgentConfig.mcpLoadError,
                     " ",
                     loadError))),
@@ -365,7 +367,7 @@ export default function SubAgentConfigScreen({ onBack, onSave, inlineMode = fals
                 const selectedInCategory = category.tools.filter(tool => selectedTools.has(tool)).length;
                 return (React.createElement(Box, { key: category.name, flexDirection: "column" },
                     React.createElement(Box, null,
-                        React.createElement(Text, { color: isCurrent && currentField === 'tools' ? 'green' : 'white', bold: isCurrent && currentField === 'tools' },
+                        React.createElement(Text, { color: isCurrent && currentField === 'tools' ? theme.colors.menuSelected : theme.colors.menuNormal, bold: isCurrent && currentField === 'tools' },
                             isCurrent && currentField === 'tools' ? '▶ ' : '  ',
                             category.name,
                             " (",
@@ -376,14 +378,14 @@ export default function SubAgentConfigScreen({ onBack, onSave, inlineMode = fals
                     isCurrent && currentField === 'tools' && (React.createElement(Box, { flexDirection: "column", marginLeft: 2 }, category.tools.map((tool, toolIndex) => {
                         const isCurrentTool = toolIndex === selectedToolIndex;
                         return (React.createElement(Box, { key: tool },
-                            React.createElement(Text, { color: isCurrentTool ? 'cyan' : 'white', bold: isCurrentTool },
+                            React.createElement(Text, { color: isCurrentTool ? theme.colors.menuInfo : theme.colors.menuNormal, bold: isCurrentTool },
                                 isCurrentTool ? '❯ ' : '  ',
                                 selectedTools.has(tool) ? '[✓]' : '[ ]',
                                 " ",
                                 tool)));
                     })))));
             }),
-            React.createElement(Text, { color: "gray", dimColor: true },
+            React.createElement(Text, { color: theme.colors.menuSecondary, dimColor: true },
                 t.subAgentConfig.selectedTools,
                 " ",
                 selectedTools.size,
@@ -395,7 +397,7 @@ export default function SubAgentConfigScreen({ onBack, onSave, inlineMode = fals
     };
     return (React.createElement(Box, { flexDirection: "column", padding: 1 },
         !inlineMode && (React.createElement(Box, { marginBottom: 1 },
-            React.createElement(Text, { bold: true, color: "cyan" },
+            React.createElement(Text, { bold: true, color: theme.colors.menuInfo },
                 "\u2746",
                 ' ',
                 isEditMode
@@ -416,18 +418,18 @@ export default function SubAgentConfigScreen({ onBack, onSave, inlineMode = fals
             React.createElement(Alert, { variant: "error" }, saveError))),
         React.createElement(Box, { flexDirection: "column" },
             React.createElement(Box, { flexDirection: "column" },
-                React.createElement(Text, { bold: true, color: currentField === 'name' ? 'green' : 'white' }, t.subAgentConfig.agentName),
+                React.createElement(Text, { bold: true, color: currentField === 'name' ? theme.colors.menuSelected : theme.colors.menuNormal }, t.subAgentConfig.agentName),
                 React.createElement(Box, { marginLeft: 2 },
                     React.createElement(TextInput, { value: agentName, onChange: value => setAgentName(stripFocusArtifacts(value)), placeholder: t.subAgentConfig.agentNamePlaceholder, focus: currentField === 'name' }))),
             React.createElement(Box, { flexDirection: "column" },
-                React.createElement(Text, { bold: true, color: currentField === 'description' ? 'green' : 'white' }, t.subAgentConfig.description),
+                React.createElement(Text, { bold: true, color: currentField === 'description' ? theme.colors.menuSelected : theme.colors.menuNormal }, t.subAgentConfig.description),
                 React.createElement(Box, { marginLeft: 2 },
                     React.createElement(TextInput, { value: description, onChange: value => setDescription(stripFocusArtifacts(value)), placeholder: t.subAgentConfig.descriptionPlaceholder, focus: currentField === 'description' }))),
             React.createElement(Box, { flexDirection: "column" },
-                React.createElement(Text, { bold: true, color: currentField === 'role' ? 'green' : 'white' }, t.subAgentConfig.roleOptional),
+                React.createElement(Text, { bold: true, color: currentField === 'role' ? theme.colors.menuSelected : theme.colors.menuNormal }, t.subAgentConfig.roleOptional),
                 React.createElement(Box, { marginLeft: 2 },
                     React.createElement(TextInput, { value: role, onChange: value => setRole(stripFocusArtifacts(value)), placeholder: t.subAgentConfig.rolePlaceholder, focus: currentField === 'role' }))),
             renderToolSelection(),
             React.createElement(Box, { marginTop: 1 },
-                React.createElement(Text, { color: "gray", dimColor: true }, t.subAgentConfig.navigationHint)))));
+                React.createElement(Text, { color: theme.colors.menuSecondary, dimColor: true }, t.subAgentConfig.navigationHint)))));
 }

package/dist/ui/pages/SubAgentListScreen.js

@@ -3,7 +3,9 @@ import { Box, Text, useInput } from 'ink';
 import { Alert } from '@inkjs/ui';
 import { getSubAgents, deleteSubAgent, } from '../../utils/subAgentConfig.js';
 import { useTerminalSize } from '../../hooks/useTerminalSize.js';
+import { useTheme } from '../contexts/ThemeContext.js';
 export default function SubAgentListScreen({ onBack, onAdd, onEdit, inlineMode = false, }) {
+    const { theme } = useTheme();
     const { columns } = useTerminalSize();
     const [agents, setAgents] = useState([]);
     const [selectedIndex, setSelectedIndex] = useState(0);
@@ -88,7 +90,7 @@ export default function SubAgentListScreen({ onBack, onAdd, onEdit, inlineMode =
     });
     return (React.createElement(Box, { flexDirection: "column", padding: 1 },
         !inlineMode && (React.createElement(Box, { marginBottom: 1 },
-            React.createElement(Text, { bold: true, color: "cyan" }, "\u2746 Sub-Agent Management"))),
+            React.createElement(Text, { bold: true, color: theme.colors.menuInfo }, "\u2746 Sub-Agent Management"))),
         deleteSuccess && (React.createElement(Box, { marginBottom: 1 },
             React.createElement(Alert, { variant: "success" }, "Sub-agent deleted successfully!"))),
         showDeleteConfirm && agents[selectedIndex] && (React.createElement(Box, { marginBottom: 1 },
@@ -98,9 +100,9 @@ export default function SubAgentListScreen({ onBack, onAdd, onEdit, inlineMode =
                 "\"? (Y/N)"))),
         React.createElement(Box, { flexDirection: "column" },
             agents.length === 0 ? (React.createElement(Box, { flexDirection: "column" },
-                React.createElement(Text, { color: "gray" }, "No sub-agents configured yet."),
-                React.createElement(Text, { color: "gray" }, "Press 'A' to add a new sub-agent."))) : (React.createElement(Box, { flexDirection: "column" },
-                React.createElement(Text, { bold: true, color: "cyan" },
+                React.createElement(Text, { color: theme.colors.menuSecondary }, "No sub-agents configured yet."),
+                React.createElement(Text, { color: theme.colors.menuSecondary }, "Press 'A' to add a new sub-agent."))) : (React.createElement(Box, { flexDirection: "column" },
+                React.createElement(Text, { bold: true, color: theme.colors.menuInfo },
                     "Sub-Agents (",
                     agents.length,
                     "):"),
@@ -108,22 +110,22 @@ export default function SubAgentListScreen({ onBack, onAdd, onEdit, inlineMode =
                     const isSelected = index === selectedIndex;
                     return (React.createElement(Box, { key: agent.id, flexDirection: "column" },
                         React.createElement(Box, null,
-                            React.createElement(Text, { color: isSelected ? 'green' : 'white', bold: isSelected },
+                            React.createElement(Text, { color: isSelected ? theme.colors.menuSelected : theme.colors.menuNormal, bold: isSelected },
                                 isSelected ? '❯ ' : '  ',
                                 agent.name)),
                         isSelected && (React.createElement(Box, { flexDirection: "column", marginLeft: 3 },
-                            React.createElement(Text, { color: "gray" },
+                            React.createElement(Text, { color: theme.colors.menuSecondary },
                                 "Description:",
                                 ' ',
                                 truncateText(agent.description || 'No description', 'Description: '.length)),
-                            React.createElement(Text, { color: "gray" },
+                            React.createElement(Text, { color: theme.colors.menuSecondary },
                                 "Tools: ",
                                 agent.tools.length,
                                 " selected"),
-                            React.createElement(Text, { color: "gray", dimColor: true },
+                            React.createElement(Text, { color: theme.colors.menuSecondary, dimColor: true },
                                 "Updated: ",
                                 new Date(agent.updatedAt).toLocaleString())))));
                 }))),
             React.createElement(Box, { marginTop: 1 },
-                React.createElement(Text, { color: "gray", dimColor: true }, "\u2191\u2193: Navigate | Enter: Edit | A: Add New | D: Delete | Esc: Back")))));
+                React.createElement(Text, { color: theme.colors.menuSecondary, dimColor: true }, "\u2191\u2193: Navigate | Enter: Edit | A: Add New | D: Delete | Esc: Back")))));
 }