Cart Buy Licenses Contact Integrate into App Docs Support Login/Register
v 1.9.0
v 1.9.0
Overview Survey Creator Survey Creator V2 Examples Docs Source

Custom Theme using CSS variables

Survey Creator default theme customization using CSS variables


                        


            
                var creatorOptions = { showLogicTab: true };
                var creator = new SurveyCreator.SurveyCreator("creatorElement", creatorOptions);
                creator.showToolbox = "right";
                creator.showPropertyGrid = "right";
                creator.rightContainerActiveItem("toolbox");
            

                    
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Survey Creator default theme customization using CSS variables, Survey Creator Example</title>

<meta name="viewport" content="width=device-width" />
    <script src="https://unpkg.com/knockout@3.5.1/build/output/knockout-latest.js"></script>
    <script src="/DevBuilds/survey-knockout/survey.ko.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.10/ace.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.10/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
    <!-- Uncomment to enable Select2
    <script src="https://unpkg.com/jquery"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
    -->
        <script src="/DevBuilds/survey-creator/survey-creator.min.js"></script>
        <link href="/DevBuilds/survey-creator/survey-creator.min.css" type="text/css" rel="stylesheet" />
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="./index.css">

</head>
<body>
    
<link href="/DevBuilds/survey-core/survey.min.css" type="text/css" rel="stylesheet" /><div id="surveyContainer">
        <div id="creatorElement"></div>
</div>

<script type="text/javascript" src="./index.js"></script>

</body>
</html>

body #creatorElement {
    /* SurveyJS Creator V2 */
    --primary-color: #7ff07f;
    --secondary-color: #1ab394;
    --primary-text-color: #4a4a4a;
    --secondary-text-color: #a7a7a7;
    --inverted-text-color: #ffffff;
    --primary-hover-color: #6fe06f;
    --selection-border-color: #1ab394;
    --primary-icon-color: #3d4d5d;
    --primary-bg-color: #f8f8f8;
    --secondary-bg-color: #f4f4f4;
    --primary-border-color: #e7eaec;
    --secondary-border-color: #ddd;
    --error-color: #ed5565;
    /* SurveyJS Creator V2 */
    --primary: #7ff07f;
    --primary-light: rgba(25, 179, 148, 0.1);
    --primary-foreground: #fff;
    --secondary: #7ff07f;
    --secondary-light: rgba(255, 152, 20, 0.1);
    --secondary-foreground: #fff;
    --background: #f8f8f8;
    --background-dim: #f3f3f3;
    --background-for-editors: #f9f9f9;
    --foreground: #4a4a4a;
    --foreground-light: #909090;
    --foreground-disabled: rgba(#161616, 0.16);
    --border: #d6d6d6;
    --border-inside: rgba(0, 0, 0, 0.16);
    --red: #e60a3e;
    --red-light: rgba(230, 10, 62, 0.1);
    --green: #19b394;
    --green-light: rgba(25, 179, 148, 0.1);
}