> ## Documentation Index
> Fetch the complete documentation index at: https://funnelfox.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Themes & global styles
> Customize funnel themes in FunnelFox. Set global colors, fonts, button styles, and consistent branding across all screens.
Themes let you define a consistent look for all funnel screens at once instead of tweaking the Styles tab for each element on every screen.
You can reuse the same theme across all funnels in a project for consistent global design.
## How themes work
To speed up funnel design across your project:
0. **Default theme**: When you open Global themes settings for the first time, you’ll be prompted to set up a default theme.
Any new funnels you create manually or with [AI Chat in Editor](/docs/agentic-solution/overview#ai-chat-in-editor) will use this same default theme automatically.
You can edit or replace it at any time.
1. [Create new theme](/docs/editor/themes#create-theme): Define your design by setting styles for all theme elements. You can create multiple themes for different products or campaigns.
2. [Apply theme](/docs/editor/themes#apply-theme): All elements in the funnel will inherit the theme's styles automatically.
3. [Override when needed](/docs/editor/themes#theme-overrides): Make element-specific style adjustments without affecting the global theme.
Themes cover most **Styles** tab settings, but not all. See
[Theme limitations](/docs/editor/themes#theme-limitations).
## Create theme
Once you create a funnel, it has a default theme applied. If you want to create another theme to be available across all project funnels:
1. Click the **Editor menu** at the top left and select **Themes**.
2. Click **New Theme**.
3. Name your theme.
4. Configure style settings for theme elements.
5. Click **Save New Theme**.
## Edit theme
When you edit a theme, the update takes place globally across all project funnels:
Editing a theme updates the look of all elements across your project funnels where this theme is applied, except for those elements with [overrides](/docs/editor/themes#theme-overrides).
1. Click the **Editor menu** at the top left and select **Themes**.
2. Configure style settings for theme elements.
3. Click **Update Theme**.
Republish the affected funnels for changes to take effect.
## Apply theme
Each theme in your project can be applied to any funnel:
1. Open the funnel in the Editor.
2. Click the Editor menu at the top left and select **Themes**.
3. Select a theme under the **Theme Settings**.
4. Close the **Theme Settings** popup.
5. Save and republish your funnel.
If you edit the theme while applying it, the changes will impact all project funnels with this theme applied.
## Theme overrides
You can have style settings for a specific element different from those set in the global theme.
You can also override your funnel screen CSS using [funnel-wide custom code](/docs/editor/coding-funnel-wide).
To override the theme settings, edit the [Styles tab](/docs/editor/overview#styles) for the element directly.
When you override theme settings:
* The **Styles** tab setting you override is marked with the ⚡ lightning icon.
* You can click **Restore selected theme values** at the bottom of the element **Styles** tab, if you want to remove overrides for it.
* Elements with overrides are not impacted by [theme edits](/docs/editor/themes#edit-theme). They will keep their specific look despite theme changes.
* If you duplicate a screen with overrides or add a new one while the focused screen has overrides, the new screen will inherit those overrides automatically.
## Theme limitations
Themes don't cover every setting in the **Styles** tab. Review your funnel
after you apply or edit a theme.
### Elements you style manually
The theme doesn't reach these elements. Style each one in its **Styles**
tab:
* **Paywall elements**: [Plan picker](/docs/elements/planpicker),
[Price picker](/docs/elements/pricepicker), and
[Checkout](/docs/elements/checkout) use their own styles. Only the
**Primary** color carries over, for the selected state.
* **Wallet buttons**: [Apple Pay and Google Pay
buttons](/docs/elements/wallet-button) keep the look required by Apple and
Google, so they ignore the **Buttons** theme settings.
* **Spinner**: follows the **Primary** color, not the **Loaders**
section.
* **Other elements**: [Popup](/docs/elements/popup), [Timer](/docs/elements/timer),
[Cookie consent](/docs/elements/cookie-consent), OAuth buttons, video and
Lottie animations, and
[custom HTML](/docs/elements/raw).
The [Processing](/docs/elements/processing) element follows the theme for its
text only, and the [Chart](/docs/elements/chart) element for its loader colors
only. Style the rest of those elements individually.
### Settings you apply manually
The theme has no field for:
* Button border color, shadow, and height
* Input placeholder and invalid state colors
* Error message text
* H3 text
* Card text size, weight, and alignment
* Progress bar counter colors
## Global logo
The global logo appears in the header across all funnel screens. Set it
once to keep consistent branding without adding a logo to each screen.
Per-screen logos override it.
To set the global logo:
1. Click the dropdown with your funnel name at the top left and select
**Funnel Settings**.
2. Click **Add image** and select the logo to upload.
To override the logo on a single screen or disable it, open that screen and set the logo
under [**Properties > Parameters**](/docs/editor/overview#parameters) in the
selector on the right. The per-screen logo applies only to that screen.
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.