How to set backGround color Black and text white in android webview

Question

package com.example.webviewtheme;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.webkit.WebView;

public class MainActivity extends Activity {
WebView webview1;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


        webview1=(WebView)findViewById(R.id.webView1);

        String rawHTML = "<HTML>"+  
         "<body style='color: #000000; background-color: #ffffff'><h1>Hello Android </h1></body>"+  
     "</HTML>";
        webview1.setBackgroundColor(00000000);
        webview1.loadData(rawHTML, "text/HTML", "UTF-8");
    }

}

This is My code i want to set background color black and text white of webView i have tried to apply In Html But Unable to get Out put please help me how to set Night Mode in Webview text and backGround

Try these links [Link](http://stackoverflow.com/questions/11225296/how-set-text-color-of-webview-in-android) and [Link](http://stackoverflow.com/questions/1254970/changing-text-color-in-a-webview) and [Link](http://stackoverflow.com/questions/3389446/android-webview-changing-backcolor-and-font-color) — vish, Sep 24 '13 at 06:56
You can check in this answer [here](https://stackoverflow.com/a/37645059/11060846) — SagaRock101, May 16 '21 at 14:44

MHP · Answer 1 · 2020-06-03T23:09:54.430

use this

webview1=(WebView)findViewById(R.id.webView1);
    String rawHTML = "<HTML>"+ 
     "<head>"+"<style  type=\"text/css\">"+
     "body,h1{color: #000000;"+
     "background-color: #ffffff;}"+
     "</style></head>"+
     "<body><h1>Hello Android </h1></body>"+  
 "</HTML>";
    webview1.loadData(rawHTML, "text/html; charset=UTF-8",null);

UPDATE 20/June:

if you want to change web page css after it's load finished (for example when load webPageAddress with loadUrl) you can do it like this:

set javaScript enable on webView

webView.getSettings().setJavaScriptEnabled(true);

set listener on page load finish

webView.setWebViewClient(new WebViewClient() {
   @Override
   public void onPageFinished(WebView view, String url) {
      // Inject CSS on PageFinished
      injectCSS();
      super.onPageFinished(view, url);
   }
});

inject CSS

private void injectCSS() {
  webView.loadUrl(
    "javascript:document.body.style.setProperty(\"color\", \"white\");"
  );
  webView.loadUrl(
    "javascript:document.body.style.setProperty(\"background-color\", \"black\");"
  );
}

How we can do same this with loadUrl, as i am using external url for load data in webview — Meenakshi Khandelwal, Jun 03 '20 at 21:30

score 3 · Answer 2 · answered Apr 26 '14 at 06:15

Here is something that will inject Javascript into a webpage to make it invert colors:

String js ="javascript: ("
                    +"function () { "

                    +"var css = 'html {-webkit-filter: invert(100%);' +"
                    +"    '-moz-filter: invert(100%);' + "
                    +"    '-o-filter: invert(100%);' + "
                    +"    '-ms-filter: invert(100%); }',"

                    +"head = document.getElementsByTagName('head')[0],"
                    +"style = document.createElement('style');"

                    +"if (!window.counter) { window.counter = 1;} else  { window.counter ++;"
                    +"if (window.counter % 2 == 0) { var css ='html {-webkit-filter: invert(0%); -moz-filter:    invert(0%); -o-filter: invert(0%); -ms-filter: invert(0%); }'}"
                    +"};"

                    +"style.type = 'text/css';"
                    +"if (style.styleSheet){"
                    +"style.styleSheet.cssText = css;"
                    +"} else {"
                    +"style.appendChild(document.createTextNode(css));"
                    +"}"

                    //injecting the css to the head
                    +"head.appendChild(style);"
                    +"}());";

                    CustomWebView.this.loadUrl(js);

this filter is good, but on my 4.4 device it makes the text blurry. — KnIfER, Apr 17 '19 at 13:12

score 2 · Answer 3 · edited Nov 14 '14 at 09:35

2

webview.setBackgroundColor(0) makes webview transparent.

You will need to set bg color black in the HTML tag bg.

edited Nov 14 '14 at 09:35

duggu

37,851
12
116
113

answered Sep 24 '13 at 06:58

Snehal Poyrekar

735
5
17

score 2 · Answer 4 · answered Sep 24 '13 at 09:07

Ok, this is not in document, and not recommended, but it will work:

@Override
protected void onCreate(Bundle savedInstanceState) {
    ...
    webview.loadUrl("http://en.wikipedia.org/wiki/Lena_S%C3%B6derberg");
    try {
        Class clsWebSettingsClassic = 
            getClassLoader().loadClass("android.webkit.WebSettingsClassic");
        Method md = clsWebSettingsClassic.getMethod(
                "setProperty", String.class, String.class);
        md.invoke(webview.getSettings(), "inverted", "true");
        md.invoke(webview.getSettings(), "inverted_contrast", "1");
    } catch (Exception e) {}
}

This will do inverted rendering to WebView.
The range of "inverted_contrast" is about 1 to 30 (not very sure).
The result tested with android 4.2:

https://i.stack.imgur.com/GsKjX.png

it is also working for me...using this color of font and other colors are being black or white... can we get color of that? i need like night mode in webview... thanks.!! — Sanket Kachhela, Oct 11 '14 at 21:10
it throws ClassNotFoundException. I have looked at debugger - getSettings() returns WebSettings instance. — Roman Black, Jan 26 '15 at 16:10

score 1 · Answer 5 · answered Sep 24 '13 at 06:45

1

Give the following in java class

webView1.setBackgroundColor(0);

and set the colour of text in xml

answered Sep 24 '13 at 06:45

Exceptional

2,994
1
18
25

score 1 · Answer 6 · answered Sep 24 '13 at 07:02

in XML

<WebView
            android:id="@+id/web"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:background="@android:color/black" />

in java code

String str="<div style=\'background-color:transparent;padding: 5px ;color:#white'>Enter text to display in web view</div";
WebView web=(WebView)findViewById(R.id.web);
web.loadData(str,"text/html","utf-8");
web.setBackgroundColor(Color.TRANSPARENT);

Actully i want to apply Theme setting for day Mode And Night mode . — user2794306, Sep 24 '13 at 07:04

Lokesh · Answer 7 · 2013-09-24T07:08:07.770

Use this for webview backgroundColor:

   import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.webkit.WebView;

public class MainActivity extends Activity {

    WebView webview1;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


        webview1=(WebView)findViewById(R.id.webview1);

        String text = "<html><head>"
                  + "<style type=\"text/css\">body{color: #fff; background-color: #000;}"
                  + "</style></head>"
                  + "<body>"                          
                  + "Helloo Andorid"
                  + "</body></html>";

        webview1.loadData(text, "text/html", "utf-8");
        webview1.setBackgroundColor(00000000);
    }

}

It's works for me..

i have Puted another Button for Day Mode In which i have set backGround white how i will do this — user2794306, Sep 24 '13 at 07:34

score 0 · Answer 8 · answered Sep 24 '13 at 06:51

0

Hai this may help you

dialogMesage.setBackgroundColor(0x00000000);

or

myWebView.setBackgroundColor(Color.parseColor("#FFFFFF"));

answered Sep 24 '13 at 06:51

Bebin T.N

2,539
1
24
28

score 0 · Answer 9 · edited Feb 09 '18 at 14:15

You can invert colors of a WebView using its parent.

You need to implement inversion in parent. I'm using a FrameLayout, but you can use some other form of layout.

public class WebViewInverter extends FrameLayout {
     public WebViewInverter(Context context) {
        super(context);
        init();
    }

    public WebViewInverter(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public WebViewInverter(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    public WebViewInverter(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        init();
    }

    private boolean nightMode = false;

    private Paint paint = new Paint(); 
    private ColorFilter cf;
    private Rect inversionRect;

    @Override protected void dispatchDraw(Canvas c){
            inversionRect = new Rect(0, 0, getWidth(), getHeight());
            Bitmap b = Bitmap.createBitmap(getWidth(), getHeight(), Config.ARGB_8888);
            Canvas cc = new Canvas(b);
            super.dispatchDraw(cc);
            paint.setColorFilter(null);
            c.drawBitmap(b, 0, 0, paint);
            paint.setColorFilter(cf);
            c.drawBitmap(b, inversionRect, inversionRect, paint);
    }

    private void init(){
        float[] mat = new float[]
        {
            -1,  0,  0, 0,  255,
             0, -1,  0, 0,  255,
             0,  0, -1, 0,  255,
             0,  0,  0, 1,  0
        };
        cf = new ColorMatrixColorFilter(new ColorMatrix(mat));
    }

}

Place Your WebView inside inverter in your layout's file:

<your.package.name.WebViewInverter
    android:id="@+id/view_inverter"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:layout_marginLeft="@dimen/reader_side_margins"
    android:layout_marginTop="@dimen/reader_top_margin"
    android:layout_marginRight="@dimen/reader_side_margins"
    android:layout_marginBottom="@dimen/reader_bottom_margin">

    <ru.yandex.reader.widget.ReaderView
        android:id="@+id/view_reader"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</your.package.name.WebViewInverter>

The WebView should be inverted.

Omkar Ghodke · Answer 10 · 2018-02-09T09:19:10.270

-1

Android have built-in theme for night mode called Theme.AppCompat.DayNight theme

<style name="MyTheme" parent="Theme.AppCompat.DayNight">  </style>

To know more, how to implement this functionality check out the link below

https://medium.com/@chrisbanes/appcompat-v23-2-daynight-d10f90c83e94

edited Feb 09 '18 at 09:19

answered Feb 09 '18 at 09:13

Omkar Ghodke

9
1
4

How to set backGround color Black and text white in android webview

10 Answers10

Linked