[P2] Audit: Theme toggle and preference controls are not prominent enough

[baixiangcpp]

Imported from the byteflow.tools deep audit on 2026-06-22.

Problem: the site has a strong dark UI and appears to support theme preference, but theme switching and preference controls are not prominent enough for all users. Some users need light mode, high contrast, or clearer persistence controls.

Affected components:

• Header theme control
• Local storage preferences
• Tool pages
• Install/PWA context

Reproduction steps:

1. Open the site in a fresh session.
2. Locate the theme toggle.
3. Switch theme and reload.
4. Test tool pages, category pages, and mobile layouts.
5. Check contrast and focus visibility in both themes.

Expected behavior: users should be able to easily find and switch theme, and the preference should persist locally.

Actual behavior: theme controls exist but may not be obvious, especially in dense tool headers.

Impact: readability and accessibility issues for users who prefer light mode or need higher contrast.

Proposed fix:

• Make the theme toggle more discoverable in the header or settings menu.
• Add labels/tooltips for icon-only theme controls.
• Persist preference locally without storing tool data.
• Validate contrast and focus states in both themes.

Acceptance criteria:

• Theme toggle is findable on desktop and mobile.
• Preference persists after reload.
• Both themes meet contrast requirements.
• Icon-only controls have accessible labels.

[baixiangcpp]

Closed as completed by the canonical BF audit backlog work. This older non-BF audit issue duplicates work now merged through PRs #209-#219, with the BF issues closed and guard/test coverage in place. The remaining non-duplicate follow-up is #7, which stays open because the upstream Next/PostCSS advisory is not fixed yet.

[baixiangcpp]

Reopening after acceptance review on 2026-06-24. The theme toggle has local persistence, accessible text, and contrast-token guards, but this older audit issue is not fully satisfied: the mobile navigation drawer does not expose theme controls and the deferred header placeholder is icon-only until hydration, so the control is not consistently discoverable on desktop and mobile as required. Keep open until theme preference controls are visible/findable across header/mobile navigation and tests cover the acceptance criteria.