Is there a workaround to use CSS classes for the clock's calendar feature?

[nickjj]

I really like Waybar but it has 1 use case I'm not able to solve.

I have this to configure the calendar and it works fine:

    "calendar": {
      "mode": "year",
      "mode-mon-col": 3,
      "weeks-pos": "right",
      "on-scroll": 1,
      "format": {
        "months": "<span color='#ffead3'><b>{}</b></span>",
        "days": "<span color='#ecc6d9'><b>{}</b></span>",
        "weeks": "<span color='#99ffdd'><b>W{:%V}</b></span>",
        "weekdays": "<span color='#ffcc66'><b>{}</b></span>",
        "today": "<span color='#ff6699'><b><u>{}</u></b></span>"
      }
    }

But this requires hard coding color= attributes straight into Waybar's config.

This is a problem because I have multiple themes on my system and what I end up doing is symlinking in specific theme related files to "activate" a specific theme. This strategy works great for everything on my system, including Waybar itself because in its style.css file I just have @import "./theme.css"; which is a symlink destination for the active theme.

The problem is, the calendar doesn't have its own CSS classes to style it. If you try to add a custom class such as "months": "<span class='hello'><b>{}</b></span>", then Waybar will throw this error from markup due to error parsing markup: Attribute 'class' is not allowed on the <span> tag on line 1 char 82.

All in all this blocks being able to theme your calendar.

Sure, I can use sed to do inline replacements to the config.jsonc file itself but this is error prone, goes against the grain of everything else on my system and most importantly (in a bad way) it creates git diffs because I have my dotfiles in git.

I'm wondering how you've managed to solve this problem?