Turn off Xiaomi MIUI dark mode in flutter WebView

flutter webview-flutter

860

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.xml file. There set the forceDarkAllowed to false<style name="Theme.YOUR_APP_NAME" parent="Theme.MaterialComponents.DayNight"> , like this

    <item name="android:forceDarkAllowed">false</item>

If 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-

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.YOUR_APP_NAME" parent="Theme.MaterialComponents.DayNight">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/blue_grey_500</item>
        <item name="colorPrimaryVariant">@color/blue_grey_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/grey_200</item>
        <item name="colorSecondaryVariant">@color/grey_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Customize your theme here. -->
        <item name="android:forceDarkAllowed">false</item>
    </style>

</resources>

860

Author by

Rafael Stefani Baptista

Updated on November 25, 2022

Comments

Rafael Stefani Baptista over 1 year

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:

Normal

Xiaomi dark mode device

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>