Theme Examples

Use these examples as starting points for theme objects.

Brand Color Theme

{
  "themeName": "default",
  "colorPalette": "light",
  "isPanelless": false,
  "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-primary-forecolor": "rgba(255, 255, 255, 1)",
    "--sjs-corner-radius": "8px"
  }
}

Panelless Minimal Theme

{
  "themeName": "plain",
  "colorPalette": "light",
  "isPanelless": true,
  "cssVariables": {
    "--sjs-general-backcolor-dim": "rgba(255, 255, 255, 1)",
    "--sjs-primary-backcolor": "rgba(17, 24, 39, 1)",
    "--sjs-primary-backcolor-light": "rgba(17, 24, 39, 0.08)",
    "--sjs-primary-backcolor-dark": "rgba(0, 0, 0, 1)",
    "--sjs-corner-radius": "6px"
  }
}

Advanced Header With Background Image

{
  "themeName": "default",
  "colorPalette": "light",
  "headerView": "advanced",
  "header": {
    "height": 280,
    "mobileHeight": 180,
    "inheritWidthFrom": "container",
    "textAreaWidth": 560,
    "backgroundImage": "https://example.com/header.jpg",
    "backgroundImageFit": "cover",
    "backgroundImageOpacity": 0.75,
    "titlePositionX": "left",
    "titlePositionY": "bottom",
    "descriptionPositionX": "left",
    "descriptionPositionY": "bottom"
  }
}

Default Light Theme Core

{
  "themeName": "default",
  "colorPalette": "light",
  "isPanelless": false,
  "cssVariables": {
    "--sjs-general-backcolor": "rgba(255, 255, 255, 1)",
    "--sjs-general-backcolor-dim": "rgba(243, 243, 243, 1)",
    "--sjs-general-forecolor": "rgba(0, 0, 0, 0.91)",
    "--sjs-general-forecolor-light": "rgba(0, 0, 0, 0.45)",
    "--sjs-primary-backcolor": "rgba(25, 179, 148, 1)",
    "--sjs-primary-backcolor-light": "rgba(25, 179, 148, 0.1)",
    "--sjs-primary-backcolor-dark": "rgba(20, 164, 139, 1)",
    "--sjs-primary-forecolor": "rgba(255, 255, 255, 1)",
    "--sjs-base-unit": "8px",
    "--sjs-corner-radius": "4px",
    "--sjs-shadow-small": "0px 1px 2px 0px rgba(0, 0, 0, 0.15)",
    "--sjs-shadow-medium": "0px 2px 6px 0px rgba(0, 0, 0, 0.1)",
    "--sjs-border-default": "rgba(0, 0, 0, 0.16)"
  }
}