안드로이드 WebView 테마 적용하기 (다크모드 완벽 대응)

최근 많은 앱들이 다크 모드(Dark Mode) 를 기본으로 지원하고 있죠.
그런데 막상 WebView에 웹 콘텐츠를 띄우면 앱 테마와 따로 놀 때가 있습니다.
오늘은 Android 5.0 이상부터 WebView에 테마(특히 다크모드)를 적용하는 방법을 단계별로 정리해볼게요.

 

---

1. 기본 WebView 테마 설정

먼저 WebView의 기본 UI부터 다듬어 봅시다.

배경색, 스크롤바 스타일, 다크모드 여부 등을 지정할 수 있습니다.

WebView webView = findViewById(R.id.webView);
WebSettings webSettings = webView.getSettings();

// 기본 설정
webSettings.setJavaScriptEnabled(true);
webView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);

// 배경색 변경
webView.setBackgroundColor(Color.WHITE);

// Android 10 이상: 다크모드 자동 적용
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
    webView.setForceDarkAllowed(true);
}

setForceDarkAllowed(true)는 Android 10(API 29) 이상에서만 적용됩니다.
구버전(5.0~9.0)에서는 CSS를 직접 조작해야 합니다.

 

---

2. 구버전(5.0~9.0) 다크모드 수동 적용

Android 9 이하에서는 ForceDark 기능이 없기 때문에 JavaScript를 이용해 CSS를 주입해주면 됩니다.

if (Build.VERSION.SDK_INT < Build.VERSION_CODES.Q) {
    String darkCss = "body { background-color: #121212; color: #FFFFFF; }";

    webView.setWebViewClient(new WebViewClient() {
        @Override
        public void onPageFinished(WebView view, String url) {
            super.onPageFinished(view, url);
            webView.loadUrl("javascript:(function() {" +
                    "var style = document.createElement('style');" +
                    "style.innerHTML = '" + darkCss + "';" +
                    "document.head.appendChild(style);" +
                    "})()");
        }
    });
}

이렇게 하면 모든 웹페이지에 간단한 다크모드 스타일을 덧씌울 수 있습니다.
물론 CSS를 세밀하게 다듬으면 훨씬 자연스럽게 연출할 수 있죠.

 

---

3. 시스템 테마(라이트/다크)에 따라 자동 전환

앱 전체가 다크모드를 지원한다면 WebView도 시스템 테마에 맞춰 자동 전환되도록 만들어야 일관성이 생깁니다.

int nightModeFlags =
        getResources().getConfiguration().uiMode &
        Configuration.UI_MODE_NIGHT_MASK;

switch (nightModeFlags) {
    case Configuration.UI_MODE_NIGHT_YES:
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
            webView.getSettings().setForceDark(WebSettings.FORCE_DARK_ON);
        } else {
            webView.setBackgroundColor(Color.BLACK);
        }
        break;

    case Configuration.UI_MODE_NIGHT_NO:
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
            webView.getSettings().setForceDark(WebSettings.FORCE_DARK_OFF);
        } else {
            webView.setBackgroundColor(Color.WHITE);
        }
        break;
}

💡 이렇게 하면 시스템이 다크모드일 때 자동으로 어두운 배경이 적용됩니다.

 

---

 4. 앱 테마와 WebView 조화 맞추기

앱 테마(themes.xml)에서 지정한 배경색을 WebView에도 그대로 반영하면 디자인 일관성이 좋아집니다.

<!-- res/values/themes.xml -->
<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
    <item name="android:background">?attr/colorBackground</item>
</style>

그리고 Java 코드에서 해당 색상을 적용합니다.

TypedValue value = new TypedValue();
getTheme().resolveAttribute(android.R.attr.colorBackground, value, true);
webView.setBackgroundColor(value.data);