Dynamic class names

[izelnakri]

Problem statement: As a user I'd like style my battery module when it's charging(or not) and the battery levels. Same dynamic styling is needed for disk usage, cpu, memory etc.

In waybar I could create a module with different states for different css class name styling.

For example in config.json:

  "disk": {
    "format": "🗄️ {percentage_used}% [{used}]",
    "states": {
      "very-high": 80,
      "high": 60
    },
    "on-click": "tmux kill-session -t disk || alacritty -e tmux new-session -s disk \"zsh -c 'df -h'; zsh\""
  },

This allows me in waybar to style different states via:

#disk.very-high {
  color: @waybar_red_color;
}
#disk.high {
  color: @waybar_orange_color;
}

How can I go about implementing this in ironbar?

One not-so-ideal solution I found is to create different modules with type: custom and has different show_ifs and class attributes. However this solution is very verbose and requires me to create bash scripts(I think?). I'm not even sure how to accomplish this with Pango markup, could you provide an example for this scenario in the documentation?

Basically I think we need:

• a custom states option object & assignments for type: custom and have it documented, or make the class value Dynamic String, even then I'm not sure how to add these classes dynamically on same bash(?) script check?. I'm also not sure how I can create conditionals in Pango markup. I found Pango markup documentation to be insufficient to say the least :sweat_smile:
• If we'd like to keep things as is, with no changes in ironbar. That means the not-so-ideal show_if solution is the only way to go(?). It would be great if we can put a basic example in the documentation for a battery level + charging states custom css classes assignment/change.
• A documented way to declare internal Modules for ironbar.