🔌 Dark Mode

The DarkMode Plugin PURPLE gives you a simple interface method to request the dark mode status from within your layout template and as service in your Java/Kotlin code. On Android, it reflects the current state of the Dark Theme setting introduced in Android 10. On iOS, it reflects the Dark Mode setting that came with iOS 13.

Using Dark Mode in your Layout

The DarkMode plugin automatically adds the variable darkMode.enabled to the template engine. You can use the variable in your orb tags as exemplified in the next listing.

<Layout xmlns="urn:nevernull:mobileui:layout">
    <!-- @code{
        bgColor = darkMode.enabled ? 'black' : 'white';    } -->
    <LinearLayout width="fill_parent" orientation="vertical" height="fill_parent" padding="16dp"
                  backgroundColor="@{bgColor}">        <TextView fontWeight="bold" fontSize="20" text="DarkMode" horizontalAlign="center"
                  textColor="@{darkMode.enabled ? 'white' : 'black'}"/>    </LinearLayout>
</Layout>

As this example shows, you can also derive colors and all other settings from the dark mode information. You can even build themes from it by applying the information in your app.mv file that comes with your newly generated projects. So get creative! The sky's your limit 🌈😁.

Runtime Usage

To get runtime information about the dark mode being enabled, use the DarkMode class and inject an instance of it into your application logic. You can then request the current state with the isEnabled() method.

@Prototype
public class MainController {

    @Inject
    public DarkMode darkMode;

    @PostConstruct
    public void init() {
        System.out.println("The future is " + (darkMode.isEnabled() ? "dark" : "bright"));
    }
}

Further Reading

• Apple Guidelines on iOS Dark Mode
• Google Guidelines on Android Dark Theme