custom-modal-styles

export type ModalStyles = {
  brandColor?: string; // Switches all instances of the default Croissant blue to your own brand color
  bodyTextStyles?: React.CSSProperties; // Override the main body text styles with inline CSS
  headingTextStyles?: React.CSSProperties; // Override the heading text styles with inline CSS
};

<croissant-toggle custom-modal-styles="{
      brandColor: '#FF00FF',
      bodyTextStyles: {
        fontFamily: 'Arial, sans-serif',
        color: '#252426',
        fontSize: '1.5em',
        lineHeight: '1em',
      },
      headingTextStyles: {
        fontFamily: 'Times New Roman, Times, serif',
        color: '#975097',
        fontWeight: 200,
        fontSize: '4em',
        lineHeight: '1em',
      },
    }"></croissant-toggle>

    const customModalStyles = {
      brandColor: "#FF00FF",
      bodyTextStyles: {
        fontFamily: "Arial, sans-serif",
        color: "#252426",
        fontSize: "1.5em",
        lineHeight: "1em",
      },
      headingTextStyles: {
        fontFamily: "Times New Roman, Times, serif",
        color: "#975097",
        fontWeight: 200,
        fontSize: "4em",
        lineHeight: "1em",
      },
    };

    const toggle = document.querySelector("croissant-toggle");

    toggle.setAttribute(
      "custom-modal-styles",
      JSON.stringify(customModalStyles)
    );