Update theme colors

src/app/globals.css

@@ -1,3 +1,4 @@
+/* globals.css */
 @import "tailwindcss";
 @import "tw-animate-css";
 
@@ -45,7 +46,7 @@
 
 :root {
   --radius: 0.625rem;
-  /* Light Mode Palette */
+  /* Light Mode Palette - Retained similar modern, soft feel */
   --background: oklch(0.99 0 0); /* Very light off-white */
   --foreground: oklch(0.1 0 0); /* Very dark gray */
   --card: oklch(0.99 0 0);
@@ -84,42 +85,42 @@
 }
 
 .dark {
-  /* Dark Mode Palette */
+  /* Dark Mode Palette - Modernized */
-  --background: oklch(0.12 0 0); /* Very dark charcoal */
+  --background: oklch(0.18 0 0); /* Slightly lighter dark charcoal */
-  --foreground: oklch(0.92 0 0); /* Light gray */
+  --foreground: oklch(0.88 0 0); /* Soft white/light gray */
-  --card: oklch(0.18 0 0); /* Slightly lighter dark for cards */
+  --card: oklch(0.22 0 0); /* Slightly lighter for cards than background */
-  --card-foreground: oklch(0.92 0 0);
+  --card-foreground: oklch(0.88 0 0);
-  --popover: oklch(0.18 0 0);
+  --popover: oklch(0.22 0 0);
-  --popover-foreground: oklch(0.92 0 0);
+  --popover-foreground: oklch(0.88 0 0);
-  --primary: oklch(0.7 0.15 260); /* Brighter, more vibrant indigo for dark mode */
+  --primary: oklch(0.65 0.18 260); /* Brighter, more vibrant indigo */
-  --primary-foreground: oklch(0.15 0 0); /* Dark gray for text on primary */
+  --primary-foreground: oklch(0.18 0 0); /* Darker text on primary */
-  --secondary: oklch(0.22 0 0); /* Darker gray */
+  --secondary: oklch(0.28 0 0); /* Medium dark gray */
-  --secondary-foreground: oklch(0.85 0 0); /* Lighter gray */
+  --secondary-foreground: oklch(0.75 0 0); /* Lighter gray */
-  --muted: oklch(0.22 0 0);
+  --muted: oklch(0.28 0 0);
-  --muted-foreground: oklch(0.6 0 0); /* Mid-gray */
+  --muted-foreground: oklch(0.55 0 0); /* Mid-gray */
-  --accent: oklch(0.22 0.03 260); /* Subtle dark hint of primary */
+  --accent: oklch(0.28 0.04 260); /* Subtle dark hint of primary */
-  --accent-foreground: oklch(0.8 0.05 260); /* Lighter desaturated primary */
+  --accent-foreground: oklch(0.7 0.06 260); /* Lighter desaturated primary */
-  --destructive: oklch(0.7 0.15 20); /* Brighter red for dark mode */
+  --destructive: oklch(0.65 0.16 20); /* Brighter red */
-  --border: oklch(0.25 0 0); /* Medium dark gray */
+  --border: oklch(0.32 0 0); /* Medium dark gray */
-  --input: oklch(0.2 0 0); /* Darker than border */
+  --input: oklch(0.28 0 0); /* Darker than border */
-  --ring: oklch(0.4 0 0); /* Mid-dark gray */
+  --ring: oklch(0.5 0 0); /* Mid-dark gray */
 
-  /* Chart Colors (Dark Mode) - Brighter and distinct */
+  /* Chart Colors (Dark Mode) - Brighter and distinct for visibility */
-  --chart-1: oklch(0.7 0.18 270); /* Brighter purple-blue */
+  --chart-1: oklch(0.75 0.2 270); /* Brighter purple-blue */
-  --chart-2: oklch(0.75 0.15 180); /* Brighter teal */
+  --chart-2: oklch(0.8 0.18 180); /* Brighter teal */
-  --chart-3: oklch(0.8 0.12 90); /* Brighter muted green-yellow */
+  --chart-3: oklch(0.85 0.15 90); /* Brighter muted green-yellow */
-  --chart-4: oklch(0.75 0.16 30); /* Brighter orange-brown */
+  --chart-4: oklch(0.8 0.18 30); /* Brighter orange-brown */
-  --chart-5: oklch(0.85 0.1 330); /* Brighter muted pink */
+  --chart-5: oklch(0.9 0.12 330); /* Brighter muted pink */
 
   /* Sidebar Colors (Dark Mode) */
-  --sidebar: oklch(0.18 0 0); /* Slightly lighter dark for sidebar */
+  --sidebar: oklch(0.22 0 0); /* Slightly lighter dark for sidebar */
-  --sidebar-foreground: oklch(0.92 0 0);
+  --sidebar-foreground: oklch(0.88 0 0);
-  --sidebar-primary: oklch(0.7 0.15 260);
+  --sidebar-primary: oklch(0.65 0.18 260);
-  --sidebar-primary-foreground: oklch(0.15 0 0);
+  --sidebar-primary-foreground: oklch(0.18 0 0);
-  --sidebar-accent: oklch(0.22 0.03 260);
+  --sidebar-accent: oklch(0.28 0.04 260);
-  --sidebar-accent-foreground: oklch(0.8 0.05 260);
+  --sidebar-accent-foreground: oklch(0.7 0.06 260);
-  --sidebar-border: oklch(0.25 0 0);
+  --sidebar-border: oklch(0.32 0 0);
-  --sidebar-ring: oklch(0.4 0 0);
+  --sidebar-ring: oklch(0.5 0 0);
 }
 
 @layer base {

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">