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 white 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
  initialConfig={...}
  initialUIConfig={{
    modalMode: true,
    darkMode: false, // Set to false for light mode
    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)",
  }}
  initialWalletUIConfig={{
    darkMode: false, // Set to false for light mode
  }}
>
  {/* Your app components */}
</TriaProvider>

CSS Variable Overrides

You can also customize the appearance by overriding CSS variables. Here's an example of how to set up a white mode (light theme):

:root {
  --primary-color: #7d40ff;
  --bg-color-primary: #ffffff;
  --bg-color-tertiary: #f8f9fa;
  --text-color-primary: #101010;
  --text-color-secondary: #808080;
  --text-color-tertiary: #ffffff;
  --button-bg-email: rgba(208, 208, 208, 0.02);
  --button-bg-email-hover: rgba(208, 208, 208, 0.2);
  --button-bg-twitter: rgba(208, 208, 208, 0.02);
  --button-bg-twitter-hover: rgba(208, 208, 208, 0.2);
  --button-bg-google: rgba(208, 208, 208, 0.02);
  --button-bg-google-hover: rgba(208, 208, 208, 0.2);
  --button-bg-apple: rgba(208, 208, 208, 0.02);
  --button-bg-apple-hover: rgba(208, 208, 208, 0.2);
  --button-bg-metamask: rgba(208, 208, 208, 0.02);
  --button-bg-metamask-hover: rgba(208, 208, 208, 0.2);
  --button-bg-walletconnect: rgba(208, 208, 208, 0.02);
  --button-bg-walletconnect-hover: rgba(208, 208, 208, 0.2);
  --button-bg-primary: #000000;
  --pill-bg: #e5e7eb;
  --pill-bg-hover: #d1d5db;
  --toggle-bg: #e5e7eb;
  --input-bg-primary: rgba(208, 208, 208, 0.05);
  --input-border-color: rgba(0, 0, 0, 0.25);
  --border-color-primary: rgba(0, 0, 0, 0.25);
  --icon-button-background-color: rgba(208, 208, 208, 0.2);
  --icon-button-border-color: rgba(0, 0, 0, 0.25);
  --button-submit-bg: #000000;
  --phone-input-bg: rgba(208, 208, 208, 0.05);
  --phone-input-code-bg: rgba(208, 208, 208, 0.05);
  --country-dropdown-bg: #ffffff;
  --country-dropdown-bg-hover: #f3f4f6;
  --country-dropdown-search-bg: #d1d5db;
  --scrollbar-thumb-color: #cccccc;
  --scrollbar-track-color: #f3f4f6;
  --scrollbar-thumb-color-hover: #999999;
  --divider-color: rgba(0, 0, 0, 0.1);
  --background-gradient-start: #5309f0;
  --background-gradient-end: #c5c8fd;
  --orbit-dashed-line: 3px rgba(0, 0, 0, 0.3) dashed;
}

To apply these CSS variables, you can either:

Include them in your global CSS file.
Use the setAuthUIStyling method provided by the useTriaAuth hook:

import { useTriaAuth } from '@tria-sdk/authenticate-react'

function App() {
  const { setAuthUIStyling } = useTriaAuth()

  useEffect(() => {
    setAuthUIStyling({
      'primary-color': '#7d40ff',
      'bg-color-primary': '#ffffff',
      'text-color-primary': '#101010',
      // ... other variables
    })
  }, [])

  // ... rest of your component
}

Customizable Properties

Here's a list of the main customizable properties:

--primary-color: Main theme color
--bg-color-primary: Primary background color
--text-color-primary: Primary text color
--button-bg-*: Background colors for various buttons (email, Twitter, Google, etc.)
--button-bg-*-hover: Hover background colors for buttons
--input-bg-primary: Background color for input fields
--input-border-color: Border color for input fields
--scrollbar-thumb-color: Color of the scrollbar thumb
--scrollbar-track-color: Color of the scrollbar track

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.