Skip to content

Scrollbar colors

There are a number of rules to set the colors used in Textual scrollbars. You won't typically need to do this, as the default themes have carefully chosen colors, but you can if you want to.

Rule Color
scrollbar-color Scrollbar "thumb" (movable part)
scrollbar-color-hover Scrollbar thumb when the mouse is hovering over it
scrollbar-color-active Scrollbar thumb when it is active (being dragged)
scrollbar-background Scrollbar background
scrollbar-background-hover Scrollbar background when the mouse is hovering over it
scrollbar-background-active Scrollbar background when the thumb is being dragged
scrollbar-corner-color The gap between the horizontal and vertical scrollbars

Syntax

scrollbar-color: <COLOR>;
scrollbar-color-hover: <COLOR>;
scrollbar-color-active: <COLOR>;
scrollbar-background: <COLOR>;
scrollbar-background-hover: <COLOR>;
scrollbar-background-active: <COLOR>;
scrollbar-corner-color: <COLOR>;

Example

In this example we have two panels with different scrollbar colors set for each.

from textual.app import App
from textual.containers import Vertical
from textual.widgets import Static

TEXT = """I must not fear.
Fear is the mind-killer.
Fear is the little-death that brings total obliteration.
I will face my fear.
I will permit it to pass over me and through me.
And when it has gone past, I will turn the inner eye to see its path.
Where the fear has gone there will be nothing. Only I will remain.
"""


class ScrollbarApp(App):
    def compose(self):
        yield Vertical(Static(TEXT * 5), classes="panel1")
        yield Vertical(Static(TEXT * 5), classes="panel2")


app = ScrollbarApp(css_path="scrollbars.css")
Screen {
    background: #212121;
    color: white 80%;
    layout: horizontal;
}

Static {
    padding: 1 2;
}

.panel1 {
    width: 1fr;
    scrollbar-color: green;
    scrollbar-background: #bbb;
    padding: 1 2;        
} 

.panel2 {
    width: 1fr;
    scrollbar-color: yellow;
    scrollbar-background: purple;
    padding: 1 2;
}   

ScrollbarApp I must not fear.I must not fear. Fear is the mind-killer.Fear is the mind-killer. Fear is the little-death that Fear is the little-death that  brings total obliteration.brings total obliteration. I will face my fear.I will face my fear. I will permit it to pass over I will permit it to pass over  me and through me.▇▇me and through me.▇▇ And when it has gone past, I And when it has gone past, I  will turn the inner eye to seewill turn the inner eye to see its path.its path. Where the fear has gone there Where the fear has gone there  will be nothing. Only I will will be nothing. Only I will  remain.remain. I must not fear.I must not fear. Fear is the mind-killer.Fear is the mind-killer. Fear is the little-death that Fear is the little-death that  brings total obliteration.brings total obliteration. I will face my fear.I will face my fear. I will permit it to pass over I will permit it to pass over  me and through me.me and through me. And when it has gone past, I And when it has gone past, I 

CSS

/* Set widget scrollbar color to yellow */
Widget {
    scrollbar-color: yellow;
}

Python

# Set the scrollbar color to yellow
widget.styles.scrollbar_color = "yellow"