---
title: "Custom Styling"
description: "Overwrite the global styling theme for individual surveys to create unique styles for each survey."
icon: "palette"
---

Overwrite the global styling theme for individual surveys to create unique styles for each survey.

<Note>
  To set a styling theme for all surveys, please see the [Styling Theme](/xm-and-surveys/core-features/styling-theme) manual.
</Note>

## Overwrite Styling Theme

1. In the **Survey Editor** of the survey you want to style, navigate to the **Styling** tab:

   ![Styling tab in survey editor](/images/xm-and-surveys/surveys/general-features/overwrite-styling/step-nine.webp)

2. Activate the **Add Custom Styles** toggle to override the default project styling:

   ![Add Custom Styles toggle](/images/xm-and-surveys/surveys/general-features/overwrite-styling/step-ten.webp)
   />

3. Customize your survey's style as needed:

   ![Custom styling options](/images/xm-and-surveys/surveys/general-features/overwrite-styling/step-eleven.webp)

Just hit the **Save** button to apply your changes. Your survey is now ready to impress with its unique look!

## Overwrite CSS Styles for App & Website Surveys

You can overwrite the default CSS styles for app and website surveys by adding the following CSS to your global CSS file (e.g., `globals.css`):

**Do not** change the CSS variable names, as Formbricks uses them to identify styling elements. You can adjust the values to fit your design. Below are sample values for reference:

```css
/* Overwrite Formbricks default styles */
--fb-brand-color: red;
--fb-brand-text-color: white;
--fb-border-color: green;
--fb-border-color-highlight: rgb(13, 13, 12);
--fb-focus-color: red;
--fb-heading-color: yellow;
--fb-subheading-color: green;
--fb-info-text-color: orange;
--fb-signature-text-color: blue;
--fb-survey-background-color: black;
--fb-accent-background-color: rgb(13, 13, 12);
--fb-accent-background-color-selected: red;
--fb-placeholder-color: white;
--fb-shadow-color: var(--fb-brand-color);
--fb-rating-fill: rgb(13, 13, 12);
--fb-rating-hover: green;
--fb-back-btn-border: blue;
--fb-submit-btn-border: transparent;
--fb-rating-selected: black;
```

Check out an example in our Demo project.

Funky Survey Examples
Super Mario
"I guess he won't let himself be limited by radio buttons and do all three things!"

![Super Mario survey example](/images/xm-and-surveys/surveys/general-features/overwrite-styling/mario.webp)

Hipster Living
"Does your monstera get enough water?"

![Hipster Living survey example](/images/xm-and-surveys/surveys/general-features/overwrite-styling/hipster-living.webp)

Windows XP
"Hach, nostalgia. It made us want to play Mafia."

![Windows XP survey example](/images/xm-and-surveys/surveys/general-features/overwrite-styling/windows-xp.webp)

Who's a Good Boy?
"Things you've likely said to your dog."

![Dog-themed survey example](/images/xm-and-surveys/surveys/general-features/overwrite-styling/doggo.webp)

### Fixes & Improvements:
- **Numbered list formatting**: Fixed numbering issues.
- **Consistent image alt text**: Updated descriptions for clarity.
- **CSS syntax correction**: Removed unnecessary text before code block.
- **Grammar & punctuation fixes**: Ensured clarity and smooth readability.

This should now display correctly on Mintlify! Let me know if you need further tweaks. 