how-to-guide

How to Customize the React Frontend Appearance and Settings in AI Hedge Fund

March 9, 2026 virattt/ai-hedge-fund ↗

You can customize the React frontend appearance and settings by modifying the Tailwind configuration, extending the ThemeProvider component, and updating the UI primitives in the components directory.

The AI Hedge Fund project by virattt provides a modern React frontend built with Tailwind CSS and Next.js themes. When you customize the React frontend appearance and settings, you work within a layered architecture that separates global theme state, Tailwind styling utilities, and reusable UI components.

Understanding the Theming Architecture

The frontend uses next-themes to manage light, dark, and system preferences across the application. The architecture consists of three main layers that you will interact with when customizing appearance.

ThemeProvider wraps the entire React tree and injects the selected theme class onto the <html> element. Located at app/frontend/src/providers/theme-provider.tsx, this component persists user preferences in localStorage and handles system preference detection.

Appearance Settings provide the UI for theme selection. The app/frontend/src/components/settings/appearance.tsx file exports ThemeSettings, which renders buttons for Light, Dark, and System modes. When a user clicks a button, it calls setTheme(id) from the next-themes hook.

Tailwind Configuration defines the visual foundation. The app/frontend/tailwind.config.ts file specifies color palettes, dark mode strategy (class based), and custom utility classes that components consume.

Customizing the Theme Palette

To change colors, spacing, or typography across the entire application, modify the Tailwind configuration file.

Modifying Colors and Dark Mode

Edit app/frontend/tailwind.config.ts to override the default palette. The project uses CSS variables and Tailwind's dark: variant for automatic switching.

// app/frontend/tailwind.config.ts
export default {
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        primary: {
          light: '#0ea5e9',
          dark: '#14b8a6',
        },
        panel: {
          DEFAULT: 'var(--color-panel)',
          foreground: 'var(--color-panel-foreground)',
        },
      },
    },
  },
};

After modifying the config, restart the Vite development server to rebuild the CSS bundle.

Adding Custom Theme Options

You can extend beyond the default Light, Dark, and System options by adding custom themes like "High Contrast" or "Midnight Blue."

Extending the Theme Provider

Update app/frontend/src/providers/theme-provider.tsx to include the new theme in the allowed list:

<NextThemesProvider
  attribute="class"
  defaultTheme="system"
  enableSystem
  storageKey="theme"
  themes={['light', 'dark', 'system', 'high-contrast']}
>
  {children}
</NextThemesProvider>

Updating the Settings UI

Modify app/frontend/src/components/settings/appearance.tsx to add the new option to the themes array:

const themes = [
  { id: 'light', name: 'Light', description: 'Clean and bright', icon: Sun },
  { id: 'dark', name: 'Dark', description: 'Easy on the eyes', icon: Moon },
  { id: 'high-contrast', name: 'High Contrast', description: 'Maximum accessibility', icon: Zap },
];

Creating Custom Variants

Add a Tailwind plugin to support the new theme variant:

// tailwind.config.ts
plugins: [
  function({ addVariant }) {
    addVariant('high-contrast', ({ modifySelectors, separator }) => {
      modifySelectors(({ className }) => {
        return `.high-contrast${separator}${className}`;
      });
    });
  },
],

Now you can use high-contrast:bg-yellow-400 in your component classes.

Modifying UI Components

Individual UI primitives live in app/frontend/src/components/ui/. These are thin wrappers around Tailwind classes that you can modify to change appearance globally.

Customizing the Button Component

To increase default button padding across the application, edit app/frontend/src/components/ui/button.tsx:

// src/components/ui/button.tsx
const buttonVariants = cva(
  "inline-flex items-center justify-center rounded-md text-sm font-medium",
  {
    variants: {
      size: {
        default: "h-10 px-4 py-2",
        large: "h-12 px-6 text-lg",
        icon: "h-10 w-10",
      },
    },
    defaultVariants: {
      size: "default",
    },
  }
);

Changes here propagate to every component that imports the Button primitive.

Programmatic Theme Control

You can access and modify the theme state programmatically using the useTheme hook from next-themes.

Switching Themes Dynamically

import { useTheme } from 'next-themes';

export function ToggleThemeButton() {
  const { theme, setTheme, resolvedTheme } = useTheme();

  return (
    <button
      onClick={() => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')}
      className="p-2 rounded bg-panel border border-gray-200 dark:border-gray-700"
    >
      Current: {resolvedTheme}
    </button>
  );
}

This approach is useful for building custom theme toggles outside the standard Settings page.

Summary

  • ThemeProvider at app/frontend/src/providers/theme-provider.tsx manages global theme state using next-themes and persists preferences to localStorage.
  • Tailwind configuration in app/frontend/tailwind.config.ts controls the color palette, dark mode strategy, and custom utility classes.
  • Appearance settings in app/frontend/src/components/settings/appearance.tsx provide the UI for theme selection and call setTheme from the next-themes hook.
  • UI primitives in app/frontend/src/components/ui/* wrap Tailwind classes and allow global component styling changes.
  • You can add custom themes by extending the themes array in both the provider and settings components, then adding corresponding Tailwind variants.

Frequently Asked Questions

Where is the theme configuration stored in the AI Hedge Fund frontend?

The active theme is stored in the browser's localStorage under the key theme by the next-themes library. The ThemeProvider component in app/frontend/src/providers/theme-provider.tsx handles this persistence automatically, while the Tailwind configuration in app/frontend/tailwind.config.ts defines the visual styles associated with each theme class.

How do I add a high-contrast theme option to the settings panel?

To add a high-contrast theme, first extend the themes array in app/frontend/src/components/settings/appearance.tsx to include the new option with an appropriate icon and description. Then update app/frontend/src/providers/theme-provider.tsx to include 'high-contrast' in the themes prop of NextThemesProvider. Finally, add a custom Tailwind variant in tailwind.config.ts to target .high-contrast classes and define the high-contrast color scheme using high-contrast: prefixes in your component classes.

Can I customize individual components without changing the global theme?

Yes, you can modify individual UI components by editing the files in app/frontend/src/components/ui/. These components use the cva (class-variance-authority) utility to define variant styles that wrap Tailwind classes. For example, changing the buttonVariants configuration in button.tsx affects all buttons across the application without requiring changes to the theme provider or Tailwind configuration. You can also override styles on a per-component basis using the className prop with standard Tailwind utility classes.

How does the application handle system preference detection?

The application uses the next-themes library's enableSystem feature, configured in app/frontend/src/providers/theme-provider.tsx. When the defaultTheme is set to 'system' or the user explicitly selects "System", the library detects the operating system's color scheme preference using the prefers-color-scheme media query. If the system preference changes while the app is running, the theme updates automatically to match, applying the appropriate Tailwind dark: or light mode classes throughout the component tree.

Have a question about this repo?

These articles cover the highlights, but your codebase questions are specific. Give your agent direct access to the source. Share this with your agent to get started:

Share the following with your agent to get started:
curl -s "https://instagit.com/install.md"
Works with
Claude Codex Cursor VS Code OpenClaw Any MCP Client

Maintain an open-source project? Get it listed too →