WebView에서 웹 콘텐츠 어둡게 하기

Android 10 이상에서 앱은 어두운 테마 사용 후 자동으로 변경됨 밝은 앱 테마와 어두운 앱 테마 간의 차이 일치 기준 현재 앱 테마, WebView의 웹 콘텐츠 밝은 스타일, 어두운 스타일 또는 기본 스타일을 사용할 수도 있습니다.

WebView의 동작은 prefers-color-scheme 드림 및 color-scheme 있습니다. 가능한 경우 원하는 웹 콘텐츠를 작성하고 WebView에 표시할 때 어두운 테마를 정의해야 합니다. 웹사이트 및 WebView가 웹 콘텐츠의prefers-color-scheme 앱 테마에 추가합니다.

다음 표에서는 WebView가 앱에서 웹 콘텐츠를 렌더링하는 방법을 설명합니다. 앱 조건에 따라 다음과 같이 변경합니다.

콘텐츠 작성자 스타일 지정

앱의 isLightTheme 속성 앱의 테마가 밝은지 또는 어두운지 나타냅니다. WebView가 항상 설정 isLightTheme에 따르면 prefers-color-scheme입니다. isLightTheme가 true인 경우 지정되지 않은 경우 prefers-color-scheme은 light입니다. 그렇지 않은 경우에는 dark입니다.

즉, 웹 콘텐츠에서 prefers-color-scheme 및 콘텐츠 작성자가 정의한 밝은 테마 또는 어두운 테마 앱 테마와 일치하도록 웹 콘텐츠에 항상 자동으로 적용됩니다.

알고리즘적 어둡게

웹 콘텐츠에서 특정 이미지가 prefers-color-scheme님, 앱은 필요한 경우 WebView가 알고리즘 방식으로 다크 웹 UI를 웹 콘텐츠에 적용할 수 있습니다.

앱이 앱 수준 알고리즘 방식으로 어두운 테마 강제 적용 앱에 어두운 테마를 적용하는 방법은 다음과 같습니다. 어두운 테마 강제 설정으로 웹 콘텐츠에 알고리즘 어둡게 하기 허용

앱에서 어두운 테마 강제 설정을 사용하지 않는 경우 앱이 강제로 어둡게 기능을 사용할 수 있는 시점을 지정하는 방법 WebView의 알고리즘에 따른 어둡게 하기는 앱의 대상 API 수준을 참조하세요. Android 13 이상을 타겟팅하는 앱은 다음 섹션을 참고하세요. 자세한 내용은 Android 12 이하를 타겟팅하는 앱을 참고하세요.

강제로 어둡게 기능을 사용하여 웹 콘텐츠에 알고리즘 어둡게 하기 허용

앱이 앱 수준 어두운 테마 강제 적용: WebView가 다음 조건을 충족하는 경우 웹 콘텐츠를 어둡게 하는 알고리즘이 표시됩니다.

• WebView와 상위 요소에서는 강제로 어둡게 기능을 허용합니다.
• 현재 활동 테마는 밝은 테마와 함께 isLightTheme이(가) 다음으로 설정됨 true입니다.
• 웹 콘텐츠 작성자가 어둡게 하기를 명시적으로 사용 중지하지 않았습니다.
• Android 13 (API 수준 33) 이상을 타겟팅하는 앱의 경우 웹 콘텐츠는 prefers-color-scheme를 사용하지 않습니다.
• Android 12 (API 수준 32) 이하를 타겟팅하는 앱의 경우: 앱에서 WebView의 forceDarkMode 설정 ~ FORCE_DARK_AUTO 어두운 테마 강제 적용 전략은 DARK_STRATEGY_USER_AGENT_DARKENING_ONLY:

WebView와 모든 상위 요소는 '강제 종료'를 사용하여 View.setForceDarkAllowed() 기본값은 setForceDarkAllowed() 속성에서 Android 테마(또한 true로 설정해야 함)

어두운 모드 강제 설정은 기본적으로 이전 버전과 호환되는 앱의 이전 버전과의 호환성을 위해 자체 어두운 테마를 제공하지 않습니다. 앱에서 어두운 테마 강제 설정을 사용하는 경우 어두운 테마 지원 추가

알고리즘 어둡게 하기 허용 (Android 13 이상을 타겟팅하는 앱)

앱 수준의 어두운 테마 강제 설정을 사용하지 않고 Android 13 (API 수준)을 타겟팅하는 앱의 경우 33) 이상을 실행하는 경우 AndroidX를 사용합니다. setAlgorithmicDarkeningAllowed() 드림 메서드를 호출하고 true를 전달하여 WebView가 알고리즘 방식을 허용해야 한다고 지정합니다. 어두워집니다. 이 메서드는 이전 Android와 호환됩니다. 제공합니다

그러면 WebView는 다음 조건이 충족되는 경우 알고리즘 어둡게 하기를 적용합니다.

• 웹 콘텐츠에서 prefers-color-scheme를 사용하지 않습니다.
• 웹 콘텐츠 작성자가 어둡게 하기를 명시적으로 사용 중지하지 않았습니다.

알고리즘 어둡게 하기 허용 (Android 12 이하를 타겟팅하는 앱)

앱 수준의 어두운 테마 강제 설정을 사용하지 않고 Android 12 (API 수준)를 타겟팅하는 앱의 경우 32) 이하인 경우 FORCE_DARK_ON 드림 알고리즘에 의한 어둡게 하기를 허용합니다.

다음 앱과 함께 FORCE_DARK_ON 사용 FORCE_DARK_OFF 앱이 밝은 테마와 어두운 테마 간에 전환하는 자체 메서드를 제공하는 경우 예를 들어 UI의 전환 가능한 요소 또는 자동 시간 기반 선택 등이 있습니다.

기능이 지원되는지 확인하려면 다음 코드를 추가합니다. Activity.onCreate와 같이 WebView 객체를 구성하는 모든 위치에서 다음을 실행합니다.

if (WebViewFeature.isFeatureSupported(WebViewFeature.FORCE_DARK)) {
    WebSettingsCompat.setForceDark(...)
}

if (WebViewFeature.isFeatureSupported(WebViewFeature.FORCE_DARK)) {
    WebSettingsCompat.setForceDark(...);
}

앱이 시스템 환경설정 변경을 감지하는 데 의존하는 경우 테마 변경을 명시적으로 수신 대기하고 다음을 사용하여 WebView에 적용합니다. FORCE_DARK_ON 및 FORCE_DARK_OFF 주

다음 코드 스니펫은 테마 형식을 변경하는 방법을 보여줍니다.

if (WebViewFeature.isFeatureSupported(WebViewFeature.FORCE_DARK)) {
    when (resources.configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK) {
        Configuration.UI_MODE_NIGHT_YES -> {
            WebSettingsCompat.setForceDark(myWebView.settings, FORCE_DARK_ON)
        }
        Configuration.UI_MODE_NIGHT_NO, Configuration.UI_MODE_NIGHT_UNDEFINED -> {
            WebSettingsCompat.setForceDark(myWebView.settings, FORCE_DARK_OFF)
        }
        else -> {
            //
        }
    }
}

if (WebViewFeature.isFeatureSupported(WebViewFeature.FORCE_DARK)) {
    switch (getResources().getConfiguration().uiMode & Configuration.UI_MODE_NIGHT_MASK) {
        case Configuration.UI_MODE_NIGHT_YES:
            WebSettingsCompat.setForceDark(myWebView.getSettings(), FORCE_DARK_ON);
            break;
        case Configuration.UI_MODE_NIGHT_NO:
        case Configuration.UI_MODE_NIGHT_UNDEFINED:
            WebSettingsCompat.setForceDark(myWebView.getSettings(), FORCE_DARK_OFF);
            break;
    }
}

어두운 테마 처리 맞춤설정

또한 ForceDarkStrategy API 를 사용하여 특정 WebView에 어둡게가 적용되는 방식을 제어합니다. 이 API는 강제로 어둡게 모드를 FORCE_DARK_ON 또는 FORCE_DARK_AUTO로 설정한 경우에만 적용됩니다.

이 API를 사용하면 앱에서 웹 테마 어둡게 하기 또는 사용자 에이전트를 사용할 수 있습니다. 어둡게 하기:

• 웹 테마 어둡게 하기: 웹 개발자가 @media (prefers-color-scheme: dark): 웹페이지 표시 설정 어두운 모드를 탭합니다. WebView는 이러한 설정에 따라 콘텐츠를 렌더링합니다. 자세한 내용은 웹 테마가 어두워지는 경우 사양에 유의하세요.
• 사용자 에이전트 어둡게 하기: WebView가 자동으로 웹의 색상을 반전합니다. 있습니다. 사용자 에이전트 어둡게 하기를 사용하는 경우 @media (prefers-color-scheme: dark) 쿼리는 false로 평가됩니다.

다음 API를 사용하여 두 가지 전략 중에서 선택합니다.

if (WebViewFeature.isFeatureSupported(WebViewFeature.FORCE_DARK_STRATEGY)) {
    WebSettingsCompat.setForceDarkStrategy(...)
}

if (WebViewFeature.isFeatureSupported(WebViewFeature.FORCE_DARK_STRATEGY)) {
    WebSettingsCompat.setForceDarkStrategy(...);
}

지원되는 전략 옵션은 다음과 같습니다.

• <ph type="x-smartling-placeholder"></ph> DARK_STRATEGY_PREFER_WEB_THEME_OVER_USER_AGENT_DARKENING: 기본 옵션입니다. 대부분의 브라우저는 <meta name="color-scheme" content="dark light"> 태그(선택사항), Android WebView의 기본 모드에서는 메타 태그가 웹페이지의 prefers-color-scheme 미디어 쿼리 WebView를 다음과 함께 사용할 수 있습니다. <ph type="x-smartling-placeholder"></ph> DARK_STRATEGY_WEB_THEME_DARKENING_ONLY 사용할 수 있으며, 이 경우 태그가 생략했습니다.

  하지만 웹 개발자는 <meta name="color-scheme" content="dark light"> 태그를 사용하여 콘텐츠가 WebView에서 올바르게 렌더링되는지 확인하고 기본 구성을 설정할 수 있습니다

• <ph type="x-smartling-placeholder"></ph> DARK_STRATEGY_USER_AGENT_DARKENING_ONLY: '사용자 에이전트 어둡게 하기'라고 하며 WebView는 웹페이지 어둡게 하기를 무시하고 자동 어둡게 하기를 적용합니다.

앱에서 맞춤설정한 퍼스트 파티 웹 콘텐츠를 표시하는 경우 prefers-color-scheme 미디어 쿼리 사용 시 권장 DARK_STRATEGY_WEB_THEME_DARKENING_ONLY WebView에서 맞춤 테마를 사용하도록 합니다.

적용된 어두운 테마의 예는 다음을 참고하세요. GitHub의 WebView 데모