Force dark theme on map sidebar and mobile controls

The sidebar and mobile floating controls overlay the dark map tiles
but inherited light theme colors, making dropdowns, inputs, and
menus invisible (white-on-white). Adding data-theme="dark" forces
all daisyUI components within these containers to use dark variants
regardless of the page's theme setting.
This commit is contained in:
Graham McIntire 2026-04-11 15:23:25 -05:00
parent 0b1e411110
commit 5a1ac63f56

View file

@ -325,7 +325,7 @@ defmodule MicrowavepropWeb.MapLive do
id="map-controls"
class="md:hidden absolute top-2 left-12 z-[1000] flex flex-col gap-2 max-w-[calc(100vw-4rem)]"
>
<div class="bg-base-100 shadow rounded-box border border-base-300 p-2 flex flex-col gap-2">
<div data-theme="dark" class="bg-neutral text-neutral-content shadow rounded-box border border-base-300 p-2 flex flex-col gap-2">
<div class="font-bold text-sm leading-tight px-1 flex items-center justify-between gap-2">
<div class="min-w-0">
<span>NTMS</span>
@ -461,6 +461,7 @@ defmodule MicrowavepropWeb.MapLive do
<%!-- Desktop right sidebar --%>
<div
id="sidebar"
data-theme="dark"
class="hidden md:flex flex-col w-56 shrink-0 h-full bg-neutral text-neutral-content border-l border-base-300 overflow-hidden"
>
<%!-- Sidebar controls --%>