Added a dark theme to the Chakra UI configuration, updated the `StatC…

…ard` component to use the new colors for the cards, and optimized the sizes of the cards and text for better readability.

Prompt: Add colours for cards and dark thene. also optimize sizes of it

src/main.jsx

@@ -11,12 +11,18 @@ const colors = {
   },
 };
 
-const theme = extendTheme({ colors });
+const theme = extendTheme({
+  colors,
+  config: {
+    initialColorMode: "dark",
+    useSystemColorMode: false,
+  },
+});
 
 ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
     <ChakraProvider theme={theme}>
       <App />
     </ChakraProvider>
-  </React.StrictMode>
+  </React.StrictMode>,
 );

src/pages/Index.jsx

@@ -4,13 +4,13 @@ import { FaChartLine, FaDollarSign, FaUsers, FaShoppingCart } from "react-icons/
 
 const Index = () => {
   return (
-    <Container maxW="container.xl" py={10}>
+    <Container maxW="container.xl" py={5}>
       <VStack spacing={10}>
-        <Text fontSize="4xl" fontWeight="bold">
+        <Text fontSize="3xl" fontWeight="bold">
           Business Dashboard
         </Text>
 
-        <SimpleGrid columns={{ base: 1, md: 2, lg: 4 }} spacing={10} w="full">
+        <SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} spacing={5} w="full">
           <StatCard title="Sales" value="1,200" change="+5%" icon={<FaShoppingCart />} color="green.500" />
           <StatCard title="Revenue" value="$34,000" change="+10%" icon={<FaDollarSign />} color="blue.500" />
           <StatCard title="Customers" value="300" change="-2%" icon={<FaUsers />} color="red.500" />
@@ -29,9 +29,9 @@ const Index = () => {
 
 const StatCard = ({ title, value, change, icon, color }) => {
   return (
-    <Box p={5} shadow="md" borderWidth="1px" borderRadius="md" w="full">
+    <Box p={4} shadow="md" borderWidth="1px" borderRadius="md" w="full" bg={color}>
       <HStack spacing={4}>
-        <IconButton aria-label={title} icon={icon} size="lg" colorScheme={color} isRound />
+        <IconButton aria-label={title} icon={icon} size="md" colorScheme={color} isRound />
         <VStack align="start">
           <Stat>
             <StatLabel>{title}</StatLabel>