@swapper-finance/sdk/localTheme.ts

JavaScript SDK form Swapper

import {
  ModalIntegrationStyles,
  ModalIntegrationThemeStyles,
} from "@src/models";

function setCustomProperty(property: string, value: string) {
  function applyStyleToHost(hostId: string) {
    const host = document.getElementById(hostId);
    if (host && host.shadowRoot) {
      const sheet = new CSSStyleSheet();
      sheet.replaceSync(`:host { ${property}: ${value}; }`);
      host.shadowRoot.adoptedStyleSheets = [
        ...host.shadowRoot.adoptedStyleSheets,
        sheet,
      ];
    }
  }

  const hostIds = [
    "swapper-sdk-root",
    "swapper-sdk-tx-status",
    "swapper-sdk-widget",
  ];

  hostIds.forEach(applyStyleToHost);
}

const lightThemeStyles: ModalIntegrationThemeStyles = {
  themeColor: "#1BB18C",
  bgPrimary: "#FFFFFF",
  bgSecondary: "#FFFFFF1a",
  bgTertiary: "#232323",
  textPrimary: "#232323",
  textRed: "#C62828",
  textOrange: "#FF6F00",
  textGreen: "#2E7D32",
  buttonPrText: "#ffffff",
  buttonPrOffBg: "#23232380",
  buttonPrOffText: "#FFFFFF99",
  successDark: "#2E7D32",
  successLight: "#4CAF50",
  warningDark: "#FF6F00",
  warningLight: "#FFCA28",
  errorDark: "#C62828",
  errorLight: "#F44336",
};

const darkThemeStyles: ModalIntegrationThemeStyles = {
  themeColor: "#1BB18C",
  bgPrimary: "#232323",
  bgSecondary: "#0F0F0F",
  bgTertiary: "#ffffff",
  textPrimary: "#FFFFFF",
  textRed: "#F44336",
  textOrange: "#FFCA28",
  textGreen: "#4CAF50",
  buttonPrText: "#FFFFFF",
  buttonPrOffBg: "#FFFFFF1A",
  buttonPrOffText: "#FFFFFF",
  successDark: "#2E7D32",
  successLight: "#4CAF50",
  warningDark: "#FF6F00",
  warningLight: "#FFCA28",
  errorDark: "#C62828",
  errorLight: "#F44336",
};

const styleMap: ModalIntegrationThemeStyles & ModalIntegrationStyles = {
  themeColor: "--theme-color",
  bgPrimary: "--bg-primary",
  bgSecondary: "--bg-secondary",
  bgTertiary: "--bg-tertiary",
  textPrimary: "--text-primary",
  textRed: "--text-red",
  textOrange: "--text-orange",
  textGreen: "--text-green",
  buttonPrText: "--button-pr-text",
  buttonPrOffBg: "--button-pr-off-bg",
  buttonPrOffText: "--button-pr-off-text",
  successDark: "--success-dark",
  successLight: "--success-light",
  warningDark: "--warning-dark",
  warningLight: "--warning-light",
  errorDark: "--error-dark",
  errorLight: "--error-light",
  maxWidth: "--modal-width",
  borderRadius: "--radius",
};

export function changeHostVariableColor(
  isLightMode: boolean | undefined,
  customStyles: ModalIntegrationStyles | undefined,
) {
  const baseStyles: ModalIntegrationThemeStyles = isLightMode
    ? { ...lightThemeStyles }
    : { ...darkThemeStyles };

  const styles = {
    ...baseStyles,
    ...customStyles,
  };

  for (const [key, value] of Object.entries(styles)) {
    const cssVariable = styleMap[key];

    if (cssVariable) {
      setCustomProperty(cssVariable, value);
    }
  }
}