how to properly use wallust integration

[DeltaCream]

I've tried using wallust to incorporate the wallust integration with wayle, the steps currently aren't as clear to me, but I've done the following steps:

I created a ~/.config/wallust/templates/wayle file containing this:

[styling.palette]
bg = "{{color0}}"
surface = "{{color1}}"
elevated = "{{color2}}"
fg = "{{color15}}"
fg-muted = "{{color7}}"
primary = "{{color4}}"
red = "{{color1}}"
yellow = "{{color3}}"
green = "{{color2}}"
blue = "{{color4}}"

With this ~/.config/wallust/wallust.toml file:

# wallust v3.5
#
# You can copy this file to ~/.config/wallust/wallust.toml (keep in mind is a sample config)

# SIMPLE TUTORIAL, or `man wallust.5`:
# https://explosion-mental.codeberg.page/wallust/
#
# If comming from v2: https://explosion-mental.codeberg.page/wallust/v3.html#wallusttoml

# Global section - values below can be overwritten by command line flags

# How the image is parse, in order to get the colors:
# full - resized - wal - thumb -  fastresize - kmeans
backend = "fastresize"

# What color space to use to produce and select the most prominent colors:
# lab - labmixed - lch - lchmixed - salience
color_space = "salience"

# Use the most prominent colors in a way that makes sense, a scheme color palette:
# dark - dark16 - darkcomp - darkcomp16
# light - light16 - lightcomp - lightcomp16
# harddark - harddark16 - harddarkcomp - harddarkcomp16
# softdark - softdark16 - softdarkcomp - softdarkcomp16
# softlight - softlight16 - softlightcomp - softlightcomp16
# saliencedark - saliencedarkbalanced - saliencedarkdistributed - saliencedarklow (each has the 16 variations)
# salienceligh - saliencelightbalanced - saliencelightdistributed - saliencelightlow (each has the 16 variations)
palette = "saliencedark"

# Ensures a "readable contrast" (OPTIONAL, disabled by default)
# Should only be enabled when you notice an unreadable contrast frequently happening
# with your images. The reference color for the contrast is the background color.
# check_contrast = true

# Color saturation, between [1% and 100%] (OPTIONAL, disabled by default)
# usually something higher than 50 increases the saturation and below
# decreases it (on a scheme with strong and vivid colors)
# saturation = 35

# Alpha value for templating, by default 100 (no other use whatsoever)
# alpha = 100

# Disables hooks completly
# no_hooks = true

[templates]
# NOTE: prefer '' over "" for paths, avoids escaping.
# template: A RELATIVE path that points to `~/.config/wallust/template` (depends on platform)
# target: ABSOLUTE path in which to place a file with generated templated values.
# ¡ If either one is a directory, then both SHOULD be one. !
# zathura = { template = 'zathura', target = '~/.config/zathura/zathurarc' }
alacritty = { template = "alacritty", target = "~/.config/alacritty/colors.toml" }
wayle = { template = "wayle", target = "~/.config/wayle/colors.toml" }

[hooks]
# Run commands when wallust is invoked. Useful to avoid scripting.
# wallpaper = """swww img "$(find ~/Media/Pictures/Wallpapers -iregex '.*.\\(jpg\\|jpeg\\|png\\|gif\\)' -type f | shuf -n 1)" """

And then added this import at the top of the ~/.config/wayle/config.toml file:

imports = ["colors.toml"]

Now, I'm using waypaper version 2.8 with awww as a backend, with this config (~/.config/waypaper/config.ini):

post_command = wallust run "$wallpaper" && wayle panel restart

I also do have this entire ~/.config/wayle/config.toml:

imports = ["colors.toml"]

[general]
font-sans = "Inter"
font-mono = "JetBrains Mono"
tearing-mode = false

[bar]
scale = 1.0
inset-edge = 0.0
inset-ends = 0.0
padding = 0.35
padding-ends = 0.5
module-gap = 0.5
location = "top"
bg = "bg-surface"
background-opacity = 100
border-location = "none"
border-width = 1
border-color = "border-accent"
rounding = "none"
shadow = "none"
button-variant = "block-prefix"
button-opacity = 100
button-bg-opacity = 100
button-icon-size = 1.0
button-icon-padding = 1.0
button-label-size = 1.0
# button-label-weight = "semibold"
button-label-weight = "medium"
button-label-padding = 1.0
button-rounding = "sm"
button-gap = 1.0
button-icon-position = "start"
button-border-location = "all"
button-border-width = 1
button-group-border-location = "none"
button-group-border-width = 1
button-group-padding = 0.0
button-group-module-gap = 0.25
button-group-background = "bg-elevated"
button-group-opacity = 100
button-group-border-color = "border-accent"
button-group-rounding = "sm"
dropdown-shadow = true
dropdown-opacity = 100
dropdown-autohide = true

[[bar.layout]]
monitor = "*"
left = ["hyprland-workspaces", "media", "cava", "notifications"]
# center = ["clock"]
center = ["window-title"]
right = [
  # "weather",
  "clock",
  # "battery",
  # "bluetooth",
  "network",
  # "microphone",
  # "volume",
  "dashboard",
]

[styling]
scale = 1.00
rounding = "sm"
theme-provider = "wayle"
theming-monitor = ""
matugen-scheme = "tonal-spot"
matugen-contrast = 0.0
matugen-source-color = 0
matugen-light = false
wallust-palette = "dark16"
wallust-saturation = 0
wallust-check-contrast = true
wallust-backend = "fastresize"
wallust-colorspace = "labmixed"
wallust-apply-globally = true
pywal-saturation = 0.05
pywal-contrast = 3.0
pywal-light = false
pywal-apply-globally = true

# overridden in favor of wallust colors
# [styling.palette]
# bg = "#141420"
# surface = "#1c1c2c"
# elevated = "#262638"
# fg = "#d4d6e8"
# fg-muted = "#8a8ca4"
# primary = "#e0947a"
# red = "#e46870"
# yellow = "#e0b870"
# green = "#68c898"
# blue = "#78a0e0"
# blue = "#002366" # use royal blue

[modules]
custom = []

[modules.battery]
level-icons = [
  "md-battery_android_0-symbolic",
  "md-battery_android_frame_1-symbolic",
  "md-battery_android_frame_2-symbolic",
  "md-battery_android_frame_3-symbolic",
  "md-battery_android_frame_4-symbolic",
  "md-battery_android_frame_5-symbolic",
  "md-battery_android_frame_6-symbolic",
  "md-battery_android_frame_full-symbolic",
]
charging-icon = "md-battery_android_frame_bolt-symbolic"
alert-icon = "md-battery_android_alert-symbolic"
border-show = false
border-color = "yellow"
icon-show = true
icon-color = "auto"
icon-bg-color = "yellow"
label-show = true
label-color = "yellow"
label-max-length = 0
button-bg-color = "bg-surface-elevated"
left-click = "dropdown:battery"
right-click = ""
middle-click = ""
scroll-up = ""
scroll-down = ""

[modules.bluetooth]
disabled-icon = "ld-bluetooth-off-symbolic"
disconnected-icon = "ld-bluetooth-symbolic"
connected-icon = "ld-bluetooth-connected-symbolic"
searching-icon = "ld-bluetooth-searching-symbolic"
border-show = false
border-color = "blue"
icon-show = true
icon-color = "auto"
icon-bg-color = "blue"
label-show = true
label-color = "blue"
label-max-length = 15
button-bg-color = "bg-surface-elevated"
left-click = "dropdown:bluetooth"
right-click = ""
middle-click = ""
scroll-up = ""
scroll-down = ""

[modules.cava]
bars = 20
framerate = 60
stereo = false
noise-reduction = 0.65
monstercat = 0.0
waves = 0
low-cutoff = 50
high-cutoff = 17000
input = "pipe-wire"
source = "auto"
style = "bars"
direction = "normal"
color = "accent"
button-bg-color = "bg-surface-elevated"
bar-width = 6
bar-gap = 1
internal-padding = 0.5
border-show = false
border-color = "border-accent"
# left-click = ""
left-click = "alacritty -e cava"
right-click = ""
middle-click = ""
scroll-up = ""
scroll-down = ""

[modules.clock]
# format = "%a %b %d %I:%M %p"
format = "%B %-d, %Y, %-I:%M:%S %p %:z"  # equivalent to Moment.js "MMMM D, YYYY, h:mm:ss A Z"
icon-name = "tb-calendar-time-symbolic"
border-show = false
border-color = "border-accent"
icon-show = true
icon-color = "auto"
icon-bg-color = "accent"
label-show = true
label-color = "accent"
label-max-length = 0
button-bg-color = "bg-surface-elevated"
left-click = "dropdown:calendar"
right-click = "dropdown:weather"
middle-click = ""
scroll-up = ""
scroll-down = ""
dropdown-show-seconds = false

[modules.cpu]
poll-interval-ms = 2000
temp-sensor = "auto"
format = "{{ percent }}%"
icon-name = "ld-cpu-symbolic"
border-show = false
border-color = "blue"
icon-show = true
icon-color = "auto"
icon-bg-color = "blue"
label-show = true
label-color = "blue"
label-max-length = 0
button-bg-color = "bg-surface-elevated"
left-click = ""
right-click = ""
middle-click = ""
scroll-up = ""
scroll-down = ""

[modules.dashboard]
icon-override = ""
border-show = false
border-color = "yellow"
icon-color = "auto"
icon-bg-color = "yellow"
right-click = ""
middle-click = ""
scroll-up = ""
scroll-down = ""
left-click = "dropdown:dashboard"
dropdown-lock-command = "loginctl lock-session"
dropdown-logout-command = "loginctl terminate-session $XDG_SESSION_ID"
dropdown-reboot-command = "systemctl reboot"
# dropdown-poweroff-command = "systemctl poweroff"
dropdown-poweroff-command = "wleave"

[modules.hyprland-workspaces]
min-workspace-count = 0
monitor-specific = true
show-special = true
urgent-show = true
display-mode = "label"
label-use-name = false
numbering = "absolute"
divider = " "
app-icons-show = false
app-icons-dedupe = true
app-icons-fallback = "ld-app-window-symbolic"
app-icons-empty = "tb-minus-symbolic"
icon-gap = 0.3
workspace-padding = 0.5
icon-size = 1.0
label-size = 1.0
workspace-ignore = []
active-indicator = "background"
active-color = "accent"
occupied-color = "fg-muted"
empty-color = "fg-subtle"
container-bg-color = "bg-surface-elevated"
border-show = false
border-color = "border-default"

[modules.hyprland-workspaces.workspace-map]

[modules.hyprland-workspaces.app-icon-map]

[modules.hyprsunset]
format = "{{ status }}"
temperature = 5000
gamma = 100
icon-off = "ld-sun-symbolic"
icon-on = "ld-moon-symbolic"
border-show = false
border-color = "yellow"
icon-show = true
icon-color = "auto"
icon-bg-color = "yellow"
label-show = true
label-color = "yellow"
label-max-length = 0
button-bg-color = "bg-surface-elevated"
left-click = ":toggle"
right-click = ""
middle-click = ""
scroll-up = ""
scroll-down = ""

[modules.idle-inhibit]
startup-duration = 60
icon-inactive = "tb-coffee-off-symbolic"
icon-active = "tb-coffee-symbolic"
format = "{{ state }}"
border-show = false
border-color = "green"
icon-show = true
icon-color = "auto"
icon-bg-color = "green"
label-show = true
label-color = "green"
label-max-length = 0
button-bg-color = "bg-surface-elevated"
left-click = "wayle idle toggle --indefinite"
right-click = "wayle idle toggle"
middle-click = ""
scroll-up = ""
scroll-down = ""

[modules.keybind-mode]
format = "{{ mode }}"
icon-name = "ld-layers-symbolic"
auto-hide = false
border-show = false
border-color = "blue"
icon-show = true
icon-color = "auto"
icon-bg-color = "blue"
label-show = true
label-color = "blue"
label-max-length = 0
button-bg-color = "bg-surface-elevated"
left-click = ""
right-click = ""
middle-click = ""
scroll-up = ""
scroll-down = ""

[modules.keyboard-input]
format = "{{ layout }}"
icon-name = "ld-keyboard-symbolic"
border-show = false
border-color = "yellow"
icon-show = true
icon-color = "auto"
icon-bg-color = "yellow"
label-show = true
label-color = "yellow"
label-max-length = 0
button-bg-color = "bg-surface-elevated"
left-click = ""
right-click = ""
middle-click = ""
scroll-up = ""
scroll-down = ""

[modules.media]
icon-type = "application-mapped"
players-ignored = []
player-priority = []
format = "{{ title }} - {{ artist }}"
icon-name = "ld-music-symbolic"
spinning-disc-icon = "ld-disc-3-symbolic"
border-show = false
border-color = "blue"
icon-show = true
icon-color = "auto"
icon-bg-color = "blue"
label-show = true
label-color = "blue"
label-max-length = 35
button-bg-color = "bg-surface-elevated"
left-click = "dropdown:media"
right-click = "wayle audio output-mute"
middle-click = "wayle media play-pause"
scroll-up = "wayle audio output-volume +5"
scroll-down = "wayle audio output-volume -5"

[modules.media.player-icons]

[modules.microphone]
icon-active = "ld-mic-symbolic"
icon-muted = "ld-mic-off-symbolic"
border-show = false
border-color = "red"
icon-show = true
icon-color = "auto"
icon-bg-color = "red"
label-show = true
label-color = "red"
label-max-length = 0
button-bg-color = "bg-surface-elevated"
left-click = "dropdown:audio"
right-click = ""
middle-click = "wayle audio input-mute"
scroll-up = ""
scroll-down = ""

[modules.network]
wifi-disabled-icon = "cm-wireless-disabled-symbolic"
wifi-acquiring-icon = "cm-wireless-acquiring-symbolic"
wifi-offline-icon = "cm-wireless-offline-symbolic"
wifi-connected-icon = "cm-wireless-connected-symbolic"
wifi-signal-icons = [
  "cm-wireless-signal-weak-symbolic",
  "cm-wireless-signal-ok-symbolic",
  "cm-wireless-signal-good-symbolic",
  "cm-wireless-signal-excellent-symbolic",
]
wired-connected-icon = "cm-wired-symbolic"
wired-acquiring-icon = "cm-wired-acquiring-symbolic"
wired-disconnected-icon = "cm-wired-disconnected-symbolic"
border-show = false
border-color = "accent"
icon-show = true
icon-color = "auto"
icon-bg-color = "accent"
label-show = true
label-color = "accent"
label-max-length = 15
button-bg-color = "bg-surface-elevated"
left-click = "dropdown:network"
right-click = ""
middle-click = ""
scroll-up = ""
scroll-down = ""

[modules.netstat]
poll-interval-ms = 2000
interface = "auto"
format = "{{ down_auto }} {{ up_auto }}"
icon-name = "ld-activity-symbolic"
border-show = false
border-color = "red"
icon-show = true
icon-color = "auto"
icon-bg-color = "red"
label-show = true
label-color = "red"
label-max-length = 0
button-bg-color = "bg-surface-elevated"
left-click = ""
right-click = ""
middle-click = ""
scroll-up = ""
scroll-down = ""

[modules.notification]
icon-name = "ld-bell-symbolic"
icon-unread = "ld-bell-dot-symbolic"
icon-dnd = "ld-bell-off-symbolic"
border-show = false
border-color = "green"
icon-show = true
icon-color = "auto"
icon-bg-color = "green"
label-show = true
label-color = "green"
label-max-length = 0
button-bg-color = "bg-surface-elevated"
left-click = "dropdown:notification"
right-click = "wayle notify dnd"
middle-click = ""
scroll-up = ""
scroll-down = ""
blocklist = []
icon-source = "automatic"
popup-position = "top-right"
popup-max-visible = 5
popup-stacking-order = "newest-first"
popup-duration = 5000
popup-hover-pause = true
popup-margin-x = 0.0
popup-margin-y = 0.0
popup-gap = 8.0
popup-monitor = "primary"
popup-close-behavior = "dismiss"
popup-shadow = true
popup-urgency-bar = "low"

[modules.power]
icon-name = "ld-power-symbolic"
border-show = false
border-color = "red"
icon-color = "auto"
icon-bg-color = "red"
right-click = ""
middle-click = ""
scroll-up = ""
scroll-down = ""
left-click = ""

[modules.ram]
poll-interval-ms = 5000
format = "{{ percent }}%"
icon-name = "ld-memory-stick-symbolic"
border-show = false
border-color = "green"
icon-show = true
icon-color = "auto"
icon-bg-color = "green"
label-show = true
label-color = "green"
label-max-length = 0
button-bg-color = "bg-surface-elevated"
left-click = ""
right-click = ""
middle-click = ""
scroll-up = ""
scroll-down = ""

[modules.storage]
poll-interval-ms = 30000
mount-point = "/"
format = "{{ percent }}%"
icon-name = "ld-hard-drive-symbolic"
border-show = false
border-color = "yellow"
icon-show = true
icon-color = "auto"
icon-bg-color = "yellow"
label-show = true
label-color = "yellow"
label-max-length = 0
button-bg-color = "bg-surface-elevated"
left-click = ""
right-click = ""
middle-click = ""
scroll-up = ""
scroll-down = ""

[modules.separator]
size = 1
length = 1.5
color = "fg-subtle"

[modules.systray]
icon-scale = 1.0
item-gap = 0.25
internal-padding = 0.5
blacklist = []
overrides = []
border-show = false
border-color = "border-accent"
button-bg-color = "bg-surface-elevated"

[modules.volume]
level-icons = [
  "ld-volume-symbolic",
  "ld-volume-1-symbolic",
  "ld-volume-2-symbolic",
]
icon-muted = "ld-volume-x-symbolic"
border-show = false
border-color = "red"
icon-show = true
icon-color = "auto"
icon-bg-color = "red"
label-show = true
label-color = "red"
label-max-length = 0
button-bg-color = "bg-surface-elevated"
left-click = "dropdown:audio"
right-click = ""
middle-click = "wayle audio output-mute"
scroll-up = ""
scroll-down = ""
dropdown-app-icons = "mapped"

[modules.weather]
provider = "open-meteo"
location = "Manila"
units = "metric"
format = "{{ temp }}{{ temp_unit }}"
time-format = "12h"
refresh-interval-seconds = 1800
icon-name = "ld-sun-symbolic"
border-show = false
border-color = "border-accent"
icon-show = true
icon-color = "auto"
icon-bg-color = "accent"
label-show = true
label-color = "accent"
label-max-length = 0
button-bg-color = "bg-surface-elevated"
left-click = "dropdown:weather"
right-click = ""
middle-click = ""
scroll-up = ""
scroll-down = ""

[modules.window-title]
format = "{{ title }}"
icon-name = "ld-app-window-symbolic"
border-show = false
border-color = "blue"
icon-show = true
icon-color = "auto"
icon-bg-color = "blue"
label-show = true
label-color = "blue"
label-max-length = 50
button-bg-color = "bg-surface-elevated"
left-click = "sherlock-gpui"
right-click = "zlaunch toggle"
middle-click = ""
scroll-up = ""
scroll-down = ""

[modules.window-title.icon-mappings]

[modules.world-clock]
format = "{{ tz('UTC', '%H:%M %Z') }}"
icon-name = "ld-globe-symbolic"
border-show = false
border-color = "yellow"
icon-show = true
icon-color = "auto"
icon-bg-color = "yellow"
label-show = true
label-color = "yellow"
label-max-length = 0
button-bg-color = "bg-surface-elevated"
left-click = ""
right-click = ""
middle-click = ""
scroll-up = ""
scroll-down = ""

[wallpaper]
engine-enabled = true
transition-type = "simple"
transition-duration = 0.7
transition-fps = 60
cycling-enabled = false
cycling-directory = ""
cycling-mode = "sequential"
cycling-interval-mins = 15
cycling-same-image = false
monitors = []

The main question is that, am I doing it properly? According to the tombi.toml schema, there is the option to use wallust for theme-provider, but I'm just using wayle. Is it already functional?

[Jas-SinghFSU]

I'll look into this after work. But yes you can use the wallust theme provider instead of wayle. Which also means that you should use the built in wallpaper engine (of wayle) since that drives these theme providers like paywall and wallust.

The config.toml.example should be able to help you out with that. If you don't have that then you can run 'wayle config default' to generate it.

[DeltaCream]

The config I posted for wayle actually came from config generate default, I just tweaked it a little bit to create my own style of panel modules + the wallust color changes.