Catppuccin
Purple radial background with a central auth card, sidebar icon widgets, now-playing and weather widget
Background
The Catppuccin theme uses generated radial background mode instead of a shipped wallpaper image. If you want to use image instead, set [background].mode = "file" and provide [background].path
Use This Theme
You do not need to copy the full config below just to activate Catppuccin. The preset is already bundled into Veila and is the out-of-the-box look.
Use either of these:
theme = "catppuccin"Or from the CLI:
veila theme set catppuccinIf the daemon is already running, veila theme set also tries to reload the config immediately.
Minimal Overrides
The catppuccin theme already works without extra config. Use a small ~/.config/veila/config.toml like this only when you want to change personal details such as avatar, wallpaper, weather, now playing, or clock or date format.
theme = "catppuccin" # Use the bundled Catppuccin theme
[visuals.outputs]
ui_mode = "single" # Show the full UI on one monitor. Use "all" for every monitor
[visuals.avatar]
image_path = "/path/to/avatar.jpg" # Avatar image path (fallback ~/.face when available)
[background]
mode = "file" # Background source (accepts "file", "gradient", "layered", "radial", or "solid")
path = "/path/to/wallpaper.jpg" # Wallpaper image path used when mode = "file"
[weather]
enabled = true # Enable background weather fetching (accepts true or false)
location = "Riga" # Place name used for weather lookup (accepts any geocodable city or place name)
unit = "celsius" # Temperature unit (accepts "celsius" or "fahrenheit")
[visuals.now_playing]
enabled = true # Show the now-playing widget when MPRIS media metadata is available (accepts true or false)
[visuals.clock]
format = "24h" # Clock format (accepts "24h" or "12h")You can keep this file minimal. Any key you do not set continues to come from the bundled Catppuccin theme
By default, ui_mode is single, so the full lock UI appears on the primary or selected monitor while other monitors stay protected by secure background curtains.
If you want the full UI on every monitor, set [visuals.outputs].ui_mode to all.
See Monitor Output for the full configuration reference.
Fonts
Veila can use both bundled fonts and fonts installed on your system.
The Catppuccin theme uses only bundled fonts, so it works out of the box without installing extra font files:
GeomGoogle Sans FlexNunito
You can still override any font_family with a system font. For example:
[visuals.clock]
font_family = "Japanola"
font_weight = 700
font_style = "normal"For a font you downloaded manually, install it into your local font directory and rebuild the font cache:
mkdir -p ~/.local/share/fonts
cp ~/Downloads/Japanola.ttf ~/.local/share/fonts/
fc-cache -fvThen verify the exact family name your system sees:
fc-match Japanola
fc-list | rg -i japanolaUse the exact family name from fc-match or fc-list in font_family.
Font weight and style matter. If the installed font only provides a regular 400 face but the config asks for 700, or if the font is italic but the config asks for normal, Veila may pick a fallback font instead of the one you expected. When a font appears to not work, first check the real family name, available weight, and whether the face is normal or italic.
Preset Reference
The config below shows the bundled Catppuccin preset as a reference. It is useful when you want to understand how the theme is built, copy it into ~/.config/veila/themes/, or override only selected parts in your own config.toml.
You do not need to paste this whole block unless you want to customize it.
[background]
mode = "radial"
# path = "/path/to/wallpaper.jpg"
color = "#403249"
dim_strength = 0
[background.radial]
center = "#cba6f7"
edge = "#1F1B2E"
center_x = 50
center_y = 50
radius = 80
[battery]
enabled = true
[weather]
enabled = false
[visuals.clock]
format = "24h"
meridiem_font_size = 22
meridiem_x = 6
meridiem_y = 7
font_family = "Geom"
font_weight = 600
color = "rgba(203, 166, 247, 1.0)"
font_size = 90
halign = "center"
valign = "bottom"
x = 0
y = -150
relative_to = "auth"
[visuals.date]
format = "long"
font_family = "Geom"
font_weight = 600
font_size = 18
color = "#94e2d5"
halign = "center"
valign = "bottom"
x = 0
y = -120
relative_to = "auth"
[visuals.input]
placeholder = "Password"
background_color = "rgba(255, 255, 255, 0.04)"
width = 360
height = 54
radius = 10
mask_color = "#ffffff"
font_family = "Google Sans Flex"
font_weight = 400
font_size = 16
halign = "center"
valign = "bottom"
x = 0
y = -30
relative_to = "auth"
[visuals.status]
mode = "inline"
rejected_color = "rgba(255, 213, 213, 0.98)"
pending_color = "rgba(236, 236, 236, 0.88)"
[visuals.eye]
color = "rgba(255, 255, 255, 0.72)"
[visuals.caps_lock]
color = "rgba(255, 255, 255, 0.52)"
[visuals.placeholder]
color = "rgba(255, 255, 255, 0.9)"
[visuals.avatar]
# image_path = "/path/to/avatar.jpg"
radius = 10
size = 360
background_color = "rgba(255, 255, 255, 0.04)"
placeholder_padding = 28
halign = "center"
valign = "center"
x = 0
y = -115
[visuals.username]
enabled = false
font_family = "Google Sans Flex"
font_weight = 400
color = "rgba(255, 255, 255, 0.84)"
font_size = 28
halign = "center"
valign = "center"
x = 0
y = 0
relative_to = "username"
[visuals.keyboard]
background_size = 0
color = "#f5c2e7"
size = 30
halign = "center"
valign = "center"
x = 0
y = 0
relative_to = "keyboard"
[visuals.battery]
background_size = 0
color = "#a6e3a1"
size = 40
halign = "center"
valign = "center"
x = 0
y = 0
relative_to = "battery"
[visuals.weather.icon]
size = 60
opacity = 100
halign = "center"
valign = "center"
x = 0
y = 0
relative_to = "weather_icon"
[visuals.weather.temperature]
font_size = 30
font_family = "Geom"
font_weight = 600
letter_spacing = 0
color = "#f9e2af"
halign = "center"
valign = "center"
x = 0
y = 0
relative_to = "weather_temperature"
[visuals.weather.location]
enabled = false
[visuals.now_playing]
enabled = true
fade_duration_ms = 320
[visuals.now_playing.artwork]
size = 175
radius = 8
opacity = 100
halign = "center"
valign = "center"
x = 0
y = 0
relative_to = "now_playing_artwork"
[visuals.now_playing.artist]
width = 318
color = "#a6e3a1"
font_family = "Google Sans Flex"
font_size = 20
font_weight = 400
halign = "left"
valign = "top"
x = 20
y = 23
relative_to = "now_playing_artist_title"
[visuals.now_playing.title]
width = 600
color = "#74c7ec"
font_family = "Google Sans Flex"
font_size = 23
font_weight = 400
halign = "left"
valign = "bottom"
x = 20
y = -23
relative_to = "now_playing_artist_title"
[visuals.power.poweroff]
enabled = true
background_size = 0
color = "#f38ba8"
size = 40
confirm = true
halign = "center"
valign = "center"
x = 0
y = 0
relative_to = "poweroff"
[visuals.power.reboot]
enabled = true
background_size = 0
color = "#fab387"
size = 40
confirm = true
halign = "center"
valign = "center"
x = 0
y = 0
relative_to = "reboot"
[visuals.power.suspend]
enabled = true
background_size = 0
color = "#b4befe"
size = 40
confirm = true
halign = "center"
valign = "center"
x = 0
y = 0
relative_to = "suspend"
# Auth
[[visuals.backdrop]]
enabled = true
name = "auth"
mode = "solid"
color = "rgba(24, 24, 37, 1.0)"
radius = 20
width = 420
height = 650
halign = "center"
valign = "center"
x = 0
y = 0
z = 0
# OS Nerd Icon
[[visuals.layer]]
enabled = true
name = "os_icon"
kind = "icon"
text = ""
font_family = "Symbols Nerd Font"
font_weight = 700
font_style = "normal"
font_size = 64
color = "#8caaee"
background_color = "rgba(24, 24, 37, 1.0)"
width = 100
height = 100
padding = 16
radius = 20
halign = "center"
valign = "center"
y = -275
x = -290
z = 0
# Keyboard Layout
[[visuals.backdrop]]
name = "keyboard"
mode = "solid"
enabled = true
color = "rgba(24, 24, 37, 1.0)"
radius = 20
width = 100
height = 100
halign = "center"
valign = "center"
y = -150
x = -290
z = 0
# Battery
[[visuals.backdrop]]
name = "battery"
show_when = "battery"
mode = "solid"
enabled = true
color = "rgba(24, 24, 37, 1.0)"
radius = 20
width = 100
height = 100
halign = "center"
valign = "center"
y = -25
x = -290
z = 0
# Poweroff
[[visuals.backdrop]]
enabled = true
name = "poweroff"
mode = "solid"
color = "rgba(24, 24, 37, 1.0)"
radius = 20
width = 100
height = 100
halign = "center"
valign = "center"
y = -225
x = 290
z = 0
# Reboot
[[visuals.backdrop]]
enabled = true
name = "reboot"
mode = "solid"
color = "rgba(24, 24, 37, 1.0)"
radius = 20
width = 100
height = 100
halign = "center"
valign = "center"
y = -100
x = 290
z = 0
# Suspend
[[visuals.backdrop]]
enabled = true
name = "suspend"
mode = "solid"
color = "rgba(24, 24, 37, 1.0)"
radius = 20
width = 100
height = 100
halign = "center"
valign = "center"
y = 25
x = 290
z = 0
# Weather Icon
[[visuals.backdrop]]
name = "weather_icon"
show_when = "weather"
mode = "solid"
enabled = true
color = "rgba(24, 24, 37, 1.0)"
radius = 20
width = 100
height = 100
halign = "center"
valign = "center"
y = 150
x = 290
z = 0
# Weather Temperature
[[visuals.backdrop]]
name = "weather_temperature"
show_when = "weather"
mode = "solid"
enabled = true
color = "rgba(24, 24, 37, 1.0)"
radius = 20
width = 100
height = 100
halign = "center"
valign = "center"
y = 275
x = 290
z = 0
# Now Playing Artwork
[[visuals.backdrop]]
name = "now_playing_artwork"
show_when = "now_playing"
mode = "solid"
enabled = true
color = "rgba(24, 24, 37, 1.0)"
radius = 20
width = 200
height = 200
halign = "center"
valign = "center"
y = 225
x = -340
z = 0
# Now Playing Artist/Title
[[visuals.backdrop]]
name = "now_playing_artist_title"
show_when = "now_playing"
mode = "solid"
enabled = true
color = "rgba(24, 24, 37, 1.0)"
radius = 20
width = 650
height = 100
halign = "center"
valign = "center"
y = 405
x = -115
z = 0The preset uses Veila's built-in gradient background. If you want to use your own image, set [background].mode = "file" and provide [background].path.
Catppuccin uses bundled fonts, so the default clock and text styling work without installing extra font files.