v0.16.0: Dark mode and modifier functions parsing

[caksoylar]

This release contains two major new features: parsing of modifier functions and dark mode support! It also contains a couple of smaller breaking changes, so make sure to check them out below.

Features

Parsing

• Added support for parsing modifier functions like LC(V) in ZMK and LCTL(KC_V) in QMK, used for sending modified keycodes like ctrl+v events with one key press
  • By default these will be converted to Ctl+ V representation, this is configurable via the new parse_config.modifier_fn_map setting
  • You can also assign special names to specific mod combinations, like Hyper+ X for LC(LS(LG(LA(X))))
  • Breaking change: If you were using entries like LC(V): Paste in parse_config.zmk_keycode_map or C(V): Paste in qmk_keycode_map, they will no longer work because LC and V parts are processed separately. If you want to preserve the mapping, instead define them in raw_binding_map like &kp LC(V): Paste for ZMK or C(KC_V): Paste for QMK.
• Added parsing for QMK tap-toggle layers TT(LAYER) by @m-demare in feat: Add parsing for tap-toggle layers #87

Drawing

• Added dark mode support, by @snoyer!
  • This is implemented as a special set of CSS overrides that get added to the final CSS if the new draw_config.dark_mode setting is on, or added under @media (prefers-color-scheme: dark) when set to "auto" to fit the web page or OS light/dark setting.
  • The default is false which means light mode only, so this is not a breaking change for CLI users. The web app overrides it to "auto".

dark_mode: false	dark_mode: true	dark_mode: auto

• Added support for appending footer text to produced SVGs using draw_config.footer_text

  • The value goes into a <text> element but it isn't escaped, so you can add e.g. links using <a> tags
  • The default value is empty so this isn't a breaking change for CLI users. The web app overrides it to "Created with keymap-drawer"

• Added support for using Phosphor Icons, check out how to use them in the README section

CLI

• Added -o/--output parameter to all keymap subcommands, to write their output to the given path rather than stdout
  • Using these parameters are recommended if you are running the CLI on Windows, since they ensure the outputs are written with utf-8 encoding rather than the locale-specific one (which can break many things). This release also incorporates a couple fixes that ensure operation in Windows (tested in powershell)
  • Breaking change: keymap draw --ortho-layout no longer supports the -o short form since that is taken over by the output parameter

Full Changelog: v0.15.0...v0.16.0

---

This discussion was created from the release v0.16.0: Dark mode and modifier functions parsing.

[haunt98]

Thank you @caksoylar, such a wonderful update. I will try dark mode ASAP :D

[caksoylar]

It looks like Safari still doesn’t support SVGs inheriting color scheme, unfortunately: https://bugs.webkit.org/show_bug.cgi?id=199134

So auto mode always resolves to light variant on Safari.

[snoyer]

It looks like Safari still doesn’t support SVGs inheriting color scheme, unfortunately: bugs.webkit.org/show_bug.cgi?id=199134

So Safari does supports prefers-color-scheme (https://caniuse.com/prefers-color-scheme) but not for SVG? :(

So auto mode always resolves to light variant on Safari.

Technically there could be an alternative auto mode that does the overriding the other way (dark by default, changes to light if preferred and supported) using @media (prefers-color-scheme: light). Unfortunately that doesn't solve the problem so I'm not sure it would be worth the added complexity.

[caksoylar]

Yeah, I am inclined to let this go. Maybe some tricks can be done to detect the color scheme in md/html and show one of the two SVGs when you want to embed them, but that's out of scope for the tool itself.