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 ?