Styling and theming

import '@devix-labs/qr-code/styles.css';        // plain
import '@devix-labs/qr-code/styles.layer.css';  // the same, inside @layer devix

Most of a QR code's appearance is an option rather than a style — dark, light, shape, quiet — because those change what is drawn, and some of them change whether it scans. The stylesheet is the frame around it.

Variables#

.dxq {
  --dxq-width: 100%;
  --dxq-max-width: 260px;
  --dxq-radius: 10px;
  --dxq-font-size: 12px;
  --dxq-muted: #71717a;
  --dxq-warn: #b45309;
  --dxq-warn-bg: #fffbeb;
  --dxq-warn-border: #fcd34d;
}

The code is fluid by default: it fills --dxq-width up to --dxq-max-width, so one rule sizes it everywhere.

.qr-large .dxq { --dxq-max-width: 420px; }

Your classes#

createQrCode(el, {
  classNames: { root: 'rounded-2xl border p-4', code: 'shadow-sm', warning: 'text-xs' },
});

Parts: root, code, warning.

Dark mode#

theme: 'auto' reads the page and re-reads it when a toggle flips, but note what that does and does not change: it styles the frame, not the code. The modules stay dark-on-light, because that is what readers expect and inverting them is a common cause of failed scans.

If you want a code that sits well on a dark page, give it a light panel rather than inverting it:

.dxq[data-theme='dark'] .dxq-code svg {
  padding: 8px;
  background: #fff;
  border-radius: var(--dxq-radius);
}

Or set light to a pale colour and leave dark genuinely dark.

Printing#

@media print {
  .dxq { --dxq-max-width: 40mm; }
  .dxq-warning { display: none; }
}

An SVG prints at the printer's resolution rather than the screen's, which is the main reason to prefer it to a canvas here. Keep printed codes at 2cm or more and keep the quiet zone.