@xswap-link/sdk/localTheme.ts

JavaScript SDK for XSwap platform

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 = ["xpay-root", "xpay-tx-status", "xpay-widget"];

  hostIds.forEach(applyStyleToHost);
}

const lightThemeStyles: ModalIntegrationThemeStyles = {
  mainAccentLight: "#3681C6",
  mainAccentDark: "#2B4A9D",
  bgPrimary: "#FFFFFF",
  bgSecondary: "#FFFFFF1a",
  bgTertiary: "#020202",
  textPrimary: "#020202",
  textSecondary: "#3681C6",
  textRed: "#C62828",
  textOrange: "#FF6F00",
  textGreen: "#2E7D32",
  clickSecondary: "#3681C6",
  clickTertiary: "#020202",
  buttonPrText: "#ffffff",
  buttonPrOffBg: "#0202024D",
  buttonPrOffText: "#020202",
  labelText: "#FFFFFF",
  successDark: "#2E7D32",
  successLight: "#4CAF50",
  infoDark: "#3C3C3B",
  infoLight: "#90A4AE",
  warningDark: "#FF6F00",
  warningLight: "#FFCA28",
  errorDark: "#C62828",
  errorLight: "#F44336",
  chainlinkLogo: "#375BD2",
};

const darkThemeStyles: ModalIntegrationThemeStyles = {
  mainAccentLight: "#3681C6",
  mainAccentDark: "#2B4A9D",
  bgPrimary: "#020202",
  bgSecondary: "#0F0F0F",
  bgTertiary: "#ffffff",
  textPrimary: "#FFFFFF",
  textSecondary: "#3681C6",
  textRed: "#F44336",
  textOrange: "#FFCA28",
  textGreen: "#4CAF50",
  clickSecondary: "#3681C6",
  clickTertiary: "#FFFFFF",
  buttonPrText: "#FFFFFF",
  buttonPrOffBg: "#272727",
  buttonPrOffText: "#90A4AE",
  labelText: "#FFFFFF",
  successDark: "#2E7D32",
  successLight: "#4CAF50",
  infoDark: "#3C3C3B",
  infoLight: "#D1D3D4",
  warningDark: "#FF6F00",
  warningLight: "#FFCA28",
  errorDark: "#C62828",
  errorLight: "#F44336",
  chainlinkLogo: "white",
};

const styleMap: ModalIntegrationThemeStyles & ModalIntegrationStyles = {
  mainAccentLight: "--main-accent-light",
  mainAccentDark: "--main-accent-dark",
  bgPrimary: "--bg-primary",
  bgSecondary: "--bg-secondary",
  bgTertiary: "--bg-tertiary",
  textPrimary: "--text-primary",
  textSecondary: "--text-secondary",
  textTertiary: "--text-tertiary",
  textRed: "--text-red",
  textOrange: "--text-orange",
  textGreen: "--text-green",
  clickPrimary: "--click-primary",
  clickSecondary: "--click-secondary",
  clickTertiary: "--click-tertiary",
  buttonPrBg: "--button-pr-bg",
  buttonPrText: "--button-pr-text",
  buttonPrOffBg: "--button-pr-off-bg",
  buttonPrOffText: "--button-pr-off-text",
  labelBg: "--label-bg",
  labelText: "--label-text",
  successDark: "--success-dark",
  successLight: "--success-light",
  infoDark: "--info-dark",
  infoLight: "--info-light",
  warningDark: "--warning-dark",
  warningLight: "--warning-light",
  errorDark: "--error-dark",
  errorLight: "--error-light",
  width: "--modal-width",
  chainlinkLogo: "--chainlink-logo",
  fontFamily: "--font-family",
};

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);
    }
  }
}