Skip to content

Styling

Various parts of the bottom can be styled, using either built-in themes or custom theming.

Precedence

As there are a few ways styles can be applied to bottom, the order of which styles are prioritized are, in order of highest precedence to lowest precedence:

  1. Built-in themes set via command-line args (e.g. btm --theme gruvbox)
  2. Custom themes set via config file
  3. Built-in themes set via config file

If nothing is set, it will fall back to the default theme.

Built-in styles

bottom has a few built-in themes:

These themes all also have light variants to support terminals using lighter colours.

To set the theme from the command line:

btm --theme gruvbox

To set the theme using the config file:

[styles]
theme = "gruvbox"

Custom styling

bottom's components can also be individually styled by the user to control the colour of the text style.

Colours

You can configure the colours for components with strings that are either hex colours (e.g. "#ffffff"), RGB colours (e.g. "255, 255, 255"), or named colours. Named colours are one of the following strings:

  • "Black"
  • "Red"
  • "Green"
  • "Yellow"
  • "Blue"
  • "Magenta"
  • "Cyan"
  • "Gray"
  • "DarkGray"
  • "LightRed"
  • "LightGreen"
  • "LightYellow"
  • "LightBlue"
  • "LightMagenta"
  • "LightCyan"
  • "White"

Text

Text can generally be styled using the following TOML table:

[field]
# The foreground colour of text.
color = "black"

# The background colour of text.
bg_color = "blue"

# Whether to make the text bold.
bold = false

# Inline table version
field = { color = "black", bg_color = "blue", bold = false }

All fields are optional; by default if bg_color is not set then there will be no background color.

If you just want to style text by setting the foreground colour, for brevity, then you can also just set the field to be the colour itself. For example:

[styles.widgets]
selected_text = "#fff"

Configuration

CPU

These can be set under [styles.cpu]:

Config field Details Examples
all_entry_color The colour of the "All" CPU label all_entry_color = "Red"
avg_entry_color The colour of the average CPU label and graph line avg_entry_color = "255, 0, 255"
cpu_core_colors Colour of each CPU threads' label and graph line. Read in order. cpu_core_colors = ["Red", "Blue", "Green"]

Memory

These can be set under [styles.memory]:

Config field Details Examples
ram_color The colour of the RAM label and graph line ram_color = "Red"
cache_color The colour of the cache label and graph line. Does not do anything on Windows. cache_color = "#ffffff"
swap_color The colour of the swap label and graph line swap_color = "255, 0, 255"
arc_color The colour of the ARC label and graph line arc_color = "Blue"
gpu_colors Colour of each GPU's memory label and graph line. Read in order. gpu_colors = ["Red", "Blue", "Green"]

Network

These can be set under [styles.network]:

Config field Details Examples
rx_color The colour of the RX (download) label and graph line rx_color = "Red"
tx_color The colour of the TX (upload) label and graph line tx_color = "#ffffff"
rx_total_color The colour of the total RX (download) label in basic mode rx_total_color = "0, 0, 0"
tx_total_color The colour of the total TX (upload) label in basic mode tx_total_color = "#000"

Battery

These can be set under [styles.battery]:

Config field Details Examples
high_battery_color The colour of the battery widget bar when the battery is over 50% high_battery_color = "Red"
medium_battery_color The colour of the battery widget bar when the battery between 10% to 50% medium_battery_color = "#ffffff"
low_battery_color The colour of the battery widget bar when the battery is under 10% low_battery_color = "0, 0, 0"

Tables

These can be set under [styles.tables]:

Config field Details Examples
headers Text styling for table headers headers = { color = "red", bg_color = "black", bold = true }

Graphs

These can be set under [styles.graphs]:

Config field Details Examples
graph_color The general colour of the parts of the graph graph_color = "white"
legend_text Text styling for graph's legend text legend_text = { color = "black", bg_color = "blue", bold = true }

General widget settings

These can be set under [styles.widgets]:

Config field Details Examples
border_color The colour of the widgets' borders border_color = "white"
selected_border_color The colour of a widget's borders when the widget is selected selected_border_color = "white"
widget_title Text styling for a widget's title widget_title = { color = "black", bg_color = "blue", bold = true }
text Text styling for text in general text = { color = "black", bg_color = "blue", bold = true }
selected_text Text styling for text when representing something that is selected selected_text = { color = "black", bg_color = "blue", bold = true }
disabled_text Text styling for text when representing something that is disabled disabled_text = { color = "black", bg_color = "blue", bold = true }