Implement CSS-based QR code coloring with transparent backgrounds

[Copilot]

Implemented CSS-controlled QR code colors using currentColor and transparent backgrounds, eliminating the need to regenerate SVGs when changing colors.

Changes

QR Generation (scripts/generate_qr_svg.py)

• Generate transparent backgrounds via light=None parameter
• Replace hardcoded stroke colors with stroke="currentColor"
• Add qrcode-box class to SVG elements for CSS targeting

HTML Templates

• Set color property on .qrcode-box to control QR foreground color
• Container background shows through transparent QR background

Test References

• Update reference_qr.svg and reference_elsa_qr.svg for new SVG structure

Usage

Change QR color via CSS without regeneration:

.qrcode-box { color: #0b6623; }  /* Green QR */
.qrcode-box { color: #1565C0; }  /* Blue QR */

The SVG's stroke="currentColor" inherits from parent element's color property.

Visual Results

Green QR (default)

Blue QR (Elsa's theme)

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Process TODO.md items - 2025-12-09</issue_title>
<issue_description>@copilot

Please process the following TODO items from TODO.md and create a PR with the necessary changes.

Before creating the final commit or PR, run the repository linter and tests and fix any failures:

• Run the linter: flake8
• Run the test suite: pytest

Only create the final PR/commit when both the linter and tests pass. Include the linter and test results in the PR description or a CI run log.

Now apply the requested changes for the TODOs below and open a branch+PR when complete:

- Coloring by CSS

The generator now emits SVGs whose modules use qr-foreground-color; each injected SVG gets the HTML class `qrcode-box` applied to it.

This would also include the ability for transparent QR codes.

That would look like this:

- CSS Color is assigned to the QR SVG DIV. Which would make it that color via CSS.
- The QR code being generated would have a transparent background and would be inverted of it's normal blocks.
- That way the color from behind the image would shine through as the background color and the foreground color would be the only trhing rendered.

Thus creating a see thru QR code, using less data and allowing the color to be changed by CSS instantly and without re-rendering.```

After completing the work, please update TODO.md accordingly (remove completed items or mark as done).
</issue_description>

## Comments on the Issue (you are @copilot in this section)

<comments>
</comments>

• Fixes Process TODO.md items - 2025-12-09 #12

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Updated (UTC)
❌ Deployment failed View logs	simplewish	61de5a0	Jan 02 2026, 06:05 AM

[Copilot]

Pull request overview

This PR implements CSS-based QR code coloring to enable instant color changes without regenerating SVG files. The implementation generates QR codes with transparent backgrounds and uses CSS currentColor to control the foreground color, reducing data size and improving flexibility.

Key Changes

• Modified QR generation to create transparent backgrounds using light=None and replace hardcoded stroke colors with stroke="currentColor"
• Added qrcode-box class to generated SVG elements and set the color CSS property on .qrcode-box containers to control QR appearance
• Updated test reference files to reflect the new SVG structure without background fills

Reviewed changes

Copilot reviewed 4 out of 6 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
scripts/generate_qr_svg.py	Modified to generate transparent QR codes with currentColor strokes and added qrcode-box class for CSS targeting
index.html	Added color:#0b6623 to .qrcode-box CSS rule and updated embedded QR SVG to use currentColor
elsa.html	Added color:#1565C0 to .qrcode-box CSS rule and updated embedded QR SVG to use currentColor
tests/reference_qr.svg	Updated reference to match new transparent QR structure with currentColor strokes
tests/reference_elsa_qr.svg	Updated reference to match new transparent QR structure with currentColor strokes
TODO.md	Removed completed TODO items about CSS-based coloring implementation

[Copilot]

The function now always uses light=None to create transparent backgrounds, which means the background_color parameter in the function signature (line 325) is no longer used. However, the parameter still exists and is being passed by callers (e.g., line 775 in main()).

This creates an inconsistent API where:

1. The CLI still accepts --background-color
2. Meta tags still read qr-background-color
3. These values are passed to the function but silently ignored

Consider either removing the unused parameter from the function signature and updating all callers, or documenting that this parameter is now ignored in favor of CSS-controlled transparency.

Suggested change

	# Propagate the requested background color as metadata on the root SVG.
	# This keeps the QR visually transparent while preserving the value
	# provided via CLI/meta for downstream consumers (CSS/JS or tooling).
	if background_color is not None:
	svg = re.sub(
	r'(<svg\b[^>]*?)>',
	r'\1 data-qr-background-color="' + background_color + '">',
	svg,
	count=1,
	)