Dark Mode and MarkupExtensions now available in Uno Platform

In the past few weeks we’ve had a couple big additions to Uno Platform which you should be aware of as your Uno development just got easier – and cooler.

 

Dark Mode by @mzikmunddev

 

You have probably heard of ‘dark mode’ – a UI option which displays light text on a dark background, as opposed to the default dark text on a light background. The reduced brightness of the screen has brought many benefits – such as courtesy in situations when a screen’s bright light creates a distraction (i.e. movie theatres). Also, users report it reduces strain on their eyes when using the ‘dark mode’. Finally, ‘dark mode’ has great advantages for the battery lifetime of your devices. Now, Uno Platform supports ‘dark mode’ as well!

Thanks to the introduction of {ThemeResource} markup extension by Uno Platform core team member, Carl de Billy, you can add the Dark and High Contrast themes and automatic OS dark/light theme detection capability when the Application.RequestedTheme is not specified. The ‘dark mode’ works on iOS, Android, Windows and WebAssembly (WASM). Your app can now switch to dark theme automatically, without any additional code! The user will be able to switch between light and dark mode of your app the same way as all other applications – via Settings on their device.

MarkupExtensions by @cacchiom

MarkupExtensions were a great feature of WPF, and as of Windows 10 build 16299, they have been available to UWP developers to use in their own apps.

In XAML applications, markup extensions are a method/technique to gain a value that is neither a specific XAML object nor a primitive type. Markup extensions can be defined by opening and closing curly braces and inside those curly braces, the scope of the markup extension is defined.

As Xaml developers, we’ve come across MarkupExtensions very often since some of them we use on a regular basis: `{Binding} {StaticResource} {x:Bind} {x:Null}`. But now with support for creating your own, developers have more flexibility in their Xaml code by creating custom MarkupExtensions to suit their needs.

Here’s a very simple example of creating one:

namespace MyApp.MarkupExtensions
{
    [MarkupExtensionReturnType(ReturnType = typeof(string))]
    public class CustomString : Windows.UI.Xaml.Markup.MarkupExtension
    {
        public string MyString { get; set; }

        public int MyNumber { get; set; }

        protected override object ProvideValue()
        {
            return $"{MyString ?? string.Empty} AND #{MyNumber}";
        }
    }
}

And then in your Xaml:

xmlns:ext="using:MyApp.MarkupExtensions"
.
.
.
<TextBlock Text="{ext:CustomString MyString='Simple text', MyNumber=999}" />

Starting with **Uno.UI 2.0.275-dev.2987**, developers can now embrace this useful feature in their Uno apps and strengthen their Xaml. We hope you enjoy this new feature as we continue to improve on the capabilities of the Uno Platform.