Custom Styles

For now you can use the --css flag to specify custom CSS and override the font and color variables.

The CSS is injected in the UI, also when embedding. There are separate colors for light and dark mode. To disable dark mode, set the dark-mode variables to the same value as the light mode variables.

These are the default values:

:root {
  --shaper-font: DMSans;
  --shaper-display-font: SourceSansPro;
  --shaper-reference-line-color: rgb(244 114 182 / .5);

  --shaper-primary-color: #567ef7;
  --shaper-primary-color-alternate: #2857c8;
  --shaper-color-two: #abdaf7;
  --shaper-color-three: #f079c7;
  --shaper-color-four: #ce1e1e;
  --shaper-color-five: #ffbf7b;
  --shaper-color-six: #fb7777;
  --shaper-color-seven: #65d65b;
  --shaper-color-eight: #4d4dff;
  --shaper-color-nine: #c992ff;
  --shaper-color-ten: #c4c4c4;
  --shaper-text-color: #3d3f45;
  --shaper-text-color-secondary: #545964;
  --shaper-text-color-invert: #fff;
  --shaper-text-color-button: #fff;
  --shaper-background-color: #fff;
  --shaper-background-color-secondary: #f2f5fa;
  --shaper-background-color-alternate: #ebeff7;
  --shaper-background-color-invert: #131a25;
  --shaper-border-color: #d3dfee;
  --shaper-error-color: #eb3647;
  --shaper-error-color-alternate: #d01114;

  --shaper-dark-mode-primary-color: #567ef7;
  --shaper-dark-mode-primary-color-alternate: #2732d1;
  --shaper-dark-mode-text-color: rgb(239, 240, 244);
  --shaper-dark-mode-text-color-secondary: rgb(215, 216, 221);
  --shaper-dark-mode-text-color-invert: #171924;
  --shaper-dark-mode-text-color-button: #fff;
  --shaper-dark-mode-background-color: #3a3b48;
  --shaper-dark-mode-background-color-secondary: #4f5164;
  --shaper-dark-mode-background-color-alternate: #585a72;;
  --shaper-dark-mode-background-color-invert: #ebecf2;
  --shaper-dark-mode-border-color: #777985;
  --shaper-dark-mode-error-color: #ff4d4f;
  --shaper-dark-mode-error-color-alternate: #d23537;
}

Since this is just CSS, you can also overwrite this from within the host application when embedding. This keeps you flexible to adjust the look for different use cases served by the same Shaper instance.