qr-badge
このページのQR、1タグで。
作ったものを、目の前の端末へ届けるために。
<script src="https://qr.bluemage.dev/qr-badge.js" defer></script>
<qr-badge></qr-badge>URL 指定不要（開いているページを自動でQR化）。 色もページから継承します。→ 右のQRがこのページ自身です。クリックで拡大。
なじむ — テーマも zero-config
既定の theme="auto" は、ページの
meta theme-color・リンク色・--qr-badge-accent から
アクセント色を拾い、四隅の目に流し込みます。favicon があれば中央に据えます。
暗い背景では白地カードに自動フォールバック（反転QRはスキャナ互換性が落ちるため）。
コントラストが足りない色は自動で沈めるので、スタイルは継承、読み取りは保証。
特徴を出す — 和の伝統色テーマ
印刷物やスライドなど「ページの文脈がない場所」にはプリセットを。
ruri 瑠璃
shu 朱
asagi 浅葱
edo 江戸紫
akane 茜
mono
API — 貼れる場所ならどこへでも
README・スライド・印刷物には画像として。
<img src="https://qr.bluemage.dev/v1?url=https://example.com&theme=ruri&size=160">属性
| 属性 | 既定 | 説明 |
|---|---|---|
url | location.href | QR化するURL |
size | 96 | 表示サイズ(px)。クリックで拡大表示 |
theme | auto | auto / mono / ruri / shu / asagi / edo / akane |
logo | favicon 自動 | 中央ロゴ画像のURL。off で無効 |
アクセント色の明示指定は CSS で: qr-badge { --qr-badge-accent: #B7282E; }