Themes, Styling and Localization

Change the look and feel of your survey with built-in or custom themes.
Tweak colors, fonts, and layout using CSS variables—all from R.
Instantly translate your survey UI for any audience.
For full schema and question options, see [Survey Schema Recipes].
Tip: Can’t see your theme? Run surveyjs_themes() to check spelling!

Themes: Built-in Styles
Custom Styling with CSS Variables
List Available Themes
Localization: Changing Survey Language
Further Reference

Themes: Built-in Styles

SurveyJS offers a variety of built-in themes to match modern UI patterns. Themes are well documented under Themes & Styles from the original surveyjs documentation. General speaking every theme comes with a light/dark version and in a panel/panelless variant. For convenience all available themes are referenced under surveyjs_themes() within rsurveyjs.

Using a built-in theme

surveyjs(
  schema = list(
    title = "Modern Theme Example",
    questions = list(
      list(type = "text", name = "name", title = "Your name?"),
      list(type = "rating", name = "rating", title = "How was your experience?")
    )
  ),
  theme = "modern"
)

Try "defaultV2", "ThreeDimensionalLightPanelless", "contrast-dark", "flat-light", etc. Custom Styling with CSS Variables

You can override CSS variables to change colors, corners, fonts, and more.

Example: Custom brand colors

surveyjs(
  schema = list(
    title = "Custom Theme Colors",
    questions = list(
      list(type = "text", name = "team", title = "Your favorite team?")
    )
  ),
  theme = "DefaultLightPanelless",
  theme_vars = list(
    "--sjs-primary-backcolor" = "#0072B2",       # Custom blue
    "--sjs-primary-forecolor" = "#ffffff",       # White text
    "--sjs-corner-radius" = "14px",              # More rounded corners
    "--sjs-shadow-medium" = "0 4px 12px rgba(0,0,0,0.2)" # Softer shadow
  )
)

You can set any CSS variable supported by SurveyJS. For the full list, see [SurveyJS theme variable docs].

List Available Themes

You can list all available themes in rsurveyjs with:

surveyjs_themes()
#>  [1] "BorderlessDark"                  "BorderlessDarkPanelless"        
#>  [3] "BorderlessLight"                 "BorderlessLightPanelless"       
#>  [5] "ContrastDark"                    "ContrastDarkPanelless"          
#>  [7] "ContrastLight"                   "ContrastLightPanelless"         
#>  [9] "DefaultDark"                     "DefaultDarkPanelless"           
#> [11] "DefaultLight"                    "DefaultLightPanelless"          
#> [13] "DoubleBorderDark"                "DoubleBorderDarkPanelless"      
#> [15] "DoubleBorderLight"               "DoubleBorderLightPanelless"     
#> [17] "FlatDark"                        "FlatDarkPanelless"              
#> [19] "FlatLight"                       "FlatLightPanelless"             
#> [21] "LayeredDark"                     "LayeredDarkPanelless"           
#> [23] "LayeredLight"                    "LayeredLightPanelless"          
#> [25] "PlainDark"                       "PlainDarkPanelless"             
#> [27] "PlainLight"                      "PlainLightPanelless"            
#> [29] "SharpDark"                       "SharpDarkPanelless"             
#> [31] "SharpLight"                      "SharpLightPanelless"            
#> [33] "SolidDark"                       "SolidDarkPanelless"             
#> [35] "SolidLight"                      "SolidLightPanelless"            
#> [37] "ThreeDimensionalDark"            "ThreeDimensionalDarkPanelless"  
#> [39] "ThreeDimensionalLight"           "ThreeDimensionalLightPanelless" 
#> [41] "__surveyjs_internal_themes_hash" "default"

Localization: Changing Survey Language

Easily switch the language of your survey UI for international audiences. (Note: only technical key-words like “Complete” etc. get properly translated via the locale argument.) If you want more, see the multi-locale support section below.

Example: German language

surveyjs(
  schema = list(
    title = "Umfrage",
    questions = list(
      list(type = "rating", name = "zufriedenheit", title = "Wie zufrieden sind Sie?")
    )
  ),
  locale = "de"
)

Supported Languages

SurveyJS supports many locales: "en", "de", "fr", "es", "pt", "ru", and more. See SurveyJS localization docs for the full list.

Multi-locale support

surveyjs(
  schema = list(
    title = list(
      en = "Satisfaction Survey",
      fr = "Enquête de satisfaction"
    ),
    questions = list(
      list(
        type = "rating",
        name = "satisfaction",
        title = list(
          en = "How satisfied are you?",
          fr = "Êtes-vous satisfait ?"
        )
      ),
      list(
        type = "comment",
        name = "comments",
        title = list(
          en = "Additional comments",
          fr = "Commentaires supplémentaires"
        )
      )
    )
  ),
  locale = "fr"   # Try "en" or "fr"
)

Table of Contents