How to Use Theme Mode Component in App Using Bagisto Native

Rahul Saini

20 July 2026

In this blog, we will discuss How to Use Theme Mode Component in App Using Bagisto Native.

Introduction

Bagisto Native provides ready-to-use bridge components for Android and iOS applications. These components help connect web views with native functionalities.

Using these bridge components, you can access native features without writing extra native code. This makes development faster and easier.

One of the useful components is the Theme Mode component, which allows users to switch between light and dark themes directly from the web layer.

You can also explore our blog on building mobile applications using Next.js.

How to Create Mobile App using Next.js

What is Theme Mode Component

The Theme Mode component applies light or dark theme to the native app based on the user’s selection from the web page. It updates the app’s toolbar colors and UI elements accordingly.

This component works as a bridge between the web layer and the native layer.

Prerequisites

Before using the Search component, make sure:

Integrate Hotwire Native into your application. You can follow our Hotwire integration guide here:
How to Build a Mobile App with Hotwire
Add Bagisto Native to your project.
Register the bridge components properly.
Configure your application with Hotwire.

How to Add Bagisto Native in Your Project

Android Setup

First, you need to add the JitPack repository in your project-level Gradle file.

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        mavenCentral()
        maven { url 'https://jitpack.io' }
    }
}

dependencyResolutionManagement {

repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)

repositories {

mavenCentral()

maven { url 'https://jitpack.io' }

}

After that, add the Bagisto Native dependency in your app-level Gradle file.

dependencies {
    implementation 'com.github.SocialMobikul:BagistoNative_Android:Tag'
}

dependencies {

implementation 'com.github.SocialMobikul:BagistoNative_Android:Tag'

}

Replace Tag with the latest version.

Now sync your project, and Bagisto Native will be added successfully.

For more details, explore our Bagisto Native Android Package.

iOS Setup

For iOS, you need to use Swift Package Manager.

Open your project in Xcode and go to: File → Add Package Dependencies.

Then enter the repository URL.

https://github.com/SocialMobikul/BagistoNative_iOS

1	https://github.com/SocialMobikul/BagistoNative_iOS

After adding the package, it will be available in your project.

For more information explore our Bagisto Native iOS Package

Register Bridge Components

Android

Hotwire.registerBridgeComponents(
    *CustomBridgeComponents.all
)

Hotwire.registerBridgeComponents(

*CustomBridgeComponents.all

)

iOS

Hotwire.registerBridgeComponents(BagistoNative.coreComponents)

1	Hotwire.registerBridgeComponents(BagistoNative.coreComponents)

How Theme Mode Component Works

The Theme Mode component listens for theme change events from the web layer. When the user clicks the theme toggle icon, the web layer sends the selected mode (light or dark).

The native component receives this message and applies the corresponding theme. It updates the app’s toolbar colors, text colors, and UI elements to match the selected theme.

Android Implementation

On Android, the Theme Mode component receives the theme event from the web layer. It then sets the appropriate night mode using AppCompatDelegate.

The component also updates the toolbar colors, search view colors, and other UI elements to match the selected theme. The changes are applied instantly without restarting the app.

Android Theme Mode Flow

The user clicks the theme toggle icon on the web page. The web layer sends the selected theme mode to the Theme Mode component. The component then applies the theme to the native app.

iOS Implementation

On iOS, the Theme Mode component works similarly. It receives the theme event from the web layer and applies the selected theme to the native app.

No additional native code is required.

iOS Theme Mode Flow

The user clicks the theme toggle icon on the web page. The web layer sends the selected theme mode to the Theme Mode component. The component then applies the theme to the native app.

Benefits of Theme Mode Component

Easy to integrate
Works for both Android and iOS
No need to write native logic separately
Improves user experience

Conclusion

The Theme Mode Component in Bagisto Native helps you easily add light and dark theme support to your application. You only need to configure it once, and it will work seamlessly with your web layer.

You can also check other blogs on Hotwire Native implementation in WordPress to learn more.

To learn more about how Hotwire works, you can check the Hotwire overview and how it workflow guide.

Please check my other blogs here.