Enforced the theme on the main page

src/components/AppContent.tsx

@@ -21,7 +21,8 @@ const AppContent: React.FC = () => {
 
   // Display a loading indicator while AuthContext is determining authentication status
   if (loading) {
-      return <div className="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">Loading Authentication...</div>;
+      // Changed this line to use bg-background
+      return <div className="flex items-center justify-center min-h-screen bg-background text-foreground">Loading Authentication...</div>;
   }
 
   // Once loading is false, if no user is authenticated, display the LoginPage
@@ -32,7 +33,8 @@ const AppContent: React.FC = () => {
   // If a user is authenticated but lacks the required permission, display an access denied message
   if (user && !hasPermission(UserRoles.MOD)) {
       return (
-          <div className="min-h-screen flex flex-col items-center justify-center bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 font-sans p-6">
+          // Changed this line to use bg-background
+          <div className="min-h-screen flex flex-col items-center justify-center bg-background text-foreground font-sans p-6">
               <h2 className="text-xl font-bold text-red-500 mb-4">Access Denied</h2>
               <p className="text-lg text-center mb-6">
                   You do not have sufficient permissions to view this page. Your role: {user.role}. Required: {UserRoles.MOD}.
@@ -44,7 +46,8 @@ const AppContent: React.FC = () => {
 
   // If loading is false, and we have a user with MOD permission and a token, render the main app content
   return (
-      <div className="min-h-screen bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 font-sans">
+      // Changed this line to use bg-background
+      <div className="min-h-screen bg-background text-foreground font-sans">
           {/* Header is now in layout.tsx */}
 
           <main className="p-6">