Edit scrollbar colour through stylesheet in main window?

[Hologram]

Hi, I am modifying an existing stylesheet and was wondering how I modify the main scrollbars? You can see one to the right hand side of the screen.

AFAICT it is not in the QScrollbar::vertical class, which controls other scrollbars, so where should I look/ which lines could I add to the stylesheet to get rid of the arrow buttons and change the background, the handle background and the hover background color?

[SGaist]

Hi,

Is it the vertical scrollbar of a QScrollArea ?

[Hologram]

@SGaist No, I think it isn't. That's because I already styled the vertical scrollbar: and these are very different in terms of colours than the scrollbar in the picture above.

QAbstractScrollArea {
    border-radius: 2px;
    background-color: #303030; /*View tabs background bar */
}

QAbstractScrollArea::corner {
    border: none;
    background-color: transparent;
}

QScrollBar::handle:vertical,
QScrollBar::handle:horizontal {
    background-color: #3E3E3E; /* Adjusts scrollbar handle color */
}

QScrollBar::handle:vertical:hover,
QScrollBar::handle:horizontal:hover {
    background-color: #545454; /* Adjusts scrollbar handle color upon hover */
}

QScrollBar:vertical {
    background-color: #303030; /* Adjusts scrollbar background color */
    width: 15px;
    margin: 0px;
}

QScrollBar::handle:vertical {
    min-height: 5px;
    border-radius: 3px;
    margin: 0px 4px; 
}

QScrollBar::sub-line:vertical {
    /*margin: 3px 0px 3px 1px; /* Enabled by default to show handles */
    /*border-image: url(qss:images_dark-light/up_arrow_light.svg);*/ /* Enables/Disables up arrow in horizontal scrollbar*/
    height: 0px; /* By default: 4px 15px; to create space for arrows*/
    width: 10px;
    subcontrol-position: top;
    subcontrol-origin: margin;
}

QScrollBar::add-line:vertical {
    /*margin: 3px 0px 3px 1px;*/ /* Enabled by default to show handles */
    /*border-image: url(qss:images_dark-light/down_arrow_light.svg);*/ /* Enables/Disables down arrow in horizontal scrollbar*/
    height: 0px; /* By default: 4px 15px; to create space for arrows*/
    width: 10px;
    subcontrol-position: bottom;
    subcontrol-origin: margin;
}

QScrollBar::sub-line:vertical:hover,
QScrollBar::sub-line:vertical:on {
    border-image: url(qss:images_dark-light/up_arrow_lighter.svg);
}

QScrollBar::add-line:vertical:hover,
QScrollBar::add-line:vertical:on {
    border-image: url(qss:images_dark-light/down_arrow_lighter.svg);
}

QScrollBar::up-arrow:vertical,
QScrollBar::down-arrow:vertical {
    background-color: none;
}

QScrollBar::add-page:vertical,
QScrollBar::sub-page:vertical {
    background-color: transparent;
}

[mrjj]

Hi
What I normally do is to call
https://doc.qt.io/qt-6/qobject.html#dumpObjectTree

for the parent, I think holds the element I want to change. That way I can see types and names (if any) and
how they are nested.

It's shown in the Application output pane in Creator

[Hologram]

@mrjj sorry, I don't understand what you mean.
I am only modifying a stylesheet in VSCode, I don't have any controls over the UI coding of the application. I can only modify the stylesheet. I wouldn't know where to look to see the classes.

[SGaist]

Don't you have access to the source code ?
And if not, ask the authors ?