dark mode option

keymap_drawer/__main__.py

@@ -52,6 +52,7 @@ def draw(args: Namespace, config: DrawConfig) -> None:
         keys_only=args.keys_only,
         combos_only=args.combos_only,
         ghost_keys=args.ghost_keys,
+        dark_mode=True if args.dark_mode == "yes" else False if args.dark_mode == "no" else None,
     )
 
 
@@ -149,6 +150,14 @@ def main() -> None:
         "see README for schema",
         type=FileType("rt"),
     )
+    draw_p.add_argument(
+        "--dark-mode",
+        help="Style the SVG for dark mode screens, will follow system settings if set to 'auto'",
+        choices=["yes", "no", "auto"],
+        default="no",
+        nargs="?",
+        const="yes",
+    )
 
     parse_p = subparsers.add_parser(
         "parse", help="parse a QMK/ZMK keymap to YAML representation to stdout, to be used with the `draw` command"

keymap_drawer/config.py

@@ -202,6 +202,23 @@ class KeySidePars(BaseModel):
         ),
     )
 
+    # style CSS to overide colors for dark mode
+    svg_style_dark: str = Field(
+        exclude=True,
+        default=dedent(
+            """\
+            svg.keymap { fill: #d1d6db }
+            rect.key { fill: #050709 }
+            rect.key, rect.combo { stroke: #303336 }
+            rect.combo, rect.combo-separate { fill: #001133 }
+            rect.held, rect.combo.held { fill: #220000 }
+            text.label { stroke: #000000 }
+            text.trans { fill: #7e8184 }
+            path.combo { stroke: #7f7f7f }
+            """
+        ),
+    )
+
     # extra CSS to be appended to svg_style
     # prefer to set this over modifying svg_style since the default value of svg_style can change
     svg_extra_style: str = ""

keymap_drawer/draw/draw.py

@@ -175,6 +175,7 @@ def print_board(
         keys_only: bool = False,
         combos_only: bool = False,
         ghost_keys: Sequence[int] | None = None,
+        dark_mode: bool | None = None,
     ) -> None:
         """Print SVG code representing the keymap."""
         layers = deepcopy(self.keymap.layers)
@@ -227,7 +228,13 @@ def print_board(
         )
         self.output_stream.write(self.get_glyph_defs())
         extra_style = f"\n{self.cfg.svg_extra_style}" if self.cfg.svg_extra_style else ""
-        self.output_stream.write(f"<style>{self.cfg.svg_style}{extra_style}</style>\n")
+        if dark_mode is None and self.cfg.svg_style_dark:
+            dark_style = f"\n@media (prefers-color-scheme: dark) {{\n{self.cfg.svg_style_dark}\n}}"
+        elif dark_mode is True and self.cfg.svg_style_dark:
+            dark_style = f"\n{self.cfg.svg_style_dark}"
+        else:
+            dark_style = ""
+        self.output_stream.write(f"<style>{self.cfg.svg_style}{dark_style}{extra_style}</style>\n")
         self.output_stream.write(self.out.getvalue())
 
         if self.cfg.footer_text: