How to style/customize mode indicator

[SeerLite]

Hi!
I was wondering if there's any way to change the appearance of the "current mode" indicator from config.js. I'd like to give it dark colors and make it transparent, so it doesn't stand out so much on dark themed pages.

I was thinking of just applying an userstyle globally that modifies #notification (also, isn't that way too generic as an id? idk how css collisions work tho so whatever :p). But seeing as how you can change the appearance of hints from config.js I thought maybe this could be changed there as well.

Thanks!

[SeerLite]

Looks like using an userstyle doesn't work, because the indicator is inside a shadow-root, and Stylus can't modify the CSS from outside (or something like that).

[alexherbo2]

Good question. The mode indicator is part of modal.js. The library has a documentation and a tutorial, but customizing the appearance is undocumented, so I guess you will have to look at the source.

From Krabby, you can either extend the CSS document or replace it.

~/.config/krabby/config.js

const { modes } = krabby
const { modal } = modes

modal.style += `
  your-style-here
`