(WEB_PORTAL) Rolling Out Dark Mode Everywhere and Fixing Next.js Image Optimization Warnings

Overview

Once the core feature implementation was largely finished, we turned to polishing the overall usability of the UI. We applied dark mode consistently across every page and, at the same time, resolved two image-related warnings that had been lingering in the console during development.

Key Implementation Points

1. Applying Dark Mode Everywhere

Using Tailwind CSS's dark mode class syntax, instead of specifying separate light/dark colors per component, we unified every component around a "light by default, with dark-mode classes layered on top" approach. We also decided at this point not to build a separate dark mode toggle button, and instead to simply follow the user's OS/browser system setting.

2. Excluding Static Files from the Routing Middleware

While adding a logo image to the login page and others, we discovered that the routing middleware responsible for checking authentication was also catching requests for static files like images and icons, subjecting them to the same auth check. We fixed this by adding a rule to the middleware's matcher pattern that excludes static file extensions.

3. Fixing the LCP (Largest Contentful Paint) Warning

Next.js's image component was warning that the largest, earliest-rendered image on the page (like the logo) had "no priority loading hint." We fixed this by explicitly setting the priority loading option on that image, so it would load first as soon as the page opened.

4. Fixing the Image Aspect Ratio Warning

For images with fixed width/height values, we were getting a warning that the specified dimensions didn't match the actual source aspect ratio. We fixed this by setting width and height to 0 and specifying the actual size via CSS instead, so the browser could reference the original aspect ratio directly.

Retrospective

• We confirmed that most warnings a framework prints to the console are signals of a real performance issue down the road. Rather than ignoring them just because the screen isn't visibly broken, tracking down and eliminating each root cause early on reduced our maintenance burden later.
• For style work that spans the entire UI, like dark mode, tackling it all at once turned out to be much easier for maintaining color consistency than doing it piecemeal alongside feature work.