---
title: Customize Appearance with CSS Variables
product: Survey Creator
description: Use custom CSS to make the UI of your form management system look customary for end users with your brand's own design language and style. View a free demo for JavaScript.
framework: React
source: https://surveyjs.io/survey-creator/examples/edit-user-interface-theme-with-custom-css/reactjs
index: https://surveyjs.io/survey-creator/examples/overview.md
---

# Customize Appearance with CSS Variables (React)

Survey Creator comes with an API that allows users to [create, apply, and switch between custom UI themes](/survey-creator/examples/add-custom-theme/). If your project doesn't require these capabilities, you can customize the Survey Creator UI by overriding a few CSS variables. This example shows which CSS variables you can redefine.

- `--sjs-primary-background-500`\
A primary accent color.

- `--sjs-secondary-background-500`\
A secondary accent color.

- `--sjs-special-background`\
A color for the surface background.

Other CSS variables are calculated automatically based on those variables. If you want to customize the Survey Creator UI in more detail, you can override the dependent variables as well.

<!-- For more information on them, refer to the <a href="https://www.figma.com/design/i6Lpc7zkjHtso2oXZV97fo/Design-Kit?node-id=25438-62239&t=Efr3Z8ZOPsVDIzPP-0" target="_blank">SurveyJS Figma</a> project. -->

Survey Creator users can modify the UI at runtime. You may want to disable this capability if you apply UI customizations in code. To do this, set the [`showCreatorThemeSettings`](/survey-creator/documentation/api-reference/icreatoroptions#showCreatorThemeSettings) property to `false` as shown in this demo.

## Files

### `public/index.html`

```html
<!-- Uncomment the following lines to enable Ace Editor in the JSON Editor tab -->
<!-- 
<script src="https://unpkg.com/ace-builds/src-min-noconflict/ace.js"></script>
<script src="https://unpkg.com/ace-builds/src-min-noconflict/ext-searchbox.js"></script>
<script src="https://unpkg.com/ace-builds/src-min-noconflict/theme-clouds_midnight.js"></script>
-->

<div id="surveyCreatorContainer" style="position: absolute; height: 100%; width: 100%"></div>
```

### `src/SurveyCreatorComponent.jsx`

```js
import React from "react";
import { SurveyCreator, SurveyCreatorComponent } from "survey-creator-react";
import "survey-core/survey.i18n";
import "survey-creator-core/survey-creator-core.i18n";
import "survey-core/survey-core.css";
import "survey-creator-core/survey-creator-core.css";
import "./index.css";

import SurveyTheme from "survey-core/themes";
import { registerCreatorTheme } from "survey-creator-core";

registerCreatorTheme(SurveyTheme); // Add predefined Survey Creator UI themes

function SurveyCreatorRenderComponent() {
    const creator = new SurveyCreator({ showCreatorThemeSettings: false });
    creator.JSON = {
      "pages": [{
        "name": "page1",
        "elements": [{
          "type": "matrix",
          "name": "qualities",
          "title": "Please indicate if you agree or disagree with the following statements",
          "columns": [{
            "value": 5,
            "text": "Strongly agree"
          }, {
            "value": 4,
            "text": "Agree"
          }, {
            "value": 3,
            "text": "Neutral"
          }, {
            "value": 2,
            "text": "Disagree"
          }, {
            "value": 1,
            "text": "Strongly disagree"
          }],
          "rows": [{
            "value": "affordable",
            "text": "Product is affordable"
          }, {
            "value": "does-what-it-claims",
            "text": "Product does what it claims"
          }, {
            "value": "better-than-others",
            "text": "Product is better than other products on the market"
          },{
            "value": "easy-to-use",
            "text": "Product is easy to use"
          }]
        }]
      }, {
        "name": "page2",
        "elements": [{
          "type": "rating",
          "name": "satisfaction-score",
          "title": "How satisfied are you with our product?",
          "minRateDescription": "Not satisfied",
          "maxRateDescription": "Completely satisfied"
        }, {
          "type": "comment",
          "name": "suggestions",
          "title": "What would make you more satisfied with our product?",
          "maxLength": 300
        }]
      }, {
        "name": "page3",
        "elements": [{
          "type": "radiogroup",
          "name": "price-comparison",
          "title": "Compared to our competitors, do you feel our product is:",
          "choices": [
            "Less expensive",
            "Priced about the same",
            "More expensive",
            "Not sure"
          ]
        }]
      }, {
        "name": "page4",
        "elements": [{
          "type": "text",
          "name": "email",
          "title": "Thank you for taking our survey. Please leave your email address if you would like us to contact you."
        }]
      }]
    };
    return (<SurveyCreatorComponent creator={creator} />);
}

export default SurveyCreatorRenderComponent;
```

### `src/index.css`

```css
.svc-creator {
  --sjs-primary-background-500: #20283DFF;
  --sjs-secondary-background-500: #4AB309;
  --sjs-layer-3-background-500: #F2F3F6FF;
  --sjs-special-background: #F2F3F6FF;
}
```

### `src/index.js`

```js
import React from "react";
import { createRoot } from "react-dom/client";
import SurveyCreatorRenderComponent from "./SurveyCreatorComponent";

const root = createRoot(document.getElementById("surveyCreatorContainer"));
root.render(<SurveyCreatorRenderComponent />);
```

### `package.json`

```json
{
  "dependencies": {
    "react": "latest",
    "react-dom": "latest",
    "survey-core": "latest",
    "survey-react-ui": "latest",
    "survey-creator-core": "latest",
    "survey-creator-react": "latest"
  },
  "devDependencies": {
    "react-scripts": "latest"
  }
}
```

## Other Frameworks

- [Angular](https://surveyjs.io/survey-creator/examples/edit-user-interface-theme-with-custom-css/angular.md)
- [Vue 3](https://surveyjs.io/survey-creator/examples/edit-user-interface-theme-with-custom-css/vue3js.md)
- [jQuery](https://surveyjs.io/survey-creator/examples/edit-user-interface-theme-with-custom-css/jquery.md)
- [Vanilla JS](https://surveyjs.io/survey-creator/examples/edit-user-interface-theme-with-custom-css/vanillajs.md)