[GH-ISSUE #516] Changing style based on widget state #1574

New issue

Closed

opened 2026-05-22 22:53:06 +01:00 by JakeStanger · 1 comment

JakeStanger commented

2026-05-22 22:53:06 +01:00

Owner

Originally created by @nyadiia on GitHub (Mar 29, 2024).
Original GitHub issue: https://github.com/JakeStanger/ironbar/issues/516

Describe the feature you'd like
In waybar at least, there is a way to set a "warning" and "critical" amount for the battery widget. I think it would be cool if we were able to declare thresholds and change the style based on them. For example, if CPU temperature goes above 80C, then the background could change to yellow and the text to black, and if it goes above 90, it could go to red ( maybe blink too, I haven't tested to see if animations are available ).

On my previous waybar configuration, I had it so the background would change at 30% battery and then start blinking red at 15%. It also turned a different color when I had my laptop plugged in.

Describe alternatives you've considered
I was thinking of using a script instead of the actual widget but I think passing in color codes would be worse than having it adhere to the style.css file

Additional context
waybar css for what I described

#battery {
  border-style: solid;
  border-width: 2px 2px 2px 0px;
	border-color: #f5c2e7;
  border-radius: 0px 20px 20px 0px;
  padding-left: 5px;
  padding-right: 10px;
  margin-right: 3px;
  transition: none;
  color: white;
  background: rgba(17, 17, 27, 0.8);
}

#battery.charging {
  color: #313244;
  background-color: #f38ba8;
}

#battery.warning:not(.charging) {
  background: #f38ba8;
}


@keyframes blink {
  to {
    background-color: #11111b;
    color: #f38ba8;
  }
}

#battery.critical:not(.charging) {
  background-color: #f38ba8;
  color: #313244;
  animation-name: blink;
  animation-duration: 0.2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

Originally created by @nyadiia on GitHub (Mar 29, 2024). Original GitHub issue: https://github.com/JakeStanger/ironbar/issues/516 **Describe the feature you'd like** In waybar at least, there is a way to set a "warning" and "critical" amount for the battery widget. I think it would be cool if we were able to declare thresholds and change the style based on them. For example, if CPU temperature goes above 80C, then the background could change to yellow and the text to black, and if it goes above 90, it could go to red ( maybe blink too, I haven't tested to see if animations are available ). On my previous waybar configuration, I had it so the background would change at 30% battery and then start blinking red at 15%. It also turned a different color when I had my laptop plugged in. **Describe alternatives you've considered** I was thinking of using a script instead of the actual widget but I think passing in color codes would be worse than having it adhere to the style.css file **Additional context** waybar css for what I described ```css #battery { border-style: solid; border-width: 2px 2px 2px 0px; border-color: #f5c2e7; border-radius: 0px 20px 20px 0px; padding-left: 5px; padding-right: 10px; margin-right: 3px; transition: none; color: white; background: rgba(17, 17, 27, 0.8); } #battery.charging { color: #313244; background-color: #f38ba8; } #battery.warning:not(.charging) { background: #f38ba8; } @keyframes blink { to { background-color: #11111b; color: #f38ba8; } } #battery.critical:not(.charging) { background-color: #f38ba8; color: #313244; animation-name: blink; animation-duration: 0.2s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate; } ```

JakeStanger

2026-05-22 22:53:06 +01:00