Update app.py

app.py

@@ -58,19 +58,20 @@ examples = [
 ]
 
 css = """
+/* General Styles */
 #col-container {
     margin: 0 auto;
     max-width: 640px;
     font-family: 'Arial', sans-serif;
     color: #333;
-    background-color: #f7f7f7;
+    background-color: #f0f4f8; /* Light gray background for better contrast */
     border-radius: 15px;
     padding: 20px;
 }
 
 #header {
     text-align: center;
-    color: #1f5f99;
+    color: #1f5f99; /* Veshup Blue */
 }
 
 #title {
@@ -108,11 +109,40 @@ css = """
     font-size: 16px;
     line-height: 1.6;
 }
+
+/* Dark Mode adjustments for browser default theme */
+@media (prefers-color-scheme: dark) {
+    #col-container {
+        background-color: #2e2e2e; /* Dark background for dark mode */
+        color: #e0e0e0; /* Light text for dark mode */
+    }
+
+    #header {
+        color: #a5c4f6; /* Lighter blue for dark mode */
+    }
+
+    .gradio-button {
+        background-color: #4f89b0;
+    }
+
+    .gradio-button:hover {
+        background-color: #3a6a8b;
+    }
+
+    .gradio-slider,
+    .gradio-checkbox {
+        background-color: #444; /* Darker elements in dark mode */
+    }
+
+    .gradio-markdown {
+        color: #d1d1d1; /* Lighter text for markdown */
+    }
+}
 """
 
 with gr.Blocks(css=css) as demo:
     with gr.Column(elem_id="col-container"):
-        gr.Markdown("<div id='header'><h1 id='title'>Emmy: Veshup's Image Generation AI</h1><p id='subtitle'>Create stunning images with just a prompt. Powered by cutting-edge AI technology.</p></div>")
+        gr.Markdown("<div id='header'><h1 id='title'>Veginator: Veshup's Image Generation AI</h1><p id='subtitle'>Create stunning images with just a prompt. Powered by cutting-edge AI technology.</p></div>")
 
         with gr.Row():
             prompt = gr.Text(