Customizing Theme Colors

This guide explains how to customize the app's colors for both light and dark modes.

Where to Change Colors

You need to modify two files to completely change the app's color scheme:

1. /master-app/tailwind.config.js - For styling with Tailwind classes
2. /master-app/app/contexts/ThemeColors.tsx - For components using direct styles

Current Color Palette

The app uses these main colors:

Step 1: Update Tailwind Config

1. Open the configuration file

Open the file master-app/tailwind.config.js in your code editor.

2. Locate the colors section

Find the colors section in the configuration file:

colors: {
  // Light theme colors
  highlight: '#0EA5E9',
  light: {
    primary: '#ffffff', // White
    secondary: '#E2E8F0', // Light gray
    text: '#000000', // Black
    subtext: '#64748B'
  },
  // Dark theme colors
  dark: {
    primary: '#14212D', // Black
    secondary: '#324650',
    darker: '#0C161F',
    text: '#ffffff', // White
    subtext: '#A1A8AF'
  },
},

3. Change the color values

Simply replace the color hex values with your preferred colors:

• To change the accent color: Update the highlight value
• To change light mode colors: Update values in the light object
• To change dark mode colors: Update values in the dark object

For example, to change the accent color to purple and the light mode background to light blue:

colors: {
  highlight: '#8B5CF6', // Changed from blue to purple
  light: {
    primary: '#F0F9FF', // Changed from white to light blue
    secondary: '#E2E8F0',
    text: '#000000',
    subtext: '#64748B'
  },
  // Dark theme colors remain the same
  dark: {
    primary: '#14212D',
    secondary: '#324650',
    darker: '#0C161F',
    text: '#ffffff',
    subtext: '#A1A8AF'
  },
},

Step 2: Update Theme Colors Context

You must also update the direct color values in the ThemeColors context:

1. Open the ThemeColors file

Open the file master-app/app/contexts/ThemeColors.tsx in your code editor.

2. Locate the color definitions

Find the useThemeColors hook that defines the color values:

export const useThemeColors = () => {
  const { isDark } = useTheme();
 
  return {
    icon: isDark ? 'white' : 'black',
    bg: isDark ? '#14212D' : '#ffffff',
    secondary: isDark ? '#324650' : '#E2E8F0',
    highlight: '#0EA5E9',    
    lightDark: isDark ? '#262626' : 'white',
    border: isDark ? '#404040' : '#E2E8F0',
    text: isDark ? 'white' : 'black',
    placeholder: isDark ? '#697F8D' : '#A5ABB4',
    switch: isDark ? 'rgba(255,255,255,0.4)' : '#ccc',
    chatBg: isDark ? '#262626' : '#efefef',
    isDark
  };
};

3. Update the color values

Change the color values to match those you set in the tailwind.config.js file:

export const useThemeColors = () => {
  const { isDark } = useTheme();
 
  return {
    icon: isDark ? 'white' : 'black',
    bg: isDark ? '#14212D' : '#F0F9FF', // Updated to match light.primary
    secondary: isDark ? '#324650' : '#E2E8F0',
    highlight: '#8B5CF6', // Updated to match highlight    
    lightDark: isDark ? '#262626' : 'white',
    border: isDark ? '#404040' : '#E2E8F0',
    text: isDark ? 'white' : 'black',
    placeholder: isDark ? '#697F8D' : '#A5ABB4',
    switch: isDark ? 'rgba(255,255,255,0.4)' : '#ccc',
    chatBg: isDark ? '#262626' : '#efefef',
    isDark
  };
};

Step 3: Save and restart

After saving both files, restart your development server for the changes to take effect.

Tips for Choosing Colors

• Maintain contrast: Ensure text is readable against backgrounds
• Keep highlight colors consistent: Use the same highlight color in both light and dark modes
• Test both themes: Check how your colors look in both light and dark modes
• Keep both files in sync: Make sure the colors in tailwind.config.js and ThemeColors.tsx match

Color Variables Reference

In tailwind.config.js:

• highlight: Main accent color for buttons and interactive elements
• light.primary: Main background color in light mode
• light.secondary: Secondary background color in light mode
• light.text: Main text color in light mode
• light.subtext: Secondary text color in light mode
• dark.primary: Main background color in dark mode
• dark.secondary: Secondary background color in dark mode
• dark.text: Main text color in dark mode
• dark.subtext: Secondary text color in dark mode

In ThemeColors.tsx:

• bg: Primary background color
• secondary: Secondary background color
• highlight: Accent color for buttons and interactive elements
• text: Primary text color
• border: Border color
• placeholder: Placeholder text color