ln-ashlar ln-ashlar Dark Header Scope
Demos Hub

Scoped Theme Islands

Demonstrating nested and independent data-mode (polarity) and data-theme (palette) scopes at arbitrary DOM depths.

All Demos

1. Root Light Canvas (Default)

Root Scope

Light Mode Form

Light Status Indicators

Semantic status classes cascade local colors without freezing root variables:

  • Active Online
  • Maintenance Pending
  • Cluster Alert

2. Scoped Dark Island Container (data-mode="dark")

Dark Island Scope

Background, foreground, borders, shadows, and button surfaces are completely dark-themed via localized CSS custom properties.

Dark Island Card

3. Inverse Light Island (Nested in Dark)

data-mode="light"

This nested card flips cleanly back to the light palette within its dark parent container.

3. Scoped Brand Palette Islands (data-theme)

Brand Palettes

Brand themes rebind --brand-primary and derivative accent tokens on isolated subtrees without affecting parent polarity:

Ocean

Teal

Oceanic teal palette (190 80% 35%).

Sunset

Coral

Warm coral/orange palette (10 80% 50%).

Midnight

Violet Dark

Deep purple palette paired with dark mode.

Glass

Electric

Electric blue primary with custom 24% tint mix.