Questions about dark mode-like styling for light backgrounds

[caksoylar]

(Copying a few questions from precondition/keymapdb#74 (comment) to continue in this repo.)

1. I assume you used the svg extra style to make the dark mode the way you wanted?
   or is there another field that I should be looking for?

2. one thing still bothers me, how do I get it to draw combos outside of the keymap like in your example: here
   I'm talking about the combo for 1AC and the others that draw the lines with the rounded corner to appear outside of the area where the keys are.
   I'd like to do that for my capslock keymap

3. I just checked and if I attempt to attach the new one here then the layer headers are still white with black outline, even though when I open it in inkscape, the layer headers will be filled with black.
   I'll attach the configurations I have here: link

[caksoylar]

I assume you used the svg extra style to make the dark mode the way you wanted?
or is there another field that I should be looking for?

Yes, that field is how you add extra CSS to override the styling: https://github.com/caksoylar/keymap-drawer/blob/main/CONFIGURATION.md#svg_extra_style

I added it in the keymap YAML in the web app to share, but typically you'd put it in the config file.

one thing still bothers me, how do I get it to draw combos outside of the keymap like in your example:

This is done with the a:/align: field when defining the combos, you can see it in the YAML of the example. All possible fields are documented here. In particular, also check out draw_separate

I just checked and if I attempt to attach the new one here then the layer headers are still white with black outline, even though when I open it in inkscape, the layer headers will be filled with black.

You are using auto dark mode, so if you view it with dark mode set (in your browser, or OS if the browser passes it through), it will have white fill for headers. This is what the last line in svg_extra_style ensures.

Inkscape likely ignores the dark mode overrides (the part with @media (prefers-color-scheme: dark)) so it shows you just the light mode. keymapdb.com also forces light mode, as far as I know.

[cyb3rkun]

thanks a lot for your help.
and also for moving this discussion to a more relevent area.

I just found keymap drawer has a light theme mode.
would it be safe for me to assume that if I preview the keymap in light mode on keymap-drawer would it render the same on keymapdb?

[caksoylar]

If you mean dark_mode: false, I think that should be safest. I do the same here: https://github.com/caksoylar/zmk-config/tree/main/keymap-drawer/keymapdb

Then you can also remove any @media (prefers-color-scheme: dark) blocks from svg_extra_style.

[cyb3rkun]

Yes I've set the dark_mode: false but I mean the theme for the keymap-drawer website in the website's settings

[caksoylar]

Oh, that theme setting doesn't propagate to how the SVG is displayed in auto mode. It still uses your OS/browser light/dark mode setting. I actually have an open issue with Streamlit about that: streamlit/streamlit#6456