Many aspects of the UI components can be changed and customized. For example, it's possible to change:

• Colors
• Text appearances
• Backgrounds of views
• Icons

Setup theme customization

We don't support customizing the theme directly from Javascript/Typescript code yet but you can customize iOS & Android platforms via their native code.

iOS

To customize iOS Native code, we recommend using Xcode to get code completion. Open the xcworkspace of your iOS native app on Xcode: ios/[YOUR_APP_NAME].xcworkspace.

Nabla SDK is Swift only so you need to create a Swift file with the theme edit and call it from the AppDelegate file:

AppDelegate.mm:

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // Rest of the code

    [Theme configureNablaTheme];

    return YES;
}

Theme.swift:

import Foundation
import NablaCore

@objc public class Theme: NSObject {
    @objc public static func configureNablaTheme() {
        NablaTheme.Colors.Text.base = UIColor(red: 0.65, green: 0.89, blue: 0.8, alpha: 1)
        // Rest of your theme here
    }
}

Android

To customize Android native code, we recommend using Android Studio to get code completion. Open the Android project under the android folder on Android Studio.

All Nabla UI components will inherit the theme you specify for their container, this is usually the Application or Activity’s theme.

⚠️

The theme should inherit from Theme.Material3.* by Material3 for Nabla UI components to behave correctly.

The first step is to make sure your Application or Activity has a theme defined in the AndroidManifest.xml:

<manifest
    xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.yourpackage">

    <application
        <!-- Rest of the properties here -->
        android:theme="@style/AppTheme">

        <!-- Rest of the manifest -->

    </application>
</manifest>

Then you want to edit this theme (or create one if you don't have any) in a styles.xml file under the res/values folder or your app:

<resources>

    <!-- Make sure your theme extend a Material3 one! -->
    <style name="AppTheme" parent="Theme.Material3.DayNight.NoActionBar">
        <item name="backgroundColor">#F1F4F9</item>
        <item name="colorPrimary">#007AFF</item>
        <item name="android:textColorPrimary">#26282D</item>
        <!-- Rest of your theme here -->
    </style>

</resources>

Customize your theme

Now that you've set up your theme on both platform, you can check each platform's detailed documentation to see what you can customize:

• iOS theming
• Android theming