Background customization: add “Background intensity” slider (saturation/opacity) for extra comfort

[zealsprince]

Context

We already have background theming work in progress (#10 #12 #16 #17 #18 #19 #20). The user feedback repeatedly mentions the current background being too intense.

Presets help, but some users will still want fine control. A simple, optional intensity control can preserve the playful vibe while improving comfort/readability.

Request

Add an Intensity control to the background settings panel that lets users tone down the background without changing the selected theme.

UX

• In the background settings panel, add a labeled slider:
  • Label: Background intensity
  • Range: 0% (calm) → 100% (full)
  • Default: 100% (or a product-chosen default like 80% if we want calmer baseline)
• Provide a small helper text: “Lower intensity reduces saturation/contrast of the background only.”

Technical approach (suggested)

Implement intensity as an overlay or filter using CSS variables so it works across both solids and gradients:

• Option A (recommended): Add a neutral overlay layer that increases with lower intensity.
  • Use a pseudo-element on body/root that sits above background but below content.
  • Control via CSS var: --bg-dimmer-opacity.
  • At 100% intensity -> opacity 0
  • At 0% intensity -> opacity ~0.6–0.8 (tune for readability)
• Option B: Apply filter: saturate() to a background layer only (avoid applying to content).

Persistence

• Persist intensity value in localStorage under a stable key, e.g.:
  • roflbox.bgIntensity = "0.8" (0–1) or "80" (0–100)
• On load:
  • if invalid/missing -> default

Accessibility

• Slider is keyboard operable.
• Provide aria-label (e.g., Background intensity).
• Ensure sufficient contrast remains for UI elements.

Acceptance Criteria

• Users can lower intensity and see the background become less visually aggressive.
• Intensity applies immediately and does not affect foreground content styling.
• Choice persists across reload.
• Works with all 6 curated themes from Decide + document curated background preset list (names, thumbnails, contrast checks) for theme switcher #18.
• Respects prefers-reduced-motion (no required animation).

Related

• Rework ROFLBox background: simplify gradient + improve readability (optional subtle animated matrix effect) #10 Add user-selectable background themes (preset gradients + randomize) with saved preference #12 Consolidate background work: define theme tokens + ensure #10 default matches a #12 preset #16 Background switcher UX polish: unobtrusive control + solid colors + accessibility + persistence #17 Decide + document curated background preset list (names, thumbnails, contrast checks) for theme switcher #18 Background theme switcher: implement “Randomize” behavior rules + persistence edge cases #19 Background settings panel: add small on-page preview + “Reset to default” CTA #20

Test Plan

• Manual: change intensity, refresh, verify persistence.
• Manual: switch themes; intensity stays the same.
• Manual: set invalid localStorage value; app falls back to default safely.