Broken Dark Mode in Vibecoded Apps

Toggle dark mode on and visit every page in the app. Look for white or light-colored cards, inputs, and containers that did not switch themes. Check text readability — dark text on a dark background is invisible, and light text on a white background within a dark page is equally problematic.

Inspect third-party components, embedded content, and dynamic elements. Modals, tooltips, dropdowns, and date pickers are frequently missed in theme implementations because they are rendered in portals outside the main component tree. Also check status indicators, badges, and charts that may use hardcoded colors rather than theme tokens.

Switch between light and dark mode on every page. Some pages may work in one mode but not the other. Also test the transition — toggle rapidly and check for flash-of-wrong-theme (FOWT) where the page briefly shows the wrong mode before applying the correct one.

Test dark mode with different system settings. Set your OS to dark mode and see if the app respects the system preference. Switch the system preference while the app is open and verify it adapts without requiring a page reload. AI-generated theme logic often ignores the prefers-color-scheme media query.

Replace all hardcoded color values with CSS custom properties or theme tokens. Every color in the app should reference a variable that changes based on the active theme. This includes colors in inline styles, SVG fills, box shadows, and border colors that AI tools often leave as literal hex values.

Use a theme provider that applies the theme class to the document root and stores the preference in localStorage. Load the stored preference before the first render to prevent flash-of-wrong-theme. For images and logos, provide dark mode variants or apply CSS filters to adapt them to the dark background.