There are 3 main ways to utilize theming in the widget

1. Using pre-defined themes (currently: light, dark, bluey)

   <iframe        
     src="https://buy.onramper.com?themeName=light"
     title="Onramper Widget"
     height="630px"
     width="420px"
     allow="accelerometer; autoplay; camera; gyroscope; payment"
   />

2. Passing additional query parameters with the iframe source

   <iframe        
     src="https://buy.onramper.com?themeName=light&containerColor=ffffff&primaryColor=241d1c&secondaryColor=ffffff&cardColor=f6f7f9&primaryTextColor=141519&secondaryTextColor=6b6f80&borderRadius=0.5&wgBorderRadius=1"
     title="Onramper Widget"
     height="630px"
     width="420px"
     allow="accelerometer; autoplay; camera; gyroscope; payment"
   />

3. Posting a message to the iframe

   Mobile users can also post messages to/from webviews. This will change the properties of the widget without having to reload the iframe.

   const iframeRef = useRef<HTMLIFrameElement>(null);

   const iframe = iframeRef.current;
     if (iframe) {
       iframe.contentWindow.postMessage({
         type: "change-theme",
         id: "change-theme",
         theme: {
           primaryColor: '#241d1c',
           secondaryColor: '#ffffff'
           primaryTextColor: '#141519',
           secondaryTextColor: '#6b6f80',
           containerColor: '#ffffff',
           cardColor: '#f6f7f9',
           borderRadius: '0.5rem',
           widgetBorderRadius: '1rem',
         },
       }, "*");
     }