quickshell bar config

Minimal Quickshell bar + notification/OSD overlays for Hyprland.

Files

File	Purpose
shell.qml	Entry point: bar windows, module loading, battery detection
config.js	All configuration: modules, colors, thresholds, positions
modules/*.qml	Individual bar modules

Modules

Add/remove from Config.bar.modulesLeft or Config.bar.modulesRight in config.js.

Module	Shows
workspaces	Hyprland workspace list
title	Focused window title
network	IP + link speed
memory	RAM used / total
cpu	CPU usage %
cputemp	CPU temperature
gpuusage	GPU usage %
gpuvram	GPU VRAM usage
gputemp	GPU temperature
volume	Volume icon + %, scroll to change, right-click mute
battery	Battery %, auto-hidden if no battery hardware
tray	System tray icons
clock	Current time

Modules are separated by separator text in the right bar. The separator auto-hides when adjacent module is invisible.

Configuration (config.js)

bar

var bar = {
  position: "bottom",
  height: 26,
  font: "JetBrainsMono Nerd Font",
  fontSize: 14,
  spacing: 4,
  marginH: 8,
  modulesLeft: ["workspaces", "title"],
  modulesRight: ["network", "memory", "cpu", "cputemp", "gpuusage", "gpuvram", "gputemp", "volume", "battery", "tray", "clock"],
  showClass: true
};

colors

var colors = {
  bg: "#000000",      // bar background
  fg: "#ffffff",      // default text
  idle: "#aaaaaa",    // neutral state
  good: "#00ff00",    // good state (green)
  bad: "#ffff00",     // warning state (yellow)
  critical: "#ff0000" // critical state (red)
};

thresholds

var thresholds = {
  memory: { good: 15, bad: 50, critical: 85 },
  cpu: { good: 30, bad: 60, critical: 85 },
  cpuTemp: { good: 50, bad: 70, critical: 85 },
  gpuUsage: { good: 30, bad: 60, critical: 85 },
  gpuVram: { good: 50, bad: 75, critical: 90 },
  gpuTemp: { good: 50, bad: 70, critical: 85 },
  volume: { good: 15, bad: 50, critical: 90 },
  battery: { good: 20, bad: 10, critical: 5 }
};

Color thresholds used by cpu, memory, gpu, volume, and battery modules. Values are percentages (0–100).

• memory / cpu / cpuTemp / gpuUsage / gpuVram / gpuTemp: higher = worse. { good, bad, critical }
• volume: higher = worse. { good: 15, bad: 50, critical: 90 } — above 15% green, above 50% yellow, above 90% red
• battery: lower = worse (inverted). { good: 20, bad: 10, critical: 5 } — below 20% green, below 10% yellow, below 5% red. Green when charging.

notifications

enabled: true | false
position: "top_left" | "top_right" | "bottom_left" | "bottom_right"
width: 350
maxVisible: 5
timeout: 5000           // ms, -1 for sticky on critical
spacing: 8
margin: 10
radius: 4
background / foreground / border: color
lowColor / normalColor / criticalColor: urgency colors

osd (volume overlay)

var notifications = {
  enabled: true,
  position: "top_right",
  width: 350,
  maxVisible: 5,
  timeout: 5000,
  spacing: 8,
  margin: 10,
  radius: 4,
};

OSD volume bar color uses the same thresholds.volume as the volume module.

workspace

var workspace = {
  width: 24 // workspace box width
};

separator

var separator = {
  text: "|",
  color: "#3c3c3c"
};

icons

Optional text prefix per module. Empty string = no prefix.

var icons = {
  workspaces: "",
  title: "",
  clock: "",
  cpu: "CPU: ",
  cputemp: "",
  memory: "RAM: ",
  network: "",
  gpuusage: "GPU: ",
  gpuvram: "VRAM: ",
  gputemp: "",
  tray: ""
};