[webkit-changes] [WebKit/WebKit] 0e26af: [Materials] Add dark mode support

Fri Feb 21 09:42:11 PST 2025

  Branch: refs/heads/main
  Home:   https://github.com/WebKit/WebKit
  Commit: 0e26af9fa9a5720aa1be96a47aade5e82361e12e
      https://github.com/WebKit/WebKit/commit/0e26af9fa9a5720aa1be96a47aade5e82361e12e
  Author: Aditya Keerthi <akeerthi at apple.com>
  Date:   2025-02-21 (Fri, 21 Feb 2025)

  Changed paths:
    A LayoutTests/apple-visual-effects/apple-visual-effect-blur-material-chrome-dark-expected.txt
    A LayoutTests/apple-visual-effects/apple-visual-effect-blur-material-chrome-dark.html
    M LayoutTests/apple-visual-effects/apple-visual-effect-blur-material-chrome-expected.txt
    A LayoutTests/apple-visual-effects/apple-visual-effect-blur-material-dark-expected.txt
    A LayoutTests/apple-visual-effects/apple-visual-effect-blur-material-dark.html
    M LayoutTests/apple-visual-effects/apple-visual-effect-blur-material-expected.txt
    A LayoutTests/apple-visual-effects/apple-visual-effect-blur-material-thick-dark-expected.txt
    A LayoutTests/apple-visual-effects/apple-visual-effect-blur-material-thick-dark.html
    M LayoutTests/apple-visual-effects/apple-visual-effect-blur-material-thick-expected.txt
    A LayoutTests/apple-visual-effects/apple-visual-effect-blur-material-thin-dark-expected.txt
    A LayoutTests/apple-visual-effects/apple-visual-effect-blur-material-thin-dark.html
    M LayoutTests/apple-visual-effects/apple-visual-effect-blur-material-thin-expected.txt
    A LayoutTests/apple-visual-effects/apple-visual-effect-blur-material-ultra-thin-dark-expected.txt
    A LayoutTests/apple-visual-effects/apple-visual-effect-blur-material-ultra-thin-dark.html
    M LayoutTests/apple-visual-effects/apple-visual-effect-blur-material-ultra-thin-expected.txt
    A LayoutTests/apple-visual-effects/apple-visual-effect-dark-mode-expected-mismatch.html
    A LayoutTests/apple-visual-effects/apple-visual-effect-dark-mode.html
    A LayoutTests/apple-visual-effects/apple-visual-effect-vibrancy-effects-dark-expected.txt
    A LayoutTests/apple-visual-effects/apple-visual-effect-vibrancy-effects-dark.html
    M LayoutTests/apple-visual-effects/apple-visual-effect-vibrancy-effects-expected.txt
    A LayoutTests/platform/ios/apple-visual-effects/apple-visual-effect-blur-material-chrome-dark-expected.txt
    M LayoutTests/platform/ios/apple-visual-effects/apple-visual-effect-blur-material-chrome-expected.txt
    A LayoutTests/platform/ios/apple-visual-effects/apple-visual-effect-blur-material-dark-expected.txt
    M LayoutTests/platform/ios/apple-visual-effects/apple-visual-effect-blur-material-expected.txt
    A LayoutTests/platform/ios/apple-visual-effects/apple-visual-effect-blur-material-thick-dark-expected.txt
    M LayoutTests/platform/ios/apple-visual-effects/apple-visual-effect-blur-material-thick-expected.txt
    A LayoutTests/platform/ios/apple-visual-effects/apple-visual-effect-blur-material-thin-dark-expected.txt
    M LayoutTests/platform/ios/apple-visual-effects/apple-visual-effect-blur-material-thin-expected.txt
    A LayoutTests/platform/ios/apple-visual-effects/apple-visual-effect-blur-material-ultra-thin-dark-expected.txt
    M LayoutTests/platform/ios/apple-visual-effects/apple-visual-effect-blur-material-ultra-thin-expected.txt
    A LayoutTests/platform/ios/apple-visual-effects/apple-visual-effect-vibrancy-effects-dark-expected.txt
    M LayoutTests/platform/ios/apple-visual-effects/apple-visual-effect-vibrancy-effects-expected.txt
    M Source/WebCore/PAL/pal/cocoa/CoreMaterialSoftLink.h
    M Source/WebCore/PAL/pal/cocoa/CoreMaterialSoftLink.mm
    M Source/WebCore/PAL/pal/spi/cocoa/CoreMaterialSPI.h
    M Source/WebCore/platform/cocoa/AppleVisualEffect.cpp
    M Source/WebCore/platform/cocoa/AppleVisualEffect.h
    M Source/WebCore/rendering/RenderLayerBacking.cpp
    M Source/WebKit/Platform/cocoa/WKMaterialHostingSupport.h
    M Source/WebKit/Platform/cocoa/WKMaterialHostingSupport.swift
    M Source/WebKit/Shared/RemoteLayerTree/RemoteLayerTreePropertyApplier.mm
    M Source/WebKit/Shared/WebCoreArgumentCoders.serialization.in
    M Source/WebKit/UIProcess/RemoteLayerTree/ios/RemoteLayerTreeViews.h
    M Source/WebKit/UIProcess/RemoteLayerTree/ios/RemoteLayerTreeViews.mm

  Log Message:
  -----------
  [Materials] Add dark mode support
https://bugs.webkit.org/show_bug.cgi?id=288152
rdar://145091546

Reviewed by Abrar Rahman Protyasha.

Materials and vibrancy should adapt to dark mode. This patch implements that
functionality for CoreMaterial backed visual effects, as well as SwiftUI-based
effects.

The color scheme of an effect is determined as part of creating
`AppleVisualEffectData`, and then applied by `RemoteLayerTreePropertyApplier`.

* LayoutTests/apple-visual-effects/apple-visual-effect-blur-material-chrome-dark-expected.txt: Added.
* LayoutTests/apple-visual-effects/apple-visual-effect-blur-material-chrome-dark.html: Added.
* LayoutTests/apple-visual-effects/apple-visual-effect-blur-material-chrome-expected.txt:
* LayoutTests/apple-visual-effects/apple-visual-effect-blur-material-dark-expected.txt: Added.
* LayoutTests/apple-visual-effects/apple-visual-effect-blur-material-dark.html: Added.
* LayoutTests/apple-visual-effects/apple-visual-effect-blur-material-expected.txt:
* LayoutTests/apple-visual-effects/apple-visual-effect-blur-material-thick-dark-expected.txt: Added.
* LayoutTests/apple-visual-effects/apple-visual-effect-blur-material-thick-dark.html: Added.
* LayoutTests/apple-visual-effects/apple-visual-effect-blur-material-thick-expected.txt:
* LayoutTests/apple-visual-effects/apple-visual-effect-blur-material-thin-dark-expected.txt: Added.
* LayoutTests/apple-visual-effects/apple-visual-effect-blur-material-thin-dark.html: Added.
* LayoutTests/apple-visual-effects/apple-visual-effect-blur-material-thin-expected.txt:
* LayoutTests/apple-visual-effects/apple-visual-effect-blur-material-ultra-thin-dark-expected.txt: Added.
* LayoutTests/apple-visual-effects/apple-visual-effect-blur-material-ultra-thin-dark.html: Added.
* LayoutTests/apple-visual-effects/apple-visual-effect-blur-material-ultra-thin-expected.txt:
* LayoutTests/apple-visual-effects/apple-visual-effect-dark-mode-expected-mismatch.html: Added.
* LayoutTests/apple-visual-effects/apple-visual-effect-dark-mode.html: Added.
* LayoutTests/apple-visual-effects/apple-visual-effect-vibrancy-effects-dark-expected.txt: Added.
* LayoutTests/apple-visual-effects/apple-visual-effect-vibrancy-effects-dark.html: Added.
* LayoutTests/apple-visual-effects/apple-visual-effect-vibrancy-effects-expected.txt:
* LayoutTests/platform/ios/apple-visual-effects/apple-visual-effect-blur-material-chrome-dark-expected.txt: Added.
* LayoutTests/platform/ios/apple-visual-effects/apple-visual-effect-blur-material-chrome-expected.txt:
* LayoutTests/platform/ios/apple-visual-effects/apple-visual-effect-blur-material-dark-expected.txt: Added.
* LayoutTests/platform/ios/apple-visual-effects/apple-visual-effect-blur-material-expected.txt:
* LayoutTests/platform/ios/apple-visual-effects/apple-visual-effect-blur-material-thick-dark-expected.txt: Added.
* LayoutTests/platform/ios/apple-visual-effects/apple-visual-effect-blur-material-thick-expected.txt:
* LayoutTests/platform/ios/apple-visual-effects/apple-visual-effect-blur-material-thin-dark-expected.txt: Added.
* LayoutTests/platform/ios/apple-visual-effects/apple-visual-effect-blur-material-thin-expected.txt:
* LayoutTests/platform/ios/apple-visual-effects/apple-visual-effect-blur-material-ultra-thin-dark-expected.txt: Added.
* LayoutTests/platform/ios/apple-visual-effects/apple-visual-effect-blur-material-ultra-thin-expected.txt:
* LayoutTests/platform/ios/apple-visual-effects/apple-visual-effect-vibrancy-effects-dark-expected.txt: Added.
* LayoutTests/platform/ios/apple-visual-effects/apple-visual-effect-vibrancy-effects-expected.txt:
* Source/WebCore/PAL/pal/cocoa/CoreMaterialSoftLink.h:

Add dark mode material constants.

* Source/WebCore/PAL/pal/cocoa/CoreMaterialSoftLink.mm:
* Source/WebCore/PAL/pal/spi/cocoa/CoreMaterialSPI.h:
* Source/WebCore/platform/cocoa/AppleVisualEffect.cpp:
(WebCore::operator<<):
* Source/WebCore/platform/cocoa/AppleVisualEffect.h:

Introduce a `colorScheme` field to `AppleVisualEffectData`. This will be used to
select the appropriate material on the UI-side.

* Source/WebCore/rendering/RenderLayerBacking.cpp:
(WebCore::RenderLayerBacking::updateAppleVisualEffect):

Use the used color scheme of the renderer to determine the color scheme of the
visual effect.

* Source/WebKit/Platform/cocoa/WKMaterialHostingSupport.h:
* Source/WebKit/Platform/cocoa/WKMaterialHostingSupport.swift:
(MaterialHostingView.body):

`materialEffect` uses the environment of the parent view. For this reason, the
environment modifier is applied to an `AnyView` which wraps the view with the
material effect applied. The environment's color scheme is set to achieve the
desired appearance.

(WKMaterialHostingSupport.updateHostingLayer(_:materialEffectType:colorScheme:cornerRadius:)):
(WKMaterialHostingSupport.updateHostingView(_:contentView:materialEffectType:colorScheme:cornerRadius:)):
(WKMaterialHostingSupport.updateHostingLayer(_:materialEffectType:cornerRadius:)): Deleted.
(WKMaterialHostingSupport.updateHostingView(_:contentView:materialEffectType:cornerRadius:)): Deleted.
* Source/WebKit/Shared/RemoteLayerTree/RemoteLayerTreePropertyApplier.mm:
(WebKit::materialRecipeForAppleVisualEffect):
(WebKit::hostedMaterialColorSchemeForAppleVisualEffectData):
(WebKit::applyVisualStylingToLayer):
(WebKit::updateAppleVisualEffect):
* Source/WebKit/Shared/WebCoreArgumentCoders.serialization.in:
* Source/WebKit/UIProcess/RemoteLayerTree/ios/RemoteLayerTreeViews.h:
* Source/WebKit/UIProcess/RemoteLayerTree/ios/RemoteLayerTreeViews.mm:
(-[WKMaterialHostingView updateMaterialEffectType:colorScheme:cornerRadius:]):
(-[WKMaterialHostingView updateMaterialEffectType:cornerRadius:]): Deleted.

Canonical link: https://commits.webkit.org/290803@main

To unsubscribe from these emails, change your notification settings at https://github.com/WebKit/WebKit/settings/notifications