Theme CSS Variables

The cssVariables object on a theme overrides visual styling with CSS custom properties. Use this page when changing colors, spacing, border radius, shadows, or typography.

Most Common Overrides

{
  "themeName": "default",
  "colorPalette": "light",
  "cssVariables": {
    "--sjs-primary-backcolor": "rgba(37, 99, 235, 1)",
    "--sjs-primary-backcolor-light": "rgba(37, 99, 235, 0.1)",
    "--sjs-primary-backcolor-dark": "rgba(29, 78, 216, 1)",
    "--sjs-corner-radius": "8px",
    "--sjs-base-unit": "8px"
  }
}

Background Colors

Variable	Purpose
--sjs-general-backcolor	Question panels and inputs
--sjs-general-backcolor-dark	Hover states and secondary surfaces
--sjs-general-backcolor-dim	Overall form canvas
--sjs-general-backcolor-dim-light	Subtle surface differentiation
--sjs-general-backcolor-dim-dark	Darker dimmed background

Text Colors

Variable	Purpose
--sjs-general-forecolor	Primary text
--sjs-general-forecolor-light	Descriptions, placeholders, secondary text
--sjs-general-dim-forecolor	Text on dimmed backgrounds
--sjs-general-dim-forecolor-light	Secondary text on dimmed backgrounds

Primary Colors

Variable	Purpose
--sjs-primary-backcolor	Main accent color for buttons, selected choices, progress
--sjs-primary-backcolor-light	Light primary background for hover/focus states
--sjs-primary-backcolor-dark	Hover/pressed primary color
--sjs-primary-forecolor	Text/icon color on primary background
--sjs-primary-forecolor-light	Muted text/icon color on primary background

Secondary And Semantic Colors

Variable	Purpose
--sjs-secondary-backcolor	Secondary accent
--sjs-secondary-backcolor-light	Light secondary background
--sjs-secondary-backcolor-semi-light	Semi-light secondary background
--sjs-secondary-forecolor	Text/icon color on secondary background
--sjs-special-red	Error/danger color
--sjs-special-red-light	Error background
--sjs-special-green	Success color
--sjs-special-blue	Info color
--sjs-special-yellow	Warning color

Layout, Radius, And Shadows

Variable	Purpose
--sjs-base-unit	Base spacing unit
--sjs-corner-radius	Border radius for panels, inputs, and buttons
--sjs-shadow-small	Small shadow for inputs and minor elevated elements
--sjs-shadow-medium	Medium shadow for panels and cards
--sjs-shadow-large	Large shadow for popups and modals
--sjs-shadow-inner	Inset input shadow
--sjs-border-light	Subtle separators
--sjs-border-default	Default borders
--sjs-border-inside	Internal matrix/composite borders

Article Font Variables

Article font variables control HTML/content text inside forms. Size tiers include xx-large, x-large, large, medium, and default.

Each tier supports:

• textDecoration
• fontWeight
• fontStyle
• fontStretch
• letterSpacing
• lineHeight
• paragraphIndent
• textCase

Example variable names:

• --sjs-article-font-default-fontWeight
• --sjs-article-font-default-lineHeight
• --sjs-article-font-large-fontWeight
• --sjs-article-font-xx-large-lineHeight