Additional support for system theme setting (#1124)

* first pass with iOS 13+ support

* tweaks for ios pre-13

* Added Android support for dark/light splash & detection with default theme

* update cipher cell text color on system theme change (android)

src/Android/Android.csproj

@@ -200,6 +200,7 @@
     <AndroidResource Include="Resources\mipmap-xxhdpi\ic_launcher_round.png" />
     <AndroidResource Include="Resources\mipmap-xxxhdpi\ic_launcher.png" />
     <AndroidResource Include="Resources\mipmap-xxxhdpi\ic_launcher_round.png" />
+    <AndroidResource Include="Resources\values-night\styles.xml" />
     <AndroidResource Include="Resources\values\styles.xml" />
     <AndroidResource Include="Resources\values\colors.xml" />
   </ItemGroup>
@@ -255,9 +256,6 @@
   <ItemGroup>
     <AndroidResource Include="Resources\drawable\logo.png" />
   </ItemGroup>
-  <ItemGroup>
-    <AndroidResource Include="Resources\values-v21\styles.xml" />
-  </ItemGroup>
   <ItemGroup>
     <AndroidResource Include="Resources\drawable\refresh.png" />
   </ItemGroup>

src/Android/MainActivity.cs

@@ -25,7 +25,7 @@ namespace Bit.Droid
     [Activity(
         Label = "Bitwarden",
         Icon = "@mipmap/ic_launcher",
-        Theme = "@style/LightTheme.Splash",
+        Theme = "@style/LaunchTheme",
         MainLauncher = true,
         ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
     [Register("com.x8bit.bitwarden.MainActivity")]
@@ -334,7 +334,11 @@ namespace Bit.Droid
 
         private void UpdateTheme(string theme)
         {
-            if (theme == "dark")
+            if (theme == "light")
+            {
+                SetTheme(Resource.Style.LightTheme);
+            }
+            else if (theme == "dark")
             {
                 SetTheme(Resource.Style.DarkTheme);
             }
@@ -348,7 +352,14 @@ namespace Bit.Droid
             }
             else
             {
-                SetTheme(Resource.Style.LightTheme);
+                if (_deviceActionService.UsingDarkTheme())
+                {
+                    SetTheme(Resource.Style.DarkTheme);
+                }
+                else
+                {
+                    SetTheme(Resource.Style.LightTheme);
+                }
             }
         }
 

src/Android/Properties/AndroidManifest.xml

@@ -24,7 +24,7 @@
 
   <application
     android:label="Bitwarden"
-    android:theme="@style/LightTheme.Splash"
+    android:theme="@style/LaunchTheme"
     android:allowBackup="false"
     tools:replace="android:allowBackup"
     android:icon="@mipmap/ic_launcher"

src/Android/Renderers/CipherViewCellRenderer.cs

@@ -27,12 +27,15 @@ namespace Bit.Droid.Renderers
         private static Android.Graphics.Color _textColor;
         private static Android.Graphics.Color _mutedColor;
         private static Android.Graphics.Color _disabledIconColor;
+        private static bool _usingLightTheme;
 
         private AndroidCipherCell _cell;
 
         protected override Android.Views.View GetCellCore(Cell item, Android.Views.View convertView,
             ViewGroup parent, Context context)
         {
+            // TODO expand beyond light/dark detection once we support custom theme switching without app restart
+            var themeChanged = _usingLightTheme != ThemeManager.UsingLightTheme;
             if (_faTypeface == null)
             {
                 _faTypeface = Typeface.CreateFromAsset(context.Assets, "FontAwesome.ttf");
@@ -41,18 +44,19 @@ namespace Bit.Droid.Renderers
             {
                 _miTypeface = Typeface.CreateFromAsset(context.Assets, "MaterialIcons_Regular.ttf");
             }
-            if (_textColor == default(Android.Graphics.Color))
+            if (_textColor == default(Android.Graphics.Color) || themeChanged)
             {
                 _textColor = ThemeManager.GetResourceColor("TextColor").ToAndroid();
             }
-            if (_mutedColor == default(Android.Graphics.Color))
+            if (_mutedColor == default(Android.Graphics.Color) || themeChanged)
             {
                 _mutedColor = ThemeManager.GetResourceColor("MutedColor").ToAndroid();
             }
-            if (_disabledIconColor == default(Android.Graphics.Color))
+            if (_disabledIconColor == default(Android.Graphics.Color) || themeChanged)
             {
                 _disabledIconColor = ThemeManager.GetResourceColor("DisabledIconColor").ToAndroid();
             }
+            _usingLightTheme = ThemeManager.UsingLightTheme;
 
             var cipherCell = item as CipherViewCell;
             _cell = convertView as AndroidCipherCell;

src/Android/Resources/values-night/styles.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<resources>
+  <!-- Launch theme (for auto dark/light based on system) -->
+  <style name="LaunchTheme" parent="DarkTheme.Base">
+    <item name="android:windowBackground">@drawable/splash_screen_dark</item>
+    <item name="android:windowNoTitle">true</item>
+  </style>
+</resources>

src/Android/Resources/values-v21/styles.xml

@@ -1,11 +0,0 @@
-<?xml version="1.0" encoding="utf-8" ?>
-<resources>
-  <style name="LightTheme" parent="LightTheme.Base">
-  </style>
-  <style name="DarkTheme" parent="DarkTheme.Base">
-  </style>
-  <style name="BlackTheme" parent="BlackTheme.Base">
-  </style>
-  <style name="NordTheme" parent="NordTheme.Base">
-  </style>
-</resources>

src/Android/Resources/values/styles.xml

@@ -1,5 +1,11 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <resources xmlns:tools="http://schemas.android.com/tools">
+  <!-- Launch theme (for auto dark/light based on system) -->
+  <style name="LaunchTheme" parent="LightTheme.Base">
+    <item name="android:windowBackground">@drawable/splash_screen</item>
+    <item name="android:windowNoTitle">true</item>
+  </style>
+
   <!-- Light theme -->
   <style name="LightTheme" parent="LightTheme.Base">
   </style>

src/Android/Services/DeviceActionService.cs

@@ -8,6 +8,7 @@ using Android.App;
 using Android.App.Assist;
 using Android.Content;
 using Android.Content.PM;
+using Android.Content.Res;
 using Android.Nfc;
 using Android.OS;
 using Android.Provider;
@@ -710,6 +711,16 @@ namespace Bit.Droid.Services
 
         public bool UsingDarkTheme()
         {
+            try
+            {
+                if (Build.VERSION.SdkInt >= BuildVersionCodes.Q)
+                {
+                    var app = CrossCurrentActivity.Current.AppContext;
+                    var uiModeFlags = app.Resources.Configuration.UiMode & UiMode.NightMask;
+                    return uiModeFlags == UiMode.NightYes;
+                }
+            }
+            catch { }
             return false;
         }
 

src/App/App.csproj

@@ -14,7 +14,7 @@
 
   <ItemGroup>
     <PackageReference Include="Microsoft.AppCenter.Crashes" Version="3.2.1" />
-    <PackageReference Include="Plugin.Fingerprint" Version="2.1.1" />
+    <PackageReference Include="Plugin.Fingerprint" Version="2.1.2" />
     <PackageReference Include="Xamarin.Essentials" Version="1.5.3.2" />
     <PackageReference Include="Xamarin.FFImageLoading.Forms" Version="2.4.11.982" />
     <PackageReference Include="Xamarin.Forms" Version="4.5.0.725" />

src/iOS/Info.plist

@@ -125,5 +125,7 @@
 	<string>Use Face ID to unlock your vault.</string>
 	<key>NFCReaderUsageDescription</key>
 	<string>Use Yubikeys for two-facor authentication.</string>
+	<key>UILaunchImages</key>
+	<string>Resources/Assets.xcassets/LaunchScreen.imageset</string>
 </dict>
 </plist>

src/iOS/LaunchScreen.storyboard

@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="6211" systemVersion="14A298i" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" initialViewController="5">
     <dependencies>
         <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="6204"/>
@@ -14,9 +14,9 @@
                     <view key="view" contentMode="scaleToFill" id="6">
                         <rect key="frame" x="0.0" y="0.0" width="600" height="600"/>
                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
-                        <color key="backgroundColor" customColorSpace="calibratedWhite" colorSpace="calibratedRGB" red="0.92549019607843142" green="0.94117647058823528" blue="0.96078431372549022" alpha="1"/>
+                        <color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
                         <subviews>
-                            <imageView userInteractionEnabled="NO" contentMode="scaleToFill" id="16" translatesAutoresizingMaskIntoConstraints="NO" image="logo.png">
+                            <imageView userInteractionEnabled="NO" contentMode="scaleToFill" id="16" translatesAutoresizingMaskIntoConstraints="NO" image="LaunchScreen">
                                 <rect key="frame" x="159" y="248" width="282" height="44"/>
                             </imageView>
                         </subviews>
@@ -25,7 +25,6 @@
                             <constraint id="20" firstItem="6" firstAttribute="centerX" secondItem="16" secondAttribute="centerX"/>
                         </constraints>
                     </view>
-                    <connections/>
                 </viewController>
                 <placeholder placeholderIdentifier="IBFirstResponder" id="7" userLabel="First Responder" sceneMemberID="firstResponder"/>
             </objects>
@@ -54,7 +53,7 @@
         <image name="Icon.png" width="57" height="57"/>
         <image name="ion_chevron_right.png" width="14" height="14"/>
         <image name="ion_plus.png" width="22" height="22"/>
-        <image name="logo.png" width="282" height="44"/>
+        <image name="LaunchScreen" width="282" height="44"/>
         <image name="cogs.png" width="29" height="29"/>
         <image name="eye.png" width="22" height="22"/>
         <image name="eye_slash.png" width="22" height="22"/>

src/iOS/Resources/Assets.xcassets/LaunchScreen.imageset/Contents.json

@@ -0,0 +1,68 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "idiom" : "universal"
+    },
+    {
+      "filename" : "logo.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "filename" : "logo_white.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "logo@2x.png",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "filename" : "logo_white@2x.png",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "logo@3x.png",
+      "idiom" : "universal",
+      "scale" : "3x"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "filename" : "logo_white@3x.png",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

src/iOS/iOS.csproj

@@ -144,6 +144,13 @@
     <ImageAsset Include="Resources\Assets.xcassets\AppIcons.appiconset\Contents.json">
       <Visible>false</Visible>
     </ImageAsset>
+    <ImageAsset Include="Resources\Assets.xcassets\LaunchScreen.imageset\Contents.json" />
+    <ImageAsset Include="Resources\Assets.xcassets\LaunchScreen.imageset\logo.png" />
+    <ImageAsset Include="Resources\Assets.xcassets\LaunchScreen.imageset\logo%402x.png" />
+    <ImageAsset Include="Resources\Assets.xcassets\LaunchScreen.imageset\logo%403x.png" />
+    <ImageAsset Include="Resources\Assets.xcassets\LaunchScreen.imageset\logo_white.png" />
+    <ImageAsset Include="Resources\Assets.xcassets\LaunchScreen.imageset\logo_white%402x.png" />
+    <ImageAsset Include="Resources\Assets.xcassets\LaunchScreen.imageset\logo_white%403x.png" />
   </ItemGroup>
   <ItemGroup>
     <InterfaceDefinition Include="LaunchScreen.storyboard" />
@@ -388,4 +395,7 @@
   <ItemGroup>
     <BundleResource Include="Resources\logo_white%403x.png" />
   </ItemGroup>
+  <ItemGroup>
+    <Folder Include="Resources\Assets.xcassets\LaunchScreen.imageset\" />
+  </ItemGroup>
 </Project>