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. The example code below shows a full dark mode setup. Here's how you can customize the appearance:

Programmatic Customization

You can customize the UI by passing configuration options when initializing the TriaProvider:

<TriaProvider
  //Below is the default uiConfig, you can customize it as per your need 
  uiConfig={{
    primaryColor: "rgb(128, 69, 255)",
    primaryBgColor: "black",
    textPrimaryColor: "white",
    socialButtonBgColor: "rgba(255, 255, 255, 0.02)",
    socialButtonBorderColor: "rgba(255, 255, 255, 0.05)",
    socialButtonOnPressBgColor: "rgba(255, 255, 255, 0.05)",
    socialButtonOnPressBorderColor: "rgba(255, 255, 255, 0.12)",
    socialButtonText: "rgba(255, 255, 255, 0.80)",
    solidButtonBgColor: "rgba(255, 255, 255, 1)",
    solidButtonBorderColor: "rgba(255, 255, 255, 1)",
    solidButtonOnPressBgColor: "rgba(255, 255, 255, 0.9)",
    solidButtonOnPressBorderColor: "rgba(255, 255, 255, 0.9)",
    solidButtonText: "#101010",
    inputBgPrimary: "transparent",
    inputBorderColor: "rgba(255, 255, 255, 0.25)",
    inputTextColor: "#FAFAFA",
    darkMode: true,
    dappName: "My Dapp",
    emailPhoneLoginMethods: ["email", "phone"],
    web2LoginMethods: ["google", "discord", "twitter", "apple"],
    headerText: "Get Started",
    showPoweredByTria: true,
    googleButtonText: "Continue with Google",
    twitterButtonText: "Continue with X",
    appleButtonText: "Continue with Apple",
    discordButtonText: "Continue with Discord",
    phoneOtpButtonText: "Next",
    showDivider: true,
    OtpHeader: "Enter OTP",
    OtpSubHeader: "Verify your account using 6-digit code sent to:",
    OtpRetryCaption: "Resend",
    usernameHeadingText: "Create Tria name",
    usernameSubHeadingText: "This will be your in-game name.",
    layout: ["email-phone", "divider", "web2"],
    authenticatedScreen: "home",
    tncPrechecked: true,
  }}
>
  {/* Your app components */}
</TriaProvider>

Customizable Properties

Here's a list of the main customizable properties:

primaryColor: Main theme color
primaryBgColor: Primary background color
textPrimaryColor: Primary text color
socialButtonBgColor: Background colors for various buttons (email, Twitter, Google, etc.)
socialButtonOnPressBgColor: Pressed background colors for social buttons
socialButtonText: Text color for social buttons
solidButtonBgColor: Background color for solid buttons (e.g., Next, Sign In)
solidButtonOnPressBgColor: Pressed background colors for social buttons
solidButtonText: Text color for solid buttons
inputBgPrimary: Background color for input fields
inputBorderColor: Border color for input fields
inputTextColor: Text color for input fields

Best Practices

Consistency: Ensure your custom theme is consistent with your overall application design.
Contrast: Maintain good contrast ratios between text and background colors for readability.
Testing: Test your custom theme across different devices and screen sizes to ensure a good user experience.
Accessibility: Consider color-blind and low-vision users when choosing your color scheme.

By leveraging these customization options, you can seamlessly integrate the Tria SDK into your application while maintaining your brand's look and feel.