# Theme Toggle Top-Bar Relocation Design ## Context The application currently renders the light/dark toggle as a floating fixed button from `views/partials/theme.php`. The requested behavior is to place this control in the top bar, positioned to the left of the settings button when settings is present, while keeping the toggle visible and usable across all views (including `login` and `setup`). ## Goals - Replace the floating theme toggle with a top-bar-integrated control. - Keep theme behavior unchanged (cookie persistence, icon/label updates, immediate visual switch). - Ensure the toggle is visible and reachable in every application view. - Preserve existing visual patterns (Tailwind + Bootstrap Icons, current card/header language). Coverage rule: - Every user-facing template in `views/*.php` must render `views/partials/topbar-controls.php` directly or through a shared header partial. ## Non-Goals - Redesigning page layouts beyond what is needed to provide a consistent top bar. - Changing theme color tokens or dark/light palette values. - Altering authentication or route behavior. ## Proposed Approach ### 1) Shared top-bar controls partial Create a reusable partial dedicated to top-bar action controls. This partial will render: - Theme toggle button (always present). - Settings link (conditionally present). Ordering rule: - Theme toggle appears immediately to the left of settings when settings is shown. This keeps the placement contract explicit and reusable across all pages. ### Interface contract - Partial path: `views/partials/topbar-controls.php`. - Include API: - `$showSettings` (bool): whether to render settings link in this header; default `false` inside partial. - `$settingsUrl` (string): target URL when settings is rendered; default is applied inside partial as `url('/settings')` when caller does not set it. - Required markup contract inside the partial: - Toggle button id: `themeToggle`. - Toggle icon id: `themeToggleIcon`. - Server-rendered baseline attributes: - `aria-label="Switch to dark mode"` - `title="Switch to dark mode"` - `aria-pressed="false"` - icon class starts at `bi bi-moon-stars-fill` - Toggle appears first in the controls row; settings link appears second when enabled. - Script contract: - `views/partials/theme.php` body script binds to `#themeToggle` and `#themeToggleIcon`. - If either element is missing, script exits without errors. ### Responsibility split - `views/partials/topbar-controls.php` owns toggle markup, baseline attributes, ordering, optional settings link, and `