fix(frontend): force light mode for now (#11619)

## Changes 🏗️

We have the setup for light/dark mode support ( Tailwind + `next-themes`
), but not the capacity yet from contributions to make the app dark-mode
ready. First, we need to make it look good in light mode 😆

This disables `dark:` mode classes on the code, to prevent the app
looking oopsie when the user is seeing it with a browser with dark mode
preference:

### Before these changes

<img width="800" height="739" alt="Screenshot 2025-12-14 at 17 09 25"
src="https://github.com/user-attachments/assets/76333e03-930a-40b6-b91e-47ee01bf2c00"
/>

### After

<img width="800" height="722" alt="Screenshot 2025-12-14 at 16 55 46"
src="https://github.com/user-attachments/assets/34d85359-c68f-474c-8c66-2bebf28f923e"
/>

## Checklist 📋

### For code changes

- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
  - [x] Run the app on a browser with dark mode preference
  - [x] It still looks in light mode without broken styles

autogpt_platform/frontend/src/app/providers.tsx

@@ -1,36 +1,33 @@
 "use client";
 
-import { LaunchDarklyProvider } from "@/services/feature-flags/feature-flag-provider";
-import OnboardingProvider from "@/providers/onboarding/onboarding-provider";
+import { TooltipProvider } from "@/components/atoms/Tooltip/BaseTooltip";
+import { SentryUserTracker } from "@/components/monitor/SentryUserTracker";
 import { BackendAPIProvider } from "@/lib/autogpt-server-api/context";
 import { getQueryClient } from "@/lib/react-query/queryClient";
-import { QueryClientProvider } from "@tanstack/react-query";
-import {
-  ThemeProvider as NextThemesProvider,
-  ThemeProviderProps,
-} from "next-themes";
-import { NuqsAdapter } from "nuqs/adapters/next/app";
-import { TooltipProvider } from "@/components/atoms/Tooltip/BaseTooltip";
 import CredentialsProvider from "@/providers/agent-credentials/credentials-provider";
-import { SentryUserTracker } from "@/components/monitor/SentryUserTracker";
+import OnboardingProvider from "@/providers/onboarding/onboarding-provider";
+import { LaunchDarklyProvider } from "@/services/feature-flags/feature-flag-provider";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { ThemeProvider, ThemeProviderProps } from "next-themes";
+import { NuqsAdapter } from "nuqs/adapters/next/app";
 
 export function Providers({ children, ...props }: ThemeProviderProps) {
   const queryClient = getQueryClient();
   return (
     <QueryClientProvider client={queryClient}>
       <NuqsAdapter>
-        <NextThemesProvider {...props}>
-          <BackendAPIProvider>
-            <SentryUserTracker />
-            <CredentialsProvider>
-              <LaunchDarklyProvider>
-                <OnboardingProvider>
+        <BackendAPIProvider>
+          <SentryUserTracker />
+          <CredentialsProvider>
+            <LaunchDarklyProvider>
+              <OnboardingProvider>
+                <ThemeProvider forcedTheme="light" {...props}>
                   <TooltipProvider>{children}</TooltipProvider>
-                </OnboardingProvider>
-              </LaunchDarklyProvider>
-            </CredentialsProvider>
-          </BackendAPIProvider>
-        </NextThemesProvider>
+                </ThemeProvider>
+              </OnboardingProvider>
+            </LaunchDarklyProvider>
+          </CredentialsProvider>
+        </BackendAPIProvider>
       </NuqsAdapter>
     </QueryClientProvider>
   );

autogpt_platform/frontend/tailwind.config.ts

@@ -1,10 +1,10 @@
+import scrollbar from "tailwind-scrollbar";
 import type { Config } from "tailwindcss";
 import tailwindcssAnimate from "tailwindcss-animate";
-import scrollbar from "tailwind-scrollbar";
 import { colors } from "./src/components/styles/colors";
 
 const config = {
-  darkMode: ["class"],
+  darkMode: ["class", ".dark-mode"], // ignore dark: prefix classes for now until we fully support dark mode
   content: ["./src/**/*.{ts,tsx}"],
   prefix: "",
   theme: {