Finatic Portal Theming
The Finatic Portal supports dynamic theme switching via URL parameters, allowing SDK developers to customize the portal's appearance to match their application's branding and design requirements.
Quick Start
Basic Usage
from finatic_server import FinaticServerClient
# Initialize the SDK
client = FinaticServerClient('your-api-key')
# Start session and get portal URL with theme
await client.start_session()
portal_url = await client.get_portal_url()
# Add theme parameter to URL
themed_url = f"{portal_url}&theme=corporateBlue"
Available Preset Themes
The following preset themes are available for quick theming:
dark
- Default Finatic theme (Neon cyan #00FFFF, black, dark gray)light
- Light theme with cyan accents (White background, cyan accents)corporateBlue
- Professional blue theme (Blue #3B82F6, dark backgrounds)purple
- Purple/violet theme (Purple #A855F7, dark backgrounds)green
- Green theme (Green #22C55E, dark backgrounds)orange
- Orange theme (Orange #F97316, dark backgrounds)
Email Parameter
The portal supports email prefill functionality to improve user experience by automatically filling the email field in the authentication form.
Email Prefill
# Get portal URL with email prefill
portal_url = await client.get_portal_url()
themed_url = f"{portal_url}&email=user@example.com&theme=corporateBlue"
Custom Themes
Simple Custom Theme
import json
import base64
# Minimal theme - just change a few colors
custom_theme = {
"colors": {
"background": {
"primary": "#1a1a1a" # Just change the main background
},
"status": {
"connected": "#00FF88" # And the connected status color
}
}
}
# Encode theme as base64
theme_json = json.dumps(custom_theme)
theme_b64 = base64.b64encode(theme_json.encode()).decode()
# Add to portal URL
themed_url = f"{portal_url}&theme=custom&theme_data={theme_b64}"
Complete Theme Configuration
Complete Custom Theme
# Complete theme configuration
custom_theme = {
"mode": "dark",
"colors": {
"background": {
"primary": "#1a1a1a",
"secondary": "#2a2a2a",
"tertiary": "#3a3a3a",
"accent": "rgba(59, 130, 246, 0.1)",
"glass": "rgba(255, 255, 255, 0.05)"
},
"status": {
"connected": "#10B981",
"disconnected": "#EF4444",
"warning": "#F59E0B",
"pending": "#8B5CF6",
"error": "#EF4444",
"success": "#10B981"
},
"text": {
"primary": "#F8FAFC",
"secondary": "#CBD5E1",
"muted": "#94A3B8",
"inverse": "#1a1a1a"
},
"border": {
"primary": "rgba(59, 130, 246, 0.2)",
"secondary": "rgba(255, 255, 255, 0.1)",
"hover": "rgba(59, 130, 246, 0.4)",
"focus": "rgba(59, 130, 246, 0.6)",
"accent": "#3B82F6"
},
"input": {
"background": "#334155",
"border": "rgba(59, 130, 246, 0.2)",
"borderFocus": "#3B82F6",
"text": "#F8FAFC",
"placeholder": "#94A3B8"
},
"button": {
"primary": {
"background": "#3B82F6",
"text": "#FFFFFF",
"hover": "#2563EB",
"active": "#1D4ED8"
},
"secondary": {
"background": "transparent",
"text": "#3B82F6",
"border": "#3B82F6",
"hover": "rgba(59, 130, 246, 0.1)",
"active": "rgba(59, 130, 246, 0.2)"
}
}
},
"branding": {
"primaryColor": "#3B82F6"
}
}
# Encode and add to URL
theme_json = json.dumps(custom_theme)
theme_b64 = base64.b64encode(theme_json.encode()).decode()
themed_url = f"{portal_url}&theme=custom&theme_data={theme_b64}"
Utility Functions
Helper Functions
import json
import base64
from urllib.parse import urlencode, urlparse, parse_qs, urlunparse
def add_theme_to_url(base_url, theme=None, email=None):
"""Add theme and email parameters to portal URL"""
parsed = urlparse(base_url)
query_params = parse_qs(parsed.query)
if theme:
if theme in ['dark', 'light', 'corporateBlue', 'purple', 'green', 'orange']:
query_params['theme'] = [theme]
else:
# Custom theme
theme_json = json.dumps(theme)
theme_b64 = base64.b64encode(theme_json.encode()).decode()
query_params['theme'] = ['custom']
query_params['theme_data'] = [theme_b64]
if email:
query_params['email'] = [email]
# Rebuild URL
new_query = urlencode(query_params, doseq=True)
new_parsed = parsed._replace(query=new_query)
return urlunparse(new_parsed)
# Usage
portal_url = await client.get_portal_url()
themed_url = add_theme_to_url(portal_url, theme='corporateBlue', email='user@example.com')
Best Practices
- Simple branding: Use preset themes for quick implementation
- Complete customization: Use custom themes for full brand control
- Consistency: Use the same theme across your application
- Color accessibility: Ensure contrast meets WCAG AA standards
- Performance: Keep custom themes reasonably sized
Troubleshooting
Common issues and debug tips:
- Theme not applying: Ensure the theme object is valid and properly encoded
- URL too long: Custom themes are encoded in base64, consider using preset themes for large configurations
- Colors not displaying correctly: Verify color format and ensure colors are valid CSS values