Changes

Mobile XAML

3,036 bytes added, 13 January
/* UBIK Go (Maui) Customizing Guide {{Version/MobileSince|5.1}} */ Adding dark theme cookbook
= UBIK Go (Maui) Customizing Guide {{Version/MobileSince|5.1}} =
The change to Maui was taken as an opportunity , both to visually update the client's default UI, and to add some quality of life changes aiming to reduce the amount of customizing needed. == Dark Theme ==While UBIK Go does not include a Dark Theme by default, a lot of effort was invested in optimizing the color resources used throughout the app, so that a dark theme can be quickly customized. Furthermore, below is a list of recommended changes that result in a functional dark theme. '''In UBIKThemes:'''<syntaxhighlight lang="xml"><x:String x:Key="TextFontFamily">InterL</x:String></syntaxhighlight>Replace the value for TextFontFamily with "InterL"; It is recommended to use a thinner font as white on black looks bolder than the inverse.A 'Light' version of the default font font was added and can be accessed using the tag InterL. <syntaxhighlight lang="xml"><Color x:Key="UBIKRegularTextColor">White</Color><Color x:Key="UBIKMediumTextColor">#A3ffffff</Color><Color x:Key="UBIKBasePageColor">#3a3a3c</Color><Color x:Key="UBIKMainThemeColor">#2c2c2e</Color> <Color x:Key="UBIKBorderColor">#181719</Color><Color x:Key="UBIKElementColor">#2c2c2e</Color><Color x:Key="UBIKLightElementColor">#222124</Color><Color x:Key="UBIKFinishedElementColor">#2a2a2b</Color><Color x:Key="UBIKOverlayElementColor">#3D000000</Color><Color x:Key="UBIKImageOverlayColor">#A3000000</Color> <Color x:Key="UBIKButtonColor">#181719</Color><Color x:Key="UBIKButtonTextColor">White</Color> <Color x:Key="UBIKButtonToggledColor">White</Color><Color x:Key="UBIKButtonToggledTextColor">Black</Color> <Color x:Key="UBIKPDFSelectedToolColor">White</Color><Color x:Key="UBIKPDFSelectedToolTextColor">#292929</Color><Color x:Key="UBIKPDFTextColor">White</Color><Color x:Key="UBIKPDFBaseColor">#181719</Color></syntaxhighlight>Replace the above color resources (or similar). <syntaxhighlight lang="xml"><Shadow x:Key="UBIKPanelShadow" Brush="Black" ... /></syntaxhighlight>Change the value for the attribute Brush to "Black" to darken the panel shadows. <syntaxhighlight lang="xml"><Color x:Key="UBIKProgressBarUndefinedStatuscolor">#636365</Color>...<Style x:Key="UBIKProgressBar" TargetType="controls:ProgressBar"> <Setter Property="StatusColor" Value="{Binding ClassificationHandler.StatusColor, Converter={StaticResource IntToColor}, ConverterParameter={StaticResource UBIKProgressBarUndefinedStatuscolor}}" /></Style></syntaxhighlight>The light theme uses UBIKElementColor for the progress bar color when none is defined on the server. However, this does not invert well in a dark theme. Therefore a new color resource should be introduced ("UBIKProgressBarUndefinedStatuscolor") and used in the ConverterParameter of the IntToColor converter, which does not accept a color hex code directly.  '''In UBIKSplashArea:''' Follow the instructions embedded within the file to replace the splash image with a custom logo. Alternatively, simply adapt the Source attribute of the Image control to "splashlogoinverse.png" to apply an inversion of the UBIK Go logo.  == Increased FontSize ==tbd.
[[Category:Client|Xamarin XAML]]
728
edits