Customizing Tria SDK Appearance

The Tria SDK offers extensive customization options for its UI. You can adjust the look and feel of the authentication interface to match your application's design.

Programmatic Customization

UI Configuration Options [Login component]

These are the configuration options to customize the Login components UI. Ability to hide and display parts of the UI as well as change the text on certain parts of the login flow and the buttons as well.

// customisable UI properties
interface UIConfig {
  dappName?: string;
  showHeader?: boolean;
  headerText?: string;
  showPoweredByTria?: boolean;
  googleButtonText?: string;
  twitterButtonText?: string;
  discordButtonText?: string;
  appleButtonText?: string;
  phoneOtpButtonText?: string;
  enablePasswordLogin?: boolean;
  showDivider?: boolean;
  showHeadingPill?: boolean;
  OtpHeader?: string;
  OtpSubHeader?: string;
  OtpRetryCaption?: string;
  signupRetryText?: string;
  usernameHeadingText?: string;
  usernameSubHeadingText?: string;
  otpBgColor?: string;
  otpTextColor?: string;
  otpBoxBgColor?: string;
  otpBorderColor?: string;
  passwordInputBgColor?: string;
  passwordInputTextColor?: string;
  passwordInputBorderColor?: string;
  showCloseButton?: boolean;
  darkMode?: boolean;
  layout?: string[];
  emailPhoneLoginMethods?: string[];
  web2LoginMethods?: string[];
  web3LoginMethods?: string[];
  containerId?: string;
}

// usage
authManager.configureAuthUI({
        enablePasswordLogin: true,
        darkMode: false,
        otpBgColor: "#ffffff00",
        otpTextColor: "#000000",
        otpBoxBgColor: "#D0D0D00D",
        otpBorderColor: "rgba(0,0,0,0.5)",
        passwordInputBgColor: "rgba(208, 208, 208, 0.05)",
        passwordInputTextColor: "#101010",
        passwordInputBorderColor: "rgba(0, 0, 0, 0.25)",
        layout: ["web3", "divider", "web2"],
        web2LoginMethods: ["google", "twitter", "apple", "discord"],
        web3LoginMethods: ["metamask", "walletconnect", "phantomwallet", "rabbywallet"],
        emailPhoneLoginMethods: ["email","phone"],
});

Customizing the styles for the Login component

The css variables for the login component can be updated with the setAuthUIStyling method. An example is provided below along with the variables that can be changed and the default values that are currently set

    // customisable global css variables
    --primary-color: #7d40ff;

    --bg-color-primary: #080808;
    --bg-color-tertiary: #ffffff;

    --text-color-primary: #ffffff;
    --text-color-secondary: #d1d5db;
    --text-color-tertiary: #000000;
    --text-extra-small: 12px;
    --text-small: 14px;
    --text-base: 16px;
    --text-large: 20px;

    --button-bg: rgba(255, 255, 255, 0.02);
    --button-bg-hover: rgba(255, 255, 255, 0.1);
    --button-bg-email: rgba(255, 255, 255, 0.02);
    --button-bg-email-hover: rgba(255, 255, 255, 0.1);
    --button-bg-twitter: rgba(255, 255, 255, 0.02);
    --button-bg-twitter-hover: rgba(255, 255, 255, 0.1);
    --button-bg-google: rgba(255, 255, 255, 0.02);
    --button-bg-google-hover: rgba(255, 255, 255, 0.1);
    --button-bg-apple: rgba(255, 255, 255, 0.02);
    --button-bg-apple-hover: rgba(255, 255, 255, 0.1);

    --button-bg-primary: #ffffff;

    --pill-bg: #191919;
    --pill-bg-hover: #252525;
    --pill-border-radius: 9999px;
    --pill-padding-left: 16px;
    --pill-padding-right: 16px;
    --pill-padding-top: 4px;
    --pill-padding-bottom: 4px;

    --toggle-bg: #262626;

    --input-bg-primary: rgba(255, 255, 255, 0.05);
    --input-border-radius: 9999px;
    --input-padding-left: 16px;
    --input-padding-right: 16px;
    --input-padding-top: 6px;
    --input-padding-bottom: 6px;
    --input-border-color: rgba(255, 255, 255, 0.25);
    --input-height: 50px;

    --header-font-size: 20px;
    --sub-header-font-size: 16px;

    --modal-position: fixed;
    --modal-width: 448px;
    --modal-height: auto;
    --modal-scale-sm: 0.6;
    --modal-scale: 0.8;
    --modal-scale-md: 0.8;
    --modal-scale-lg: 0.9;
    --modal-scale-xl: 1;
    --modal-scale-2xl: 1.1;

    --border-size-primary: 1px;
    --border-radius-primary: 16px;
    --border-color-primary: rgba(255, 255, 255, 0.08);

    --padding-primary: 16px;

    --button-border-radius: 60px;
    --button-height: 100%;
    --button-width: 100%;
    --button-padding: 12px;
    --button-border: 1.5px;

    --icon-button-border-radius: 32px;
    --icon-button-background-color: rgba(255, 255, 255, 0.05);
    --icon-button-border-color: rgba(255, 255, 255, 0.25);

    --button-submit-bg: #ffffff;
    --button-submit-border-radius: 9999px;
    --button-submit-height: auto;
    --button-submit-width: 100%;
    --button-submit-padding: 12px;

    --phone-input-bg: rgba(255, 255, 255, 0.05);
    --phone-input-border-radius: 9999px;
    --phone-input-padding-left: 88px;
    --phone-input-padding-right: 16px;
    --phone-input-padding-top: 6px;
    --phone-input-padding-bottom: 6px;
    --phone-input-border-color: rgba(255, 255, 255, 0.25);
    --phone-input-height: 50px;

    --phone-input-code-bg: rgba(255, 255, 255, 0.1);
    --phone-input-code-border-radius-left: 9999px;
    --phone-input-code-border-radius-right: 0px;

    --country-dropdown-bg: #191919;
    --country-dropdown-border-radius: 16px;
    --country-dropdown-padding: 16px;
    --country-dropdown-bg-hover: #080808;

    --country-dropdown-search-bg: #252525;
    --country-dropdown-search-border-radius: 8px;

    --scrollbar-thumb-color: #888;
    --scrollbar-track-color: #171717;
    --scrollbar-thumb-color-hover: #555;

    --divider-color: rgba(255, 255, 255, 0.1);

    --gradient-stop-color-1: #9a6bff;
    --gradient-stop-color-2: #1422a1;

    --orbit-dashed-line: 3px rgba(255, 255, 255, 0.1) dashed;


    // usage
    authManager.setAuthUIStyling({
      "primary-color": "#7d40ff",

      "bg-color-primary": "#ffffff",
      "bg-color-tertiary": "#f5f5f5",

      "text-color-primary": "#000000",
      "text-color-secondary": "#000000",
      "text-color-tertiary": "#ffffff",

      "button-bg-email": "#f5f5f5",
    });

Transactions UI Configuration Options [Approval popups]

These are the configuration options to customise the UI of the transaction popups, approval for signing message, sending transactions, minting NFTs approval and other relevant popups.

// object types
interface TransactionsUIConfig {
  darkMode?: boolean;
}

// usage
authManager.configureTransactionsUI({ darkMode: false });

Wallet UI Configuration Options [Embedded Wallet]

These are the customisable properties for the embedded wallet. The wallet currently only has limited customization options. as of now switching between light mode and dark mode is possible and the primary color can be changed. This changes the glow color of the logo of the embedded wallet as well as the home page card background color when the wallet is open.

// object types
interface WalletUIConfig {
  darkMode: boolean;
  primaryColor: string;
}


// usage
authManager.configureWalletUI({
  darkMode: false,
  primaryColor: "#7D40FF",
});