Theming
Customize colors, branding, dark mode, and visual appearance of the SDK modal
Theming
The NeroMpcAuthProvider accepts uiConfig and themeMode props to control the visual appearance of modal and UI components.
Configuration
import { NeroMpcAuthProvider } from "@nerochain/mpc-sdk/react";
const uiConfig = {
primaryColor: "#6366f1",
logo: "/your-logo.svg",
appName: "My DApp",
};
function App() {
return (
<NeroMpcAuthProvider
config={{ backendUrl: "https://your-backend.example.com", chainId: 689 }}
uiConfig={uiConfig}
themeMode="dark"
>
<YourApp />
</NeroMpcAuthProvider>
);
}Provider Props for Theming
| Prop | Type | Default | Description |
|---|---|---|---|
uiConfig | UIConfig | undefined | Visual customization settings |
themeMode | ThemeMode | "auto" | Theme preference: "light", "dark", or "auto" |
UIConfig Properties
| Property | Type | Default | Description |
|---|---|---|---|
primaryColor | string | -- | Brand color for buttons and accents |
logo | string | -- | URL to your logo image |
appName | string | -- | Application name shown in the modal |
ThemeMode Options
| Value | Behavior |
|---|---|
"light" | Forces light theme regardless of system preference |
"dark" | Forces dark theme regardless of system preference |
"auto" | Follows the user's system color scheme preference |
Theme Architecture
The NeroMpcAuthProvider renders ThemeProvider as the outermost wrapper in the component tree. This ensures all modal and UI components have access to theme context. The NeroMpcAuthContext.Provider sits inside ThemeProvider, so hooks can access both theme and authentication contexts simultaneously.
Dynamic Theme Switching
Changing the themeMode prop at runtime triggers a re-render of themed components:
function App() {
const [theme, setTheme] = useState<"light" | "dark" | "auto">("auto");
return (
<NeroMpcAuthProvider
config={{ backendUrl: "https://your-backend.example.com", chainId: 689 }}
themeMode={theme}
>
<button onClick={() => setTheme("light")}>Light</button>
<button onClick={() => setTheme("dark")}>Dark</button>
<button onClick={() => setTheme("auto")}>Auto</button>
<YourApp />
</NeroMpcAuthProvider>
);
}Custom Components (Headless Mode)
For full control over the UI, use the headless SDK and build entirely custom components with the React hooks:
import { useNeroConnect, useNeroWallet } from "@nerochain/mpc-sdk/react";
function CustomLogin() {
const { connect, isConnecting } = useNeroConnect();
const { wallet, signMessage } = useNeroWallet();
return (
<div>
{!wallet ? (
<button onClick={() => connect("google")} disabled={isConnecting}>
Connect
</button>
) : (
<div>
<p>{wallet.eoaAddress}</p>
<button onClick={() => signMessage("Hello!")}>Sign</button>
</div>
)}
</div>
);
}The headless approach gives you complete control over styling, layout, and interaction patterns while still leveraging the SDK's authentication and wallet operations through hooks.