alexherbo2 / krabby

A keyboard interface to the web, inspired by Kakoune
https://krabby.netlify.app
The Unlicense
311 stars 20 forks source link

How to style/customize mode indicator #28

Open SeerLite opened 3 years ago

SeerLite commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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
`