> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getpara.com/llms.txt
> Use this file to discover all available pages before exploring further.

# What's New in v3.0

> Overview of new features and improvements in Para v3.0

## Simplified Theming

The v3.0 release dramatically simplifies modal theming. Instead of managing 13+ theme properties with separate dark mode colors and deeply nested custom palettes, you now set a `foregroundColor` and `backgroundColor` and the system generates a complete, harmonious palette using OKLCH color space.

### One Color Drives Everything

Set `foregroundColor` and buttons, accents, rings, and interactive elements are automatically derived:

```tsx theme={null}
paraModalConfig={{
  theme: {
    foregroundColor: "#007AFF",
    backgroundColor: "#FFFFFF"
  }
}}
```

### No More Dark/Light Variant Properties

No more maintaining separate `darkForegroundColor`, `darkBackgroundColor`, and `darkAccentColor`. Just provide your dark colors directly — the system auto-detects dark mode from the background color lightness:

```tsx theme={null}
paraModalConfig={{
  theme: {
    foregroundColor: "#0A84FF",
    backgroundColor: "#1C1C1E",
  }
}}
```

If the auto-detection misclassifies your background color (e.g., an ambiguous color near the light/dark boundary), use `mode` to override it.

### CSS Overrides for Power Users

Replace `customPalette` with `cssOverrides` for raw CSS variable control when you need granular adjustments:

```tsx theme={null}
paraModalConfig={{
  theme: {
    foregroundColor: "#007AFF",
    backgroundColor: "#FFFFFF",
    cssOverrides: {
      "--para-color-accent": "#1A1A2E",
      "--para-color-destructive": "#E74C3C"
    }
  }
}}
```

### Fine-Tune with Foreground Mix Ratio

The new `foregroundMixRatio` property lets you control how much your accent color bleeds into surface colors:

```tsx theme={null}
paraModalConfig={{
  theme: {
    foregroundColor: "#007AFF",
    backgroundColor: "#FFFFFF",
    foregroundMixRatio: 0.12 // stronger accent presence
  }
}}
```

## Upgrading from v2.x

<Card title="Migration Guide" href="/v3/introduction/migration-to-v3" description="Step-by-step guide for migrating your theme configuration from v2.x to v3.0" icon="arrow-up-from-bracket" />