Set Dark Mode Setting

Using this Action, you can set the app theme to Light/Dark or set it as per the system.

As Per System

Manually Setting Theme Mode

Prerequisites

Before you add this action, configure the light and dark mode colors from Theme Settings > Colors section.

Types of Dark Mode Setting

There are three types of the mode you can set:

• From System: Set the Light/Dark Mode based on system preference. That means you don't need to build the Light/Dark Mode switch UI in your app. The dark mode will be set automatically if a user has set the dark mode in the Android/iOS operating system.

• Light Mode: Set the theme mode to Light.

• Dark Mode: Set the theme mode to Dark.

Defining Set Dark Mode Setting Action

Go to your project page on FlutterFlow and follow the steps below to define the Set Dark Mode Setting Action to any widget.

1. Select Actions from the Properties panel (the right menu)

2. Click + Add Action button

3. Choose a gesture from the dropdown among On Tap, On Double Tap, or On Long Press.

4. Select the Action Type as Set Dark Mode Setting.

5. Set the Setting Source to Select Setting.

6. Set the Dark Mode Setting to any amongst the From System, Light Mode, Dark Mode.

FAQ

How do I set dark mode as the default theme in my application?

Follow the same steps as Defining Set Dark Mode Setting Action above but add the action Set Dark Mode Setting on On Page Load instead of the usual On Tap gestures. This will update the default mode to dark mode irrespective of the system settings of the user's device.