# How to Customize the React Frontend Appearance and Settings in AI Hedge Fund
> Learn to customize the React frontend appearance and settings for your AI Hedge Fund project. Modify Tailwind config, extend ThemeProvider, and update UI primitives for a personalized look.
- Repository: [Virat Singh/ai-hedge-fund](https://github.com/virattt/ai-hedge-fund)
- Tags: how-to-guide
- Published: 2026-03-09
---
**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 `` element. Located at [`app/frontend/src/providers/theme-provider.tsx`](https://github.com/virattt/ai-hedge-fund/blob/main/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`](https://github.com/virattt/ai-hedge-fund/blob/main/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`](https://github.com/virattt/ai-hedge-fund/blob/main/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`](https://github.com/virattt/ai-hedge-fund/blob/main/app/frontend/tailwind.config.ts) to override the default palette. The project uses CSS variables and Tailwind's `dark:` variant for automatic switching.
```typescript
// 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`](https://github.com/virattt/ai-hedge-fund/blob/main/app/frontend/src/providers/theme-provider.tsx) to include the new theme in the allowed list:
```tsx
{children}
```
### Updating the Settings UI
Modify [`app/frontend/src/components/settings/appearance.tsx`](https://github.com/virattt/ai-hedge-fund/blob/main/app/frontend/src/components/settings/appearance.tsx) to add the new option to the `themes` array:
```tsx
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:
```typescript
// 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`](https://github.com/virattt/ai-hedge-fund/blob/main/app/frontend/src/components/ui/button.tsx):
```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
```tsx
import { useTheme } from 'next-themes';
export function ToggleThemeButton() {
const { theme, setTheme, resolvedTheme } = useTheme();
return (
);
}
```
This approach is useful for building custom theme toggles outside the standard Settings page.
## Summary
- **ThemeProvider** at [`app/frontend/src/providers/theme-provider.tsx`](https://github.com/virattt/ai-hedge-fund/blob/main/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`](https://github.com/virattt/ai-hedge-fund/blob/main/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`](https://github.com/virattt/ai-hedge-fund/blob/main/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`](https://github.com/virattt/ai-hedge-fund/blob/main/app/frontend/src/providers/theme-provider.tsx) handles this persistence automatically, while the Tailwind configuration in [`app/frontend/tailwind.config.ts`](https://github.com/virattt/ai-hedge-fund/blob/main/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`](https://github.com/virattt/ai-hedge-fund/blob/main/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`](https://github.com/virattt/ai-hedge-fund/blob/main/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`](https://github.com/virattt/ai-hedge-fund/blob/main/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`](https://github.com/virattt/ai-hedge-fund/blob/main/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`](https://github.com/virattt/ai-hedge-fund/blob/main/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.