Skip to main content

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.

​
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: 
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: 
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: 
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: 
paraModalConfig={{
  theme: {
    foregroundColor: "#007AFF",
    backgroundColor: "#FFFFFF",
    foregroundMixRatio: 0.12 // stronger accent presence
  }
}}

​
Upgrading from v2.x

Migration Guide