theming

rovr can be themed in two ways, via the config.toml file and style.tcss file.

config.toml

the config has a way to define themes using variables

[[custom_theme]]
name       = "<name>"
primary    = "<color>"
secondary  = "<color>"
warning    = "<color>"
error      = "<color>"
success    = "<color>"
accent     = "<color>"
foreground = "<color>"
background = "<color>"
surface    = "<color>"
panel      = "<color>"
is_dark    = true
variables  = { "<var>" = "<key>" }

you can take a look at the reference in textual, or the table below

name	description
name	the name of the theme
primary	the primary color, can be considered the branding color.
secondary	an alternative branding color.
warning	the default text color, which should be legible on background, surface, and panel.
error	a color used for the background, where there is no content.
success	the default background color of widgets, typically sitting on top of background.
accent	a color used to differentiate a part of the ui form the main content.
foreground	a color with alpha that can be used to create layers on a background.
background	indicates a warning. typically used as a background color.
surface	indicates an error. typically used as a background color.
panel	used to indicate success. typically used as a background color.
is_dark	used sparingly to draw attention and contrasts with primary and secondary
variables	custom variables that are used by textual. variables

style.tcss

styling in textual is handled by tcss files, a simplified version of the web’s css. a reference is available in the textual docs

you can get the full DOM list by running

rovr --tree-dom

tcss works the same as css, so, if you want to target the FileList inside the #file_list_container you can do

#file_list_container > FileList {
  ...
}

however, if you took a look at the dom, or a truncated dom below

Application class="-dark-mode"
└── Vertical id="root"
    └── HorizontalGroup id="main"
        └── FileListContainer id="file_list_container"
            └── FileList id="file_list" class="file-list"

you may notice that class inheritance is not shown, FileListContainer inherits VerticalGroup while FileList inherits SelectionList. I will soon add support, but not just yet.