import { MdxImage } from "@/components/MdxImage";

import StepEleven from "./images/StepEleven.webp";
import StepNine from "./images/StepNine.webp";
import StepTen from "./images/StepTen.webp";

import Doggo from "./images/Doggo.jpg";
import HipsterLiving from "./images/HipsterLiving.jpg";
import Mario from "./images/Mario.webp";
import WindowsXp from "./images/WindowsXp.jpg";

export const metadata = {
  title: "Overwrite Styling Theme on Individual Surveys",
  description:
    "Overwrite the global styling theme for individual surveys to create unique styles for each survey.",
};

# Overwrite Styling Theme on Individual Surveys

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](/global/styling-theme) manual. </Note>


### Overwrite Styling Theme

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

<MdxImage
  src={StepNine}
  alt="Choose a link survey template"
  quality="100"
  className="max-w-full rounded-lg sm:max-w-3xl "
/>

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

<MdxImage
  src={StepTen}
  alt="Choose a link survey template"
  quality="100"
  className="max-w-full rounded-lg sm:max-w-3xl "
/>

3. Customize your survey's style as needed:

<MdxImage
  src={StepEleven}
  alt="Choose a link survey template"
  quality="100"
  className="max-w-full rounded-lg sm:max-w-3xl "
/>

Voila! 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 the app & website surveys by adding the following CSS to your global CSS file (eg. `globals.css`):

Make sure that you do not change the CSS variable names as they are used by Formbricks to identify the CSS variables. You can change the values to your liking. We have filled in some sample values for you to change according to your desired appearance.

<Col>
<CodeGroup title="Overwrite Formbricks CSS">

```css
/* Formbricks CSS */
--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;
```

</CodeGroup>
</Col>

We have an example of this in our [Demo project](https://github.com/formbricks/formbricks/blob/main/apps/demo/styles/globals.css) here.

## Funky Survey Examples

- **Super Mario:** I guess he won't let himself be limited by radio buttons and do all three things

<MdxImage
  src={Mario}
  alt="Choose a link survey template"
  quality="100"
  className="max-w-full rounded-lg sm:max-w-3xl "
/>

- **Hipster Living**: Does your monstera get enough water?

<MdxImage
  src={HipsterLiving}
  alt="Choose a link survey template"
  quality="100"
  className="max-w-full rounded-lg sm:max-w-3xl "
/>

- **Windows XP**: Hach, nostalgia. Made us wanna play Mafia.

<MdxImage
  src={WindowsXp}
  alt="Choose a link survey template"
  quality="100"
  className="max-w-full rounded-lg sm:max-w-3xl "
/>

- **Whosagooooodbooooy**: Things you've likely said to your dog.

<MdxImage
  src={Doggo}
  alt="Choose a link survey template"
  quality="100"
  className="max-w-full rounded-lg sm:max-w-3xl "
/>

---
