I'm using webview_flutter plugin and when webview opens on any Xiaomi on dark mode device, it forces dark mode and I don't know how to avoid it
Here is my code:
import 'dart:async';
import 'dart:io';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
class CdsWebView extends StatefulWidget {
const CdsWebView({
Key key,
@required this.url,
}) : super(key: key);
final String url;
@override
_CdsWebViewState createState() => _CdsWebViewState();
}
class _CdsWebViewState extends State<CdsWebView> {
final Completer<WebViewController> _controller =
Completer<WebViewController>();
WebViewController _webViewController;
bool isLoading = true;
@override
void initState() {
super.initState();
if (Platform.isAndroid) WebView.platform = SurfaceAndroidWebView();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Builder(builder: (BuildContext context) {
return Stack(children: <Widget>[
WebView(
initialUrl: widget.url,
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (WebViewController webViewController) {
_controller.complete(webViewController);
_webViewController = webViewController;
},
onPageFinished: (finish) {
this.setState(() {
isLoading = false;
});
},
),
isLoading
? Container(
child: Center(
child: CircularProgressIndicator(
valueColor:
AlwaysStoppedAnimation<Color>(Colors.red),
),
),
)
: Container()
]);
}),
),
);
}
}
If it's imposible to prevented in flutter, there is a way to prevent in the webview page?
It changes the background and text color like this:
WebView test page code:
<html>
<head>
</head>
<body style="
display: flex;
justify-content: center;
align-items: center;">
<h1 style="font-family: Arial;">
My WebView Page
</h1>
</body>
</html>
Force dark was implemented to make it easier for developer to switch over to dark theme easily, to give the user an unified experience.
It analyses each view of the light-themed app, and applies a dark theme automatically before it is drawn to the screen.
In MIUI based on Android 10 or later, apps are forced to use its dark theme, which may result in ugly looking forced dark webview, and pwa application, such as 'LinkedIn Go'.
To turn this off, Go to your android folder, and go to the
\app\src\main\res\values\themes.xmlfile. There set the forceDarkAllowed to false<style name="Theme.YOUR_APP_NAME" parent="Theme.MaterialComponents.DayNight">, like thisIf this doesn't work, do the same in the
values-night/themes.xml. This should solve the issue.If you are still confused, where to put this, your final code should look something like that-