Added dark and light themes for easier rendering of logos on mixed ba…

…ckground colors

README.md

@@ -106,8 +106,29 @@ This is particularly useful if you have a diagram which you want to keep mostly
 logo-diagram-generator -c examples/full.example.yml -o examples -n full.example.dark --override 'style.diagramBackgroundColor=#333333' --override 'style.groupLabelFontcolor=#ffffff' --override 'style.colorPalette=aqua,purple3,maroon3,orangered,yellow,lime,fuchsia,cornflower,peachpuff,forestgreen'
 ```
 
+### Dark / Light Theme
+
+A common challenge when generating these diagrams is making them work on different background colors.
+
+To help with this, as well as the `--override` parameter above, there is also a convenient `--theme` CLI parameter.
+
+There are two options, `dark` and `light`, which set the group label text color and line color palette, and add either a white or dark grey stroke around every path in every logo, to help those logos be visible on a light or dark background. Examples below:
+
+```bash
+logo-diagram-generator -c examples/full.example.yml -o examples -n full.example.dark --override 'style.diagramBackgroundColor=#111111' --theme dark
+```
 ![Dark Theme Example Diagram](examples/full.example.dark_logos.png)
 
+```bash
+logo-diagram-generator -c examples/full.example.yml -o examples -n full.example.light --theme light
+```
+![Light Theme Example Diagram](examples/full.example.light_logos.png)
+
+**⚠️ Warning: ** This approach is not perfect - adding a stroke around paths in the logo SVGs sometimes makes them look awful or totally breaks them! 
+
+If you find a specific logo doesn't work with this, you can set `strokeWidth: 0` on that tool in the config to disable the stroke for it.
+
+
 ## Contributing
 
 Contributions to improve `logo-diagram-generator` or add new features are welcome. Please submit a pull request or open an issue to discuss your ideas.

examples/full.example.yml

@@ -21,6 +21,7 @@ ecosystem:
     scale: 3
     margin: 1
     positionAdjustY: -20
+    strokeWidth: 2
   groups:
     - category: Cluster Management
       tools:
@@ -36,6 +37,7 @@ ecosystem:
         - alias: helmsh
           label: Helm
           name: Helm
+          strokeWidth: 4
         - alias: argoprojio
           label: Argo
           name: Argo CD
@@ -72,3 +74,4 @@ ecosystem:
         - label: Backstage
           name: Backstage
           svgURL: https://raw.githubusercontent.com/cncf/artwork/master/projects/backstage/horizontal/color/backstage-horizontal-color.svg
+          strokeWidth: 5

logo_diagram_generator/cli.py

@@ -31,6 +31,13 @@ def main():
         action="append",
         help="Override specific configuration entries. Use format: key=value. This option can be used multiple times for multiple overrides.",
     )
+    parser.add_argument(
+        "-t",
+        "--theme",
+        choices=["dark", "light"],
+        default=None,
+        help="Theme for the diagram, either 'dark' or 'light' (default: %(default)s)",
+    )
 
     args = parser.parse_args()
 
@@ -51,6 +58,30 @@ def main():
         download_logos.download_all_logos(config_filepath=args.config, logos_dir=args.logos_dir)
         logging.info(f"Downloaded all logos to directory: {args.logos_dir}")
 
+    # args.override is e.g. [{'style.diagramBackgroundColor': '#111111'}]
+    theme_overrides = None
+    if args.theme == "dark":
+        theme_overrides = {
+            "style.groupLabelFontcolor": "#ffffff",
+            "style.colorPalette": "aqua,purple3,maroon3,orangered,yellow,lime,fuchsia,cornflower,peachpuff,forestgreen",
+            "style.defaultLogoStrokeColor": "white",
+            "style.defaultLogoStrokeWidth": "0.5",
+        }
+    elif args.theme == "light":
+        theme_overrides = {
+            "style.groupLabelFontcolor": "#222222",
+            "style.colorPalette": "seagreen,maroon,midnightblue,olive,red,mediumblue,darksalmon,darkgreen,orange",
+            "style.defaultLogoStrokeColor": "#333333",
+            "style.defaultLogoStrokeWidth": "0.2",
+        }
+
+    if theme_overrides is not None:
+        overrides = args.override if args.override is not None else []
+        # Merge all dictionaries in the list into a single dictionary
+        combined_overrides = {k: v for d in overrides for k, v in d.items()}
+        combined_overrides.update(theme_overrides)
+        args.override = [combined_overrides]
+
     output_svg_path, output_png_path = generate_diagram.generate_diagram_from_config(
         config_filepath=args.config,
         diagram_name=args.name,

logo_diagram_generator/generate_diagram.py

@@ -151,6 +151,9 @@ def embed_logos_in_diagram(diagram_name, diagram_svg_path, output_svg_path, conf
     logging.info(f"Embedding logos into diagram from {diagram_svg_path}")
 
     default_logo_scale = config["ecosystem"].get("style", {}).get("defaultLogoScale", 1.5)
+    default_logo_stroke_color = config["ecosystem"].get("style", {}).get("defaultLogoStrokeColor", None)
+    default_logo_stroke_width = config["ecosystem"].get("style", {}).get("defaultLogoStrokeWidth", 0)
+
     with open(diagram_svg_path, "r") as file:
         diagram_svg = file.read()
 
@@ -171,6 +174,9 @@ def embed_logos_in_diagram(diagram_name, diagram_svg_path, output_svg_path, conf
         logo_position_adjust_x = tool_config.get("positionAdjustX", 0)
         logo_position_adjust_y = tool_config.get("positionAdjustY", 0)
 
+        logo_stroke_color = tool_config.get("strokeColor", default_logo_stroke_color)
+        logo_stroke_width = tool_config.get("strokeWidth", default_logo_stroke_width)
+
         tool_name_slug = utils.slugify(tool_name)
         logo_svg_path = os.path.join(logos_dir, f"{tool_name_slug}.svg")
 
@@ -238,6 +244,16 @@ def embed_logos_in_diagram(diagram_name, diagram_svg_path, output_svg_path, conf
             logo_node.setAttribute("width", str(logo_orig_width))
             logo_node.setAttribute("height", str(logo_orig_height))
 
+            if logo_stroke_color is not None and float(logo_stroke_width) > 0:
+                # List of SVG shape tags to add strokes to
+                shape_tags = ["path", "rect", "circle", "ellipse", "line", "polyline", "polygon"]
+
+                for tag in shape_tags:
+                    elements = logo_svg_dom.getElementsByTagName(tag)
+                    for element in elements:
+                        element.setAttribute("stroke", logo_stroke_color)
+                        element.setAttribute("stroke-width", str(logo_stroke_width))
+
             # Remove the tool node completely and insert the logo node at the end of the diagram documentElement
             tool_node.parentNode.removeChild(tool_node)
             diagram_graph_node.appendChild(logo_node)

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "poetry.core.masonry.api"
 
 [tool.poetry]
 name = "logo-diagram-generator"
-version = "0.3.0"
+version = "0.3.1"
 description = "Generate SVG diagrams of a (tech) ecosystem, using logos from each tool organised into groups around a central logo"
 authors = ["Andrew Beveridge <[email protected]>"]
 license = "MIT"