Dark mode images (filter)

Quick implementation

.dmimg-fig--tuned img {
  filter: brightness(0.82) contrast(1.08) saturate(0.92);
}

Prompt this to your LLM

Performance and prefers-reduced-data.

You are tuning hero photography for a dark dashboard.

Goal: Apply a reusable filter class to raster images so they sit calmer on oklch surfaces.

Technical constraints:
- Use filter: brightness() contrast() saturate() — avoid heavy blur on large bitmaps.
- Prefer serving separate assets for marketing LCP; filters are for legacy content or CMS uploads.

Return HTML + CSS.

Why this matters in 2026

Marketing drops bright stock photos into dark UIs; a one-line filter often beats manual retouching for every asset.

The logic

Lowering brightness first, then contrast, avoids crunchy clipping. Saturation trim keeps neon clothing from dominating the layout.

Accessibility & performance

filter applies on the GPU but still costs paint on large images; use img dimensions and avoid animating filter on scroll.