@tcbs/react-native-mazic-ui 0.1.1 → 0.1.2

package/package.json

@@ -13,13 +13,13 @@
     "react-native-vector-icons"
   ],
   "author": "TechCraft By Subrata <subraatakumar@gmail.com>",
-  "version": "0.1.1",
-    "publishConfig": {
+  "version": "0.1.2",
+  "publishConfig": {
     "access": "public"
   },
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
-  "types": "lib/types/index.d.ts",
+  "types": "lib/index.d.ts",
   "react-native": "src/index.ts",
   "files": [
     "lib/",

package/src/components/TcbsButton.tsx

@@ -1,4 +1,5 @@
 import React, { useMemo } from 'react';
+import { Appearance } from 'react-native';
 import { TouchableOpacity, Text, View ,  StyleProp, ViewStyle, TextStyle } from 'react-native';
 import AntDesign from 'react-native-vector-icons/AntDesign';
 import Feather from 'react-native-vector-icons/Feather';
@@ -33,7 +34,8 @@ const FONT_SIZES: Record<ButtonSize, number> = {
   [BUTTON_SIZE.SMALL]: 14,
 };
 
-const BORDER_RADIUSES: Record<ButtonSize, number> = {
+// Support for BORDER_RADIUS.NONE and BORDER_RADIUS.FULL (50%)
+const BORDER_RADIUSES: Record<ButtonSize, number | string> = {
   [BUTTON_SIZE.LARGE]: BORDER_RADIUS.MEDIUM,
   [BUTTON_SIZE.MEDIUM]: BORDER_RADIUS.SMALL,
   [BUTTON_SIZE.SMALL]: BORDER_RADIUS.SMALL,
@@ -72,25 +74,35 @@ export const TcbsButton: React.FC<TcbsButtonProps> = ({
   accessibilityHint,
   accessibilityRole = 'button',
   accessibilityState,
-  themeColor,
-  screenBgColor,
 }) => {
-  // Use theme from store if not provided as prop
-  const { colors, mode } = useTcbsColorStore();
-  const effectiveThemeColor = themeColor ?? colors[mode];
+  // Use themeColors from store if not provided as prop
+  const { themeColors, tcbsTheme } = useTcbsColorStore();
+  const effectiveThemeColor = themeColors;
   // Normalize colors: if only one color is set, use it for all
   const normalizedColors = {
     btnColor: effectiveThemeColor?.btnColor ?? effectiveThemeColor?.themeColor ?? '#007AFF',
     btnBorderColor: effectiveThemeColor?.btnBorderColor ?? effectiveThemeColor?.btnColor ?? '#007AFF',
     btnIconColor: effectiveThemeColor?.btnIconColor,
-    btnTextColor: effectiveThemeColor?.btnTextColor ?? effectiveThemeColor?.btnTxtColor  ,
+    btnTextColor: effectiveThemeColor?.btnTextColor ?? effectiveThemeColor?.btnTxtColor,
     themeColor: effectiveThemeColor?.themeColor ?? effectiveThemeColor?.btnColor ?? '#007AFF',
   };
 
   const buttonStyle = useMemo<StyleProp<ViewStyle>>(() => {
+    const height = HEIGHTS[size];
+    let computedBorderRadius: number | string;
+    if (borderRadius === BORDER_RADIUS.NONE) {
+      computedBorderRadius = 0;
+    } else if (borderRadius === BORDER_RADIUS.FULL) {
+      computedBorderRadius = height / 2;
+    } else if (borderRadius !== undefined) {
+      computedBorderRadius = borderRadius;
+    } else {
+      computedBorderRadius = BORDER_RADIUSES[size];
+    }
+
     const baseStyle: ViewStyle = {
-      height: HEIGHTS[size],
-      borderRadius: borderRadius ?? BORDER_RADIUSES[size],
+      height,
+      borderRadius: computedBorderRadius,
       alignItems: 'center',
       justifyContent: 'center',
       opacity: disabled ? 0.6 : 1,
@@ -129,10 +141,20 @@ export const TcbsButton: React.FC<TcbsButtonProps> = ({
   }, [size, variant, normalizedColors, style, disabled, borderRadius]);
 
   const themedTextStyle = useMemo<TextStyle>(() => {
-    const baseTextColor =
-      variant === BUTTON_VARIANT.PRIMARY
+    let baseTextColor;
+    if (variant === BUTTON_VARIANT.PRIMARY) {
+      baseTextColor = normalizedColors.btnTextColor || '#FFFFFF';
+    } else if (variant === BUTTON_VARIANT.NO_BORDER) {
+      let colorScheme = tcbsTheme;
+      if (tcbsTheme === 'system') {
+        colorScheme = Appearance.getColorScheme() || 'light';
+      }
+      baseTextColor = colorScheme === 'dark'
         ? normalizedColors.btnTextColor || '#FFFFFF'
-        : variant === BUTTON_VARIANT.NO_BORDER && mode === 'dark' ? normalizedColors.btnTextColor || "#FFFFFF" : normalizedColors?.btnColor || normalizedColors?.themeColor || "#FFFFFF";
+        : normalizedColors?.btnColor || '#007AFF';
+    } else {
+      baseTextColor = normalizedColors?.btnColor || '#FFFFFF';
+    }
 
     return {
       color: baseTextColor,
@@ -140,13 +162,13 @@ export const TcbsButton: React.FC<TcbsButtonProps> = ({
       fontWeight: '700',
       ...(textStyle as TextStyle),
     };
-  }, [size, variant, normalizedColors, textStyle]);
+  }, [size, variant, normalizedColors, textStyle, tcbsTheme]);
 
   const renderIcon = (IconComponent: IconComponentType) => (
     <IconComponent
       name={iconName!}
       size={iconSize || FONT_SIZES[size] * 2}
-      color={iconColor || normalizedColors.btnIconColor || themedTextStyle.color}
+      color={iconColor || themedTextStyle.color}
       style={
         iconPosition === 'top'
           ? { marginBottom: 2 }
@@ -230,6 +252,5 @@ export const TcbsButton: React.FC<TcbsButtonProps> = ({
   );
 };
 
-// Export constants for use in consuming applications
 export { BUTTON_SIZE, BUTTON_VARIANT, BORDER_RADIUS };
 export type { ButtonSize, ButtonVariant, IconGroupType, IconPosition };

package/src/components/TcbsButton.types.ts

@@ -17,12 +17,15 @@ export const BUTTON_VARIANT = {
   PRIMARY: 'primary',
   SECONDARY: 'secondary',
   NO_BORDER: 'no_border',
+
 } as const;
 
 export const BORDER_RADIUS = {
   SMALL: 8,
   MEDIUM: 12,
   LARGE: 16,
+  NONE: 0,
+  FULL: '50%',
 } as const;
 
 export type ButtonSize = (typeof BUTTON_SIZE)[keyof typeof BUTTON_SIZE];

package/src/components/ThemeModal.tsx

@@ -0,0 +1,123 @@
+import React from 'react';
+import { Modal, Pressable, TouchableOpacity, View, Text, StyleSheet } from 'react-native';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import Entypo from 'react-native-vector-icons/Entypo';
+import { useTcbsColorStore } from '../store/themeStore';
+import { BUTTON_VARIANT, TcbsButton } from './TcbsButton';
+
+export interface ThemeModalProps {
+  visible: boolean;
+  onClose: () => void;
+}
+
+export const ThemeModal: React.FC<ThemeModalProps> = ({ visible, onClose }) => {
+  const { tcbsTheme, setTcbsTheme, themeColors } = useTcbsColorStore();
+  // You can customize these colors or get them from your theme
+  const colors = {
+    menuCardBkgColor: themeColors.screenBgColor || '#fff',
+    textDark: themeColors.btnTextColor || '#222',
+    textGray: '#888',
+  };
+
+  return (
+    <Modal
+      transparent={true}
+      animationType="fade"
+      visible={visible}
+      onRequestClose={onClose}
+    >
+      <Pressable style={styles.modalOverlay} onPress={onClose}>
+        <Pressable style={[styles.modalCard, { backgroundColor: colors.menuCardBkgColor }]}
+          onPress={() => {}} // Prevent closing when pressing inside card
+        >
+          <View style={styles.modalClose}>
+            <TcbsButton
+              onPress={onClose}
+              iconName="close"
+              iconPosition="left"
+              variant={BUTTON_VARIANT.NO_BORDER}
+              iconSize={22}
+              accessibilityLabel="Close"
+              style={{ padding: 8, marginRight: 0, minWidth: 0, minHeight: 0, alignSelf: 'flex-end' }}
+            />
+          </View>
+          <Text style={[styles.modalTitle, { color: colors.textDark }]}>Theme</Text>
+          <Text style={[styles.modalSubtitle, { color: colors.textGray }]}>Choose how the app looks on this device.</Text>
+          <View style={{ marginTop: 18 }}>
+            <TcbsButton
+              title="Light"
+              onPress={() => setTcbsTheme('light')}
+              style={{ marginBottom: 8 }}
+              variant={tcbsTheme === 'light' ? 'primary' : 'secondary'}
+              iconGroup="Ionicons"
+              iconName="sunny"
+              iconPosition="left"
+              textStyle={{ flex: 1, textAlign: 'center' }}
+            />
+            <TcbsButton
+              title="Dark"
+              onPress={() => setTcbsTheme('dark')}
+              style={{ marginBottom: 8 }}
+              variant={tcbsTheme === 'dark' ? 'primary' : 'secondary'}
+              iconGroup="Ionicons"
+              iconName="moon"
+              iconPosition="left"
+              textStyle={{ flex: 1, textAlign: 'center' }}
+            />
+            <TcbsButton
+              title="System (default)"
+              onPress={() => setTcbsTheme('system')}
+              variant={tcbsTheme === 'system' ? 'primary' : 'secondary'}
+              iconGroup="Ionicons"
+              iconName="settings"
+              iconPosition="left"
+              textStyle={{ flex: 1, textAlign: 'center' }}
+            />
+          </View>
+        </Pressable>
+      </Pressable>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.3)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  modalCard: {
+    minWidth: 300,
+    borderRadius: 16,
+    padding: 24,
+    alignItems: 'stretch',
+    shadowColor: '#000',
+    shadowOpacity: 0.15,
+    shadowRadius: 12,
+    shadowOffset: { width: 0, height: 4 },
+    elevation: 4,
+  },
+  modalClose: {
+    position: 'absolute',
+    top: 8,
+    right: 8,
+    zIndex: 2,
+  },
+  modalTitle: {
+    fontSize: 20,
+    fontWeight: '700',
+    marginTop: 8,
+    marginBottom: 2,
+    textAlign: 'center',
+  },
+  modalSubtitle: {
+    fontSize: 14,
+    fontWeight: '400',
+    marginBottom: 8,
+    textAlign: 'center',
+  },
+});
+
+export default ThemeModal;

package/src/index.ts

@@ -12,3 +12,4 @@ export {
 	IconComponentType,
 } from './components/TcbsButton.types';
 export { useTcbsColorStore } from './store/themeStore';
+export {ThemeModal} from './components/ThemeModal';

package/src/store/themeStore.ts

@@ -1,4 +1,13 @@
 import { create } from 'zustand';
+import { Appearance } from 'react-native';
+import { MMKV } from 'react-native-mmkv';
+
+// MMKV instance for theme persistence
+const storage = new MMKV();
+const THEME_KEY = 'tcbsTheme';
+
+// Store the listener subscription so we can remove it
+let appearanceListener: { remove: () => void } | null = null;
 
 export type ThemeColor = {
   btnColor: string;
@@ -6,10 +15,30 @@ export type ThemeColor = {
   btnIconColor?: string;
   themeColor: string;
   btnTextColor: string;
+  tabBarIconActiveColor?: string;
+  tabBarIconInactiveColor?: string;
+  primaryColor?: string;
+  secondaryColor?: string;
+  tertiaryColor?: string;
   screenBgColor?: string;
+  modalBgColor?: string;
+  modalHeaderBgColor?: string;
+  modalCardBgColor?: string;
+  textPrimary?: string;
+  textSecondary?: string;
+  borderColor?: string;
+  dividerColor?: string;
+  inputBgColor?: string;
+  inputBorderColor?: string;
+  cardBgColor?: string;
+  cardBorderColor?: string;
+  accentColor?: string;
+  errorColor?: string;
+  successColor?: string;
+  warningColor?: string;
 };
 
-export type ThemeMode = 'light' | 'dark';
+export type ThemeMode = 'light' | 'dark' | 'system';
 
 export type ThemeColors = {
   light: ThemeColor;
@@ -18,49 +47,277 @@ export type ThemeColors = {
 
 export interface ThemeStore {
   colors: ThemeColors;
-  mode: ThemeMode;
+  tcbsTheme: ThemeMode;
+  themeColors: ThemeColor;
+  /**
+   * Returns the current theme as 'light' or 'dark' (never 'system').
+   * If tcbsTheme is 'system', resolves to the current system color scheme.
+   */
+  currentThemeMode: 'light' | 'dark';
   setTcbsColor: (colors: Partial<ThemeColor> & { light?: Partial<ThemeColor>; dark?: Partial<ThemeColor> }) => void;
   setTcbsTheme: (mode: ThemeMode) => void;
+  toggleTcbsTheme: () => void;
+  setMazicColor: (baseColor: string) => void;
 }
 
 const defaultColors: ThemeColors = {
   light: {
-    // btnColor: '#007AFF',
-    // btnBorderColor: '#007AFF',
-    // btnIconColor: '#16a62bff',
-    // themeColor: '#007AFF',
-    // btnTextColor: '#FFFFFF',
+    // You can set initial defaults here if needed, or leave them empty
+    btnColor: '#007AFF',
+    btnBorderColor: '#007AFF',
+    btnIconColor: '#FFFFFF',
+    themeColor: '#007AFF',
+    btnTextColor: '#FFFFFF',
   },
   dark: {
-    // btnColor: '#222222',
-    // btnBorderColor: '#222222',
-    // btnIconColor: '#FFFFFF',
-    // themeColor: '#222222',
-    // btnTextColor: '#FFFFFF',
+    btnColor: '#222222',
+    btnBorderColor: '#222222',
+    btnIconColor: '#FFFFFF',
+    themeColor: '#222222',
+    btnTextColor: '#FFFFFF',
   },
 };
 
-export const useTcbsColorStore = create<ThemeStore>((set: (fn: (state: ThemeStore) => Partial<ThemeStore>) => void) => ({
-  colors: defaultColors,
-  mode: 'light',
-  setTcbsColor: (colors: Partial<ThemeColor> & { light?: Partial<ThemeColor>; dark?: Partial<ThemeColor> }) => {
-    set((state: ThemeStore) => {
-      let newColors = { ...state.colors };
-      // If colors for both themes are provided
-      if (colors.light || colors.dark) {
-        if (colors.light) {
-          newColors.light = { ...newColors.light, ...colors.light };
-        }
-        if (colors.dark) {
-          newColors.dark = { ...newColors.dark, ...colors.dark };
+// Try to load persisted theme, fallback to 'light'. If 'system', use current system color scheme.
+const defaultTheme = storage.getString(THEME_KEY) as ThemeMode | undefined || 'light';
+
+// Helper functions for color manipulation
+const hexToRgb = (hex: string): { r: number; g: number; b: number } | null => {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result ? {
+    r: parseInt(result[1], 16),
+    g: parseInt(result[2], 16),
+    b: parseInt(result[3], 16)
+  } : null;
+};
+
+const rgbToHex = (r: number, g: number, b: number): string => {
+  return '#' + [r, g, b].map(x => {
+    const hex = Math.round(x).toString(16);
+    return hex.length === 1 ? '0' + hex : hex;
+  }).join('');
+};
+
+const adjustBrightness = (hex: string, percent: number): string => {
+  const rgb = hexToRgb(hex);
+  if (!rgb) return hex;
+  
+  const adjust = (value: number) => Math.max(0, Math.min(255, value + (255 * percent / 100)));
+  return rgbToHex(adjust(rgb.r), adjust(rgb.g), adjust(rgb.b));
+};
+
+// NEW HELPER: Determines if a color is dark enough to require white text
+const isColorDark = (hex: string): boolean => {
+  const rgb = hexToRgb(hex);
+  if (!rgb) return true; // Default to white text if color is invalid
+  // Calculate Luma (YIQ method is good for perceived brightness)
+  // Formula: (R * 299 + G * 587 + B * 114) / 1000
+  const luma = (0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b) / 255;
+  // Threshold 0.45 is slightly lower than standard 0.5, favoring white text
+  return luma < 0.45;
+};
+
+const addAlpha = (hex: string, alpha: number): string => {
+  const alphaHex = Math.round(alpha * 255).toString(16).padStart(2, '0');
+  return hex + alphaHex;
+};
+
+
+export const useTcbsColorStore = create<ThemeStore>((set: (fn: (state: ThemeStore) => Partial<ThemeStore>) => void, get) => {
+  // Helper to get the current theme color
+  const getThemeColors = (theme: ThemeMode, colors: ThemeColors): ThemeColor => {
+    if (theme === 'light' || theme === 'dark') {
+      return colors[theme];
+    } else {
+      // system: use Appearance API
+      const colorScheme = Appearance.getColorScheme?.() || 'light';
+      return colors[colorScheme as 'light' | 'dark'] || colors.light;
+    }
+  };
+
+  // Initial state
+  const initialColors = defaultColors;
+  const initialTheme = defaultTheme;
+  const initialThemeColors = getThemeColors(initialTheme, initialColors);
+
+  // Listen to system theme changes if needed
+  if (initialTheme === 'system' && !appearanceListener) {
+    appearanceListener = Appearance.addChangeListener?.(({ colorScheme }) => {
+      set((state: ThemeStore) => ({
+        themeColors: state.colors[(colorScheme as 'light' | 'dark') || 'light']
+      }));
+    });
+  }
+
+  return {
+    colors: initialColors,
+    tcbsTheme: initialTheme,
+    themeColors: initialThemeColors,
+    get currentThemeMode() {
+      const state = get();
+      if (state.tcbsTheme === 'light' || state.tcbsTheme === 'dark') {
+        return state.tcbsTheme;
+      }
+      // system: use Appearance API
+      const colorScheme = Appearance.getColorScheme?.() || 'light';
+      return (colorScheme === 'dark' ? 'dark' : 'light');
+    },
+    setTcbsColor: (colors: Partial<ThemeColor> & { light?: Partial<ThemeColor>; dark?: Partial<ThemeColor> }) => {
+      set((state: ThemeStore) => {
+        let newColors = { ...state.colors };
+        // If colors for both themes are provided
+        if (colors.light || colors.dark) {
+          if (colors.light) {
+            newColors.light = { ...newColors.light, ...colors.light };
+          }
+          if (colors.dark) {
+            newColors.dark = { ...newColors.dark, ...colors.dark };
+          }
+        } else {
+          // If only one set, update both themes
+          newColors.light = { ...newColors.light, ...colors };
+          newColors.dark = { ...newColors.dark, ...colors };
         }
-      } else {
-        // If only one set, update both themes
-        newColors.light = { ...newColors.light, ...colors };
-        newColors.dark = { ...newColors.dark, ...colors };
+        // Update themeColors as well
+        const themeColors = getThemeColors(state.tcbsTheme, newColors);
+        return { colors: newColors, themeColors };
+      });
+    },
+    setTcbsTheme: (newTheme: ThemeMode) => {
+      // Persist user selection
+      storage.set(THEME_KEY, newTheme);
+      // Remove previous listener if exists
+      if (appearanceListener) {
+        appearanceListener.remove();
+        appearanceListener = null;
       }
-      return { colors: newColors };
-    });
-  },
-  setTcbsTheme: (mode: ThemeMode) => set((state) => ({ ...state, mode })),
-}));
+      // If new theme is system, add listener
+      if (newTheme === 'system') {
+        appearanceListener = Appearance.addChangeListener?.(({ colorScheme }) => {
+          set((state: ThemeStore) => ({
+            themeColors: state.colors[(colorScheme as 'light' | 'dark') || 'light']
+          }));
+        });
+      }
+      // Update themeColors as well
+      set((state: ThemeStore) => ({
+        tcbsTheme: newTheme,
+        themeColors: getThemeColors(newTheme, state.colors)
+      }));
+    },
+    toggleTcbsTheme: () => {
+      set((state: ThemeStore) => {
+        const themes: ThemeMode[] = ['light', 'dark', 'system'];
+        const currentIdx = themes.indexOf(state.tcbsTheme);
+        const nextTheme = themes[(currentIdx + 1) % themes.length];
+        // Note: setTcbsTheme is called outside the state update, but here it's called internally
+        // which is a common pattern in zustand actions.
+        // @ts-ignore
+        state.setTcbsTheme(nextTheme);
+        return {};
+      });
+    },
+    
+    // REWRITTEN FUNCTION using hardcoded neutrals for better UI contrast
+    setMazicColor: (baseColor: string) => {
+      // Determine the best text color for the button based on the base color's brightness
+      // const buttonTextColor = isColorDark(baseColor) ? '#FFFFFF' : '#000000';
+      const buttonTextColor = '#FFFFFF' ;
+      const secondaryBaseColor = adjustBrightness(baseColor, -10); // A slightly darker shade for accents
+
+      // --- Light Theme Palette ---
+      const lightColors: ThemeColor = {
+        // Primary & Button Colors (baseColor is the accent)
+        btnColor: addAlpha(baseColor,1),
+        btnBorderColor: baseColor,
+        btnIconColor: buttonTextColor,
+        themeColor: baseColor,
+        btnTextColor: buttonTextColor,
+
+        tabBarIconActiveColor: buttonTextColor,
+        tabBarIconInactiveColor: addAlpha("#000000",0.4),
+
+        primaryColor:  addAlpha(baseColor,1),
+        secondaryColor: addAlpha(baseColor,0.7),
+        tertiaryColor: addAlpha(baseColor,0.1),
+
+        // Backgrounds (Clean white/near-white neutrals)
+        screenBgColor: addAlpha(baseColor,0.1), // Pure white
+        modalBgColor: addAlpha('#000000', 0.5), // Standard dark overlay
+        modalHeaderBgColor: '#F0F0F0', // Light gray
+        modalCardBgColor: '#FAFAFA', // Off-white for cards/modals
+
+        // Text Colors (High contrast black/dark gray)
+        textPrimary: '#1F1F1F', // Very dark gray
+        textSecondary: '#6B7280', // Medium gray
+
+        // Borders & Dividers (Very subtle grays)
+        borderColor: '#E5E7EB',
+        dividerColor: '#F3F4F6',
+
+        // Inputs & Cards
+        inputBgColor: '#FFFFFF',
+        inputBorderColor: '#D1D5DB',
+        cardBgColor: '#FFFFFF',
+        cardBorderColor: '#E5E7EB',
+
+        // Status Colors (Standard, high-contrast semantic colors)
+        accentColor: secondaryBaseColor,
+        errorColor: '#DC2626',
+        successColor: '#16A34A',
+        warningColor: '#F59E0B',
+      };
+
+      // --- Dark Theme Palette ---
+      const darkColors: ThemeColor = {
+        // Primary & Button Colors
+        btnColor: addAlpha(baseColor,1),
+        btnBorderColor: baseColor,
+        btnIconColor: buttonTextColor,
+        themeColor: baseColor,
+        btnTextColor: buttonTextColor,
+
+        tabBarIconActiveColor: buttonTextColor,
+        tabBarIconInactiveColor: addAlpha("#000000",0.4),
+        primaryColor:  addAlpha(baseColor,1),
+        secondaryColor: addAlpha(baseColor,0.7),
+        tertiaryColor: addAlpha(baseColor,0.2),
+
+        // Backgrounds (Clean dark/near-black neutrals)
+        screenBgColor: addAlpha(baseColor,0.8), // Very dark gray
+        modalBgColor: addAlpha('#000000', 0.8), // Darker overlay
+        modalHeaderBgColor: '#1F1F1F', // Slightly lighter dark gray
+        modalCardBgColor: '#2C2C2C', // Medium dark gray for cards/modals
+
+        // Text Colors (High contrast white/light gray)
+        textPrimary: '#FFFFFF', // Pure white
+        textSecondary: '#A0A0A0', // Light gray
+
+        // Borders & Dividers (Subtle dark grays)
+        borderColor: '#374151',
+        dividerColor: '#2C2C2C',
+
+        // Inputs & Cards
+        inputBgColor: '#1F1F1F',
+        inputBorderColor: '#374151',
+        cardBgColor: '#1F1F1F',
+        cardBorderColor: '#374151',
+
+        // Status Colors (Brighter semantic colors for dark background)
+        accentColor: secondaryBaseColor,
+        errorColor: '#EF4444',
+        successColor: '#22C55E',
+        warningColor: '#FBBF24',
+      };
+      
+      set((state: ThemeStore) => {
+        const newColors = {
+          light: lightColors,
+          dark: darkColors,
+        };
+        const themeColors = getThemeColors(state.tcbsTheme, newColors);
+        return { colors: newColors, themeColors };
+      });
+    }
+  };
+});