Theme Customization

import { PanoraWidget } from "@panoraexchange/widget-sdk"

const App = () => (
  <PanoraWidget
    config={{
      API_KEY: "YOUR_API_KEY",
      styles: {
        colors: {
          primary: "#5fdfac",
          bgPrimary: "#010D09",
          borderPrimary: "rgba(255, 255, 255, .05)",
          borderSecondary: "rgb(95 223 172 / 0.05)",
          shadowPrimary:
            "rgb(0 0 0 / 16%) 0px 2px 4px, rgb(0 0 0 / 32%) 0px 8px 16px",
          btnTextPrimary: "black",
          btnTextSecondary: "rgba(0, 0, 0, .25)",
          textSecondary: "rgb(107 114 128)",
          warning: "#EF8E19",
          error: "#F6465D",
          textPrimary: "white",
          skeletonBase: "rgb(255,255,255, .05)",
          skeletonHighlight: "rgb(255,255,255, .1)",
          bgError: "rgb(246, 70, 93, .1)",
          bgSuccess: "rgb(95, 223, 172, .1)",
          bgSecondary: "#000704",
        },
      },
    }}
  />
)