Skip to content

power: color battery indicator by charge state - #11291

Open
heyssh wants to merge 1 commit into
omacom:quattrofrom
heyssh:battery-low-critical-charging-colors
Open

power: color battery indicator by charge state#11291
heyssh wants to merge 1 commit into
omacom:quattrofrom
heyssh:battery-low-critical-charging-colors

Conversation

@heyssh

@heyssh heyssh commented Sep 11, 2026

Copy link
Copy Markdown
Contributor

Omarchy Power

Bar widget showing battery, power profile, and system stats. Backed by
UPower for battery state and a handful of omarchy-* shell commands for
profiles and system stats.

Files

File Role
manifest.json Plugin/widget declaration (bar-widget, entry point Panel.qml).
Panel.qml UI: bar icon, popup panel (hero icon, progress bar, stats, power-profile picker).
Model.js Pure, framework-free helper functions used by Panel.qml. Kept separate so the logic is testable without a running shell.

Battery indicator states

The battery is drawn in three places that all share one color: the bar
icon, the panel's hero icon, and the progress bar fill.

State Condition Appearance
Normal ≥ 20% charge, not charging Theme foreground color
Low < 20% charge Red (batteryLowColor)
Critical < 5% charge Red, plus a ! appended to the battery glyph
Charging Actively charging (see below) Green (batteryChargingColor)

Notes on precedence:

  • Charging wins over low/critical color. A battery recovering from 3%
    is good news, not an alarm, so the green tint takes priority over red
    whenever root.charging is true. "Charging" here already excludes
    FullyCharged and an active charge-threshold hold (batteryFlowIdle),
    matching the rest of the file's existing charging property.
  • The ! mark is percentage-only. It's driven purely by
    batteryIsCritical (< 5%), independent of charge state — so it can
    still show up while charging back from a very low percentage.

The threshold checks live in Model.js as batteryIsLow(device) and
batteryIsCritical(device), following the file's existing style of thin,
pure wrappers around batteryFraction. Panel.qml exposes them as
batteryLow / batteryCritical, and combines them with charging into a
single batteryIndicatorColor property that every visual battery element
binds to.

Testing without draining the battery

To visually check the low/critical states without waiting for a real
laptop to discharge, temporarily hardcode the two state properties in
Panel.qml

< 20% charge:

screenshot-2026-09-11_11-58-44

< 5% charge:

screenshot-2026-09-11_11-58-26

Actively charging (see below):

screenshot-2026-09-11_11-58-08

Add threshold-based colors to the battery indicator (bar icon, panel
hero icon, and progress bar fill):

- Below 20% charge: tint red
- Below 5% charge: red, plus an exclamation mark appended to the
  battery glyph
- Charging: tint green, taking priority over the low-battery red
  since a battery recovering from a low charge isn't an alarm state

batteryIsLow/batteryIsCritical are added to Model.js as pure
percentage checks, following the file's existing testable-helper
style. Panel.qml exposes them plus a shared batteryIndicatorColor
property so all three visual battery elements stay in sync.

Colors are literal hex values for now (#e5484d / #30a46c); happy to
switch to semantic Color tokens if the theme exposes them.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant