How to change shadow color of Qt QML Drawer (without declaring custom Style)?

Question

I use Drawer from QtQuick.Controls 2.2

Drawer {
    id: drawer
    width: parent.width/2
    height: parent.height
    modal: true
    ...
}

With style:

[Controls]
Style=Material

[Material]
Theme=Dark
Accent=Red
Primary=#c64949

I want to change a color of the Drawer shadow. Style Material uses a white color for the shadow (that to the right of the open Drawer).

-- Edit by Bounty Sponsor --

I have discovered the shadow is defined, ie. here: http://code.qt.io/cgit/qt/qtquickcontrols2.git/tree/src/imports/controls/Drawer.qml

as:

T.Overlay.modal: Rectangle {
    color: Color.transparent(control.palette.shadow, 0.5)
}

T.Overlay.modeless: Rectangle {
    color: Color.transparent(control.palette.shadow, 0.12)
}

Without defining an entirely new Style, how can one modify them as one-off?

I presumably can redefine an entirely custom control.. but there ought to be a compatible version?

[This](https://doc.qt.io/qt-5/qtquickcontrols2-customize.html#customizing-drawer) link should help you. — folibis, Sep 24 '17 at 10:41
This is not exactly what the OP (or myself) seek - the link describes the customisation of background - we want the http://code.qt.io/cgit/qt/qtquickcontrols2.git/tree/src/imports/controls/Drawer.qml - overlay - change. — qdot, Mar 26 '18 at 15:45
Have you checked the new (introduced in Qt 5.10) [Overlay](https://doc.qt.io/qt-5.10/qml-qtquick-controls2-overlay.html#overlay-attached-prop) attached property ? It seems that it can be attached at an`ApplicationWindow`. Maybe if you define those properties in your main window it will apply to all popups ? (Unfortunately I can't test it I don't have Qt 5.10 on my machine) — Blabdouze, Mar 27 '18 at 14:50
So they didn't provision for the option to set that. You can either roll your own implementation of that trivial control, or introspect into the object tree to reach the desired object and manipulate its properties, something similar to what I proposed here: https://stackoverflow.com/questions/48736260/long-tabbar-adding-a-size-and-position-indicator-to-reflect-the-presence-of-of/48736937#48736937 — dtech, Mar 29 '18 at 11:55

Maxim Skvortsov · Accepted Answer · 2021-05-26T08:09:16.407

What you are looking for is Overlay.modal property, as @Blabdouze mentioned. Simple working example:

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("test")

    Drawer {
        height: parent.height
        width: parent.width/2
        Rectangle {
            anchors.fill: parent
            color: "green"
        }

        Overlay.modal: Rectangle {
                  color: "red"
              }
    }
}

Default edge is left, so drag it from there.

Links:

Documentation

Drawer source code

How to change shadow color of Qt QML Drawer (without declaring custom Style)?

1 Answers1