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 and 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: #3a6bff;
  --shaper-primary-color-alternate: #2857c8;
  --shaper-color-two: #abdaf7;
  --shaper-color-three: #ff7cd2;
  --shaper-color-four: #ab0000;
  --shaper-color-five: #ff4141;
  --shaper-color-six: #ffbf7b;
  --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: #3a6bff;
  --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;
}