Detecting Dark Mode in a Native App

0
Hi, is it possible to detect if a user is using Dark Mode in a nanoflow in a native application? I have a API call the reads some rendered HTML text, the HTML is saved as black text, but in dark mode you can’t read it.  I want to create a second API call that has the text as white – so I need the app to check if Light Mode is enabled called API1 else call API2.
asked
3 answers
7

Hello Gareth,

 

You can also use a JavaScript action to accomplish this. Indeed, Mendix already do this kind of verification!

If you check your custom-variables.js file, see the line 29:

 

export const darkMode = Appearance.getColorScheme() === "dark";

 

Therefore, you can use the same approach in a JavaScript Action.

 

// This file was generated by Mendix Studio Pro.
//
// WARNING: Only the following code will be retained when actions are regenerated:
// - the import list
// - the code between BEGIN USER CODE and END USER CODE
// - the code between BEGIN EXTRA CODE and END EXTRA CODE
// Other code you write will be lost the next time you deploy the project.
import "mx-global";
import { Big } from "big.js";
import { Appearance, Platform } from "react-native";

// BEGIN EXTRA CODE
// END EXTRA CODE

/**
 * @returns {Promise.<boolean>}
 */
export async function JSA_IsDarkMode() {
	// BEGIN USER CODE
	const isDarkMode = Appearance.getColorScheme() === "dark";
	console.log(`JSA_IsDarkMode: ${isDarkMode}`);
	return isDarkMode;
	// END USER CODE
}

 

Then, use this JSAction in a Nanoflow:

 

The results are shown below:

No Dark Mode:

 

With DarkMode

 

Hope this helps!

answered
1

If you can somehow get hold of the Javascript context, using the below method you can understand the color-schemes or so called dark/light modes.
 

window.matchMedia('(prefers-color-scheme: dark)').matches
// this should give you a boolean response in true/false based on which mode you are in

Since the mendix mobile app is a hybrid app you can get hold of the window object.

Let me know if this worked for you. Good luck. 

answered
0

I have used the same approach but not able to change color for darkmode 

answered