The mobile menu renders six service colours without a context provider

The homepage has a floating hamburger button fixed to the top-left corner on mobile. Tap it and a dropdown appears with six links — Software, Accessibility, Audio, Production, Musician, Notes. Each link has an icon coloured to match the service accent. Purple for software. Fuchsia for accessibility. Cyan for audio. Emerald for production. Orange for musician. Pink for notes. The MobileNav component stores six NavItem objects in a static array. Each item carries two hex values — a dark variant and a light variant. The dark values are the same -400 shades used across the rest of the site. The light values are the -600 shades that pass WCAG contrast on white backgrounds. When the component renders each link, it reads the current theme from the useTheme hook and picks the matching hex value inline — theme equals light means item.light, otherwise item.dark. That decision happens per icon, per render, with no context provider wrapping the tree. The useTheme hook watches the data-theme attribute on the document element through a MutationObserver. When the ThemeToggle flips the attribute, the observer fires, the hook re-renders the MobileNav, and every icon colour updates simultaneously. The menu itself is two layers. A fixed backdrop with fifty percent black opacity covers the viewport and closes the menu on tap. The dropdown sits absolute below the button with a glass background at ninety-five percent opacity, a backdrop blur, and a rounded border. The button is forty-four pixels square — above the WCAG minimum touch target. The aria-expanded attribute flips with the open state. The aria-label switches between Open menu and Close menu. The icon swaps from a hamburger to an X mark. The whole component is seventy-four lines including the nav items array. Six services, two colour modes, one hook call, zero context providers.