fix(11481): android system alert respects dark mode themes (#11552)

## **Description**

In android our system alerts do not respect our dark mode themes as they
should.

KNOWN BUG:
When switching from light mode to dark mode the changes to Android
system alerts do not happen. The user is forced to close the app and
reopen and the alerts will be in dark mode. However switching from dark
to light mode is fine.
Would love feedback on how to solve this issue

I've created an issue for this bug
[here](#11553)

## **Related issues**

Fixes:
[#11481](#11481)

## **Manual testing steps**

1. Make sure you're using an Android device, rebuild or reinstall a
fresh app to make sure the changes are there.
2. Goto Android system settings and select light mode
3. Goto the MetaMask wallet home page
4. Click on the QR code on the top right
5. Scan an invalid QR code
6. See that the system alert is white background with black text
7. Go to the Android settings and change it to dark mode
8. Go back to the MetaMask app and scan the invalid QR code again, you
should see a dark alert with white text. If not force close the app and
reopen and the changes will take place

## **Screenshots/Recordings**

NA

### **Before**

| Dark Mode (broken) | Light Mode (not broken)
|:---:|:---:|

|![Screenshot_1727810220](https://github.com/user-attachments/assets/c0d3dd99-6939-4199-918f-d127b1bd6dd7)|![Screenshot_1727809386](https://github.com/user-attachments/assets/7a1e40fb-236d-4de4-811d-7c6d3155691e)||

### **After**

| Dark Mode  | Light Mode |
|:---:|:---:|

|![darkmode](https://github.com/user-attachments/assets/543b0c4d-6e69-48c2-b965-2764378f6f03)]|![Screenshot_1727809386](https://github.com/user-attachments/assets/7a1e40fb-236d-4de4-811d-7c6d3155691e)|

## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

android/app/src/main/res/values-night/colors.xml

@@ -4,4 +4,6 @@
 	<color name="themeInverse">#FFFFFF</color>
 	<color name="navBar">#000000</color>
 	<color name="lightgray">#EBEBED</color>
+	<color name="alertTextColor">#000000</color>
+    <color name="alertBackground">#FFFFFF</color>
 </resources>

android/app/src/main/res/values-night/styles.xml

@@ -1,7 +1,7 @@
 <resources>
 
 	<!-- Base application theme. -->
-	<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
+	<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
 	 <item name="android:windowDisablePreview">true</item>
 		<!-- Customize your theme here. -->
         <item name="android:windowBackground">@drawable/app_background</item>
@@ -20,4 +20,16 @@
 		<item name="android:textColor">@color/themeInverse</item>
 	</style>
 
+	<!-- Custom Alert Dialog Theme -->
+	<style name="AlertDialogTheme" parent="Theme.AppCompat.Light.Dialog.Alert">
+		<item name="android:background">@color/alertBackground</item>
+		<item name="android:textColor">@color/alertTextColor</item>
+		<item name="android:textColorPrimary">@color/alertTextColor</item>
+		<item name="android:buttonBarButtonStyle">@style/AlertButtonStyle</item>
+	</style>
+
+    <style name="AlertButtonStyle" parent="Widget.AppCompat.Button.ButtonBar.AlertDialog">
+        <item name="android:textColor">@color/alertTextColor</item>
+    </style>
+
 </resources>

android/app/src/main/res/values/colors.xml

@@ -4,4 +4,6 @@
 	<color name="themeInverse">#000000</color>
 	<color name="navBar">#000000</color>
 	<color name="lightgray">#EBEBED</color>
+	<color name="alertTextColor">#000000</color>
+    <color name="alertBackground">#FFFFFF</color>
 </resources>

android/app/src/main/res/values/styles.xml

@@ -21,4 +21,16 @@
 		<item name="android:textColor">@color/themeInverse</item>
 	</style>
 
+	<!-- Custom Alert Dialog Theme -->
+	<style name="AlertDialogTheme" parent="Theme.AppCompat.Light.Dialog.Alert">
+		<item name="android:background">@color/alertBackground</item>
+		<item name="android:textColor">@color/alertTextColor</item>
+		<item name="android:textColorPrimary">@color/alertTextColor</item>
+		<item name="android:buttonBarButtonStyle">@style/AlertButtonStyle</item>
+	</style>
+
+    <style name="AlertButtonStyle" parent="Widget.AppCompat.Button.ButtonBar.AlertDialog">
+        <item name="android:textColor">@color/alertTextColor</item>
+    </style>
+
 </resources>

android/app/src/qa/res/values-night/colors.xml

@@ -4,4 +4,6 @@
 	<color name="themeInverse">#FFFFFF</color>
 	<color name="navBar">#000000</color>
 	<color name="lightgray">#EBEBED</color>
+	<color name="alertTextColor">#000000</color>
+    <color name="alertBackground">#FFFFFF</color>
 </resources>

android/app/src/qa/res/values-night/styles.xml

@@ -1,7 +1,7 @@
 <resources>
 
 	<!-- Base application theme. -->
-	<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
+	<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
 	 <item name="android:windowDisablePreview">true</item>
 		<!-- Customize your theme here. -->
         <item name="android:windowBackground">@drawable/app_background</item>
@@ -20,4 +20,15 @@
 		<item name="android:textColor">@color/themeInverse</item>
 	</style>
 
+	<!-- Custom Alert Dialog Theme -->
+	<style name="AlertDialogTheme" parent="Theme.AppCompat.Light.Dialog.Alert">
+		<item name="android:background">@color/alertBackground</item>
+		<item name="android:textColor">@color/alertTextColor</item>
+		<item name="android:textColorPrimary">@color/alertTextColor</item>
+		<item name="android:buttonBarButtonStyle">@style/AlertButtonStyle</item>
+	</style>
+
+    <style name="AlertButtonStyle" parent="Widget.AppCompat.Button.ButtonBar.AlertDialog">
+        <item name="android:textColor">@color/alertTextColor</item>
+    </style>
 </resources>

android/app/src/qa/res/values/colors.xml

@@ -4,4 +4,6 @@
 	<color name="themeInverse">#000000</color>
 	<color name="navBar">#000000</color>
 	<color name="lightgray">#EBEBED</color>
+	<color name="alertTextColor">#000000</color>
+    <color name="alertBackground">#FFFFFF</color>
 </resources>

android/app/src/qa/res/values/styles.xml

@@ -21,4 +21,15 @@
 		<item name="android:textColor">@color/themeInverse</item>
 	</style>
 
+	<style name="AlertDialogTheme" parent="Theme.AppCompat.Light.Dialog.Alert">
+		<item name="android:background">@color/alertBackground</item>
+		<item name="android:textColor">@color/alertTextColor</item>
+		<item name="android:textColorPrimary">@color/alertTextColor</item>
+		<item name="android:buttonBarButtonStyle">@style/AlertButtonStyle</item>
+	</style>
+
+    <style name="AlertButtonStyle" parent="Widget.AppCompat.Button.ButtonBar.AlertDialog">
+        <item name="android:textColor">@color/alertTextColor</item>
+    </style>
+
 </resources>