How to disable darkmode in flutter webview?

Question

i have a simple code here that is just supposed to display a webpage using webview_flutter (https://pub.dev/packages/webview_flutter)

However, it automatically enables dark mode and displays dark version of the website. How can i prevent this?

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
    if (Platform.isAndroid) WebView.platform = SurfaceAndroidWebView();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text("Mobile App"),
            backgroundColor: Colors.blueGrey,
          ),
          body: WebView(
            initialUrl: 'https://flutter.dev',
            javascriptMode: JavascriptMode.unrestricted,
          )),
      debugShowCheckedModeBanner: false,
    );
  }
}

you can specify the `theme` parameter in the `MaterialApp` and pass it the default theme you are using. — Asim Jawad, Aug 20 '21 at 05:24

score 0 · Answer 1 · answered Aug 20 '21 at 06:34

0

Set your MaterialApp theme like.

MaterialApp(
      theme: ThemeData.light(), //<- specify here light()
      home: Scaffold(
          appBar: AppBar(
            title: Text("Mobile App"),
            backgroundColor: Colors.blueGrey,
          ),
          body: WebView(
            initialUrl: 'https://flutter.dev',
            javascriptMode: JavascriptMode.unrestricted,
          )),
      debugShowCheckedModeBanner: false,
    );

answered Aug 20 '21 at 06:34

Rohit Chaurasiya

597
5
12

Thanks for the answer but i tried this and it didn't work. Theme data doesn't seem to affect webview – Archangel Aug 20 '21 at 06:57
https://stackoverflow.com/questions/57449900/letting-webview-on-android-work-with-prefers-color-scheme-dark check this one may solve your issue. – Rohit Chaurasiya Aug 20 '21 at 09:20

How to disable darkmode in flutter webview?

1 Answers1