Lossless Changelog
component

Vibrant Mode Fixed: Dark-Based with Neon Effects

Corrected vibrant mode implementation to be dark-based (not light-based) with multi-color gradients, glassmorphic surfaces, and neon borders. Light and vibrant modes now visually distinct.

Michael StatonMusic Editoraugmented with Pi on Claude Sonnet 4.5

Vibrant Mode Fixed: Dark-Based with Neon Effects

The Problem

Initial scaffold implemented vibrant mode incorrectly — only overriding two effect tokens (--fx-glow-opacity and --fx-shadow-opacity) while leaving surface/text/border undefined. This caused vibrant mode to inherit light mode's white background, making light and vibrant visually indistinguishable.

User feedback: "Current state: light and vibrant mode are indistinguishable in terms of tokens, OR the toggler doesn't work."

The Fix

Vibrant mode is now dark-based (like dark mode, not light mode) with comprehensive token overrides following the fullstack-vc reference implementation.

New Vibrant Mode Characteristics

Surface & Text:

  • Dark background (--color__black)

  • Glassmorphic surface: color-mix(in srgb, var(--color__violet-deep) 20%, var(--color__slate-950))

  • White text on dark background

  • Neon bright borders (--color__blue-azure)

Effect Tokens:

  • Glow opacity: 0.55 (vs 0.22 in dark, 0.06 in light)

  • Glow spread: 48px (vs 24px in dark, 8px in light)

  • Multi-color headline gradient: lime → cyan → blue → violet (4 stops)

  • Glassmorphic card shadows using color-mix() with transparency

New Named Tokens Added:

  • --color__cyan-bright: #06b6d4

  • --color__violet-deep: #7c3aed

  • --color__lime-terminal: #84cc16

Brand Kit Page Enhancements

Added visual verification:

  • Mode comparison demo showing background/surface/border swatches

  • Live headline gradient example that changes per mode

  • Effect token value display that updates on mode toggle

  • Explicit note that vibrant should be visibly different from light

Verification

Run pnpm dev and toggle through modes:

  • Light: White background, subtle gray borders, minimal shadows

  • Dark: Very dark blue background, moderate glows, two-color gradient

  • Vibrant: Pure black background, neon borders, multi-color gradient, intense glows

Light and vibrant are now obviously different at first glance.

Documentation Updated

Updated in parallel:

  1. astro-knots skill (~/.pi/agent/skills/astro-knots/references/playbooks/new-site-setup.md):

    • Added §9a "Vibrant Mode Implementation (Critical)"

    • Warning about the inheritance error

    • Code example with all required tokens

    • Verification checklist

  2. Quickstart guide (context-v/prompts/New-Site-Quickstart-Guide.md):

    • Updated §6.2 with vibrant mode examples

    • Added §6.6 vibrant verification checklist

    • Emphasized dark-based requirement

    • Referenced fullstack-vc as canonical implementation

Reference

  • Canonical vibrant implementation: sites/fullstack-vc/src/styles/theme.css lines 90-130

  • Blueprint: context-v/blueprints/Maintain-Themes-Mode-Across-CSS-Tailwind.md

  • Commit: 8bafaf2 (reach-edu-hub)

  • Commit: 732cf4b (astro-knots monorepo)

  • Commit: da030b1 (lossless-skills)