New iOS 13 updates to try out: DarkMode & SystemFont Updates

Show and Tell
1

DarkMode: https://github.com/fuse-open/fuselibs/pull/1290
SystemFont: https://github.com/fuse-open/fuselibs/pull/1291

NB: don’t forget to uno clean and uno doctor!

Btw, if anybody has an droid with Q on it, don’t you want to write the Android version :smile:: https://developer.android.com/preview/features/darktheme#configuration_changes

Some test code…

Dark Mode:

<App>
	<JavaScript>

		var DarkMode = require("FuseJS/DarkMode");
		var Observable = require("FuseJS/Observable");

		var isDarkMode = Observable(false);

		DarkMode.on("changed", function(val) {
			console.log("DARKMODE CHANGED: " + val);
			switch(val) {
				case 'light': isDarkMode.value = false;
					break;
				case 'dark': isDarkMode.value = true;
					break;
			}
		});

		module.exports = {
			isDarkMode
		}

	</JavaScript>
	<StackPanel Alignment="Center">
		<Text ux:Name="title" Value="Hello World!" />
	</StackPanel>
	<Rectangle ux:Name="bk" Layer="Background" Color="#FFF" />

	<WhileTrue Value="{isDarkMode}">
		<Change title.Value="Hello Dark World!" />
		<Change title.Color="#FFF" />
		<Change bk.Color="#000" />
	</WhileTrue>
	<WhileFalse Value="{isDarkMode}">
		<Change title.Value="Hello World!" />
		<Change title.Color="#000" />
		<Change bk.Color="#FFF" />
	</WhileFalse>
</App>

System Font:

<App>
	<ScrollView>
		<StackPanel Alignment="Center">
			<StackPanel Alignment="CenterLeft" ItemSpacing="5">
				<Text Value="UltraLight sample text" Font="UltraLight"/>
				<Text Value="Thin sample text" Font="Thin"/>
				<Text Value="Light sample text" Font="Light"/>
				<Text Value="Regular sample text" Font="Regular"/>
				<Text Value="Medium sample text" Font="Medium"/>
				<Text Value="Semibold sample text" Font="Semibold"/>
				<Text Value="Bold sample text" Font="Bold"/>
				<Text Value="Heavy sample text" Font="Heavy"/>
				<Text Value="Black sample text" Font="Black"/>

				<Text Value="UltraLightItalic sample text" Font="UltraLightItalic"/>
				<Text Value="ThinItalic sample text" Font="ThinItalic"/>
				<Text Value="LightItalic sample text" Font="LightItalic"/>
				<Text Value="Italic sample text" Font="Italic"/>
				<Text Value="MediumItalic sample text" Font="MediumItalic"/>
				<Text Value="SemiboldItalic sample text" Font="SemiboldItalic"/>
				<Text Value="BoldItalic sample text" Font="BoldItalic"/>
				<Text Value="HeavyItalic sample text" Font="HeavyItalic"/>
				<Text Value="BlackItalic sample text" Font="BlackItalic"/>
			</StackPanel>
		</StackPanel>
	</ScrollView>
	<Rectangle ux:Name="bk" Layer="Background" Color="#FFF" />
</App>
2 Likes