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

Variables	Description
primary	The primary color, can be considered the branding color. Typically used for titles, and backgrounds for strong emphasis.
secondary	An alternative branding color, used for similar purposes as primary, where an app needs to differentiate something from the primary color.
foreground	The default text color, which should be legible on background, surface, and panel.
background	A color used for the background, where there is no content. Used as the default background color for screens.
surface	The default background color of widgets, typically sitting on top of background.
panel	A color used to differentiate a part of the UI from the main content. Used sparingly in Textual itself.
boost	A color with alpha that can be used to create layers on a background.
warning	Indicates a warning. Typically used as a background color. text-warning can be used for foreground.
error	Indicates an error. Typically used as a background color. text-error can be used for foreground.
success	Used to indicate success. Typically used as a background color. text-success can be used for foreground.
accent	Used sparingly to draw attention. Typically contrasts with primary and secondary.
is_dark	A boolean indicating whether the theme is dark or light.
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.

rovr includes some extra classes that can be used to narrow down the elements, or style them based on certain scenarios.

FileList

This is the main file list that you will be navigating

Class	Description	Example
select-mode	applied to the FileList when in select mode, where you can select multiple files.	FileList.select-mode

Component Classes	Description	Example
filelist—cut	applied on files/folders that are cut	FileList > .filelist--cut
filelist—broken-link	applied on files/folders that are broken links	FileList > .filelist--broken-link
filelist—link	applied on files/folders that are links	FileList > .filelist--link
filelist—hidden	applied on files/folders that are hidden	FileList > .filelist--hidden

These component classes also come with their own sub classes due to textual limitations.

Component Classes	Description	Example
*—hovered	used when the option is currently hovered	FileList > .filelist--cut--hovered
*—highlighted	used when the option is currently highlighted	FileList > .filelist--link--highlighted

ProgressBarContainer

This is the wrapper container for progress bars seen at the bottom left part of the UI.

Class	Description	Example
error	applied when an error occurred while in the process	ProgressBarContainer.error
done	applied when the process is done, regardless of the result	ProgressBarContainer.done

Component Classes	Description	Example
bar—bar	The default bar, used when the process is working	ProgressBarContainer > .bar--bar
bar—indeterminate	Used when the process is still calculating and has not started yet	ProgressBarContainer > .bar--indeterminate
bar—complete	Used when the process is complete	ProgressBarContainer > .bar--complete

Fuzzy Screens

This is the base screen for other screens like ripgrep, fd and zoxide.

Class	Description	Example
empty	applied on the OptionList when there are no options to show	ModalSearchScreen OptionList.empty

Root Container

This is the root container that holds everything. This is not to be confused with the Application container, which is the app itself.

Class	Description	Example
compact-buttons	applied when the interface.compact_mode.buttons is enabled in config	#root.compact-buttons
compact-panels	applied when the interface.compact_mode.panels is enabled in config	#root.compact-panels

Root class also adds an extra class to itself to signify the current theme

Example:

#root.theme-<theme-name> { ... }
/* like */
#root.theme-nord { ... }
#root.theme-textual-dark { ... }