Themes & Composition (DOM)

Complete theme compositions — the same visuals as the web component version, driven by plain CSS on .alap_${id}.

All CSS on this page applies equally to popover mode — the menu renders as the same .alapelem element whether using DOM or popover.

Dark Theme

coffee

.alap_th-dark {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  border-radius: 10px;
}
.alap_th-dark a       { color: #e2e8f0; }
.alap_th-dark a:hover { background: #334155; color: #93c5fd; }

Neon

bridges

.alap_th-neon {
  background: #0f172a;
  border-color: #1e3a5f;
  box-shadow: 0 0 24px rgba(56, 189, 248, 0.15);
  border-radius: 10px;
}
.alap_th-neon a {
  color: #38bdf8;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.6);
}
.alap_th-neon a:hover {
  background: #1e293b;
  color: #7dd3fc;
}

Glassmorphism

Frosted glass menu: coffee spots

backdrop-filter works on any element in the light DOM.

.alap_th-glass {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px) saturate(180%);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border-radius: 16px;
}
.alap_th-glass a       { color: #ffffff; }
.alap_th-glass a:hover { background: rgba(255, 255, 255, 0.25); color: #ffffff; }

Brutalist

cars

.alap_th-brutal {
  background: #ffffff;
  border: 2px solid #000000;
  border-radius: 0;
  box-shadow: 6px 6px 0 #000000;
}
.alap_th-brutal a {
  color: #000000;
  font-weight: 600;
  border-bottom: 1px solid #e5e7eb;
}
.alap_th-brutal a:hover {
  background: #fbbf24;
  color: #000000;
}

Warm / Editorial

coffee

.alap_th-warm {
  background: #fffbeb;
  border-color: #d97706;
  box-shadow: 0 4px 16px rgba(217, 119, 6, 0.2);
  border-radius: 8px;
}
.alap_th-warm a       { color: #92400e; }
.alap_th-warm a:hover { background: #fef3c7; color: #b45309; }