Update app.py

app.py

@@ -27,60 +27,82 @@ def arithmetic(num1, num2, operation):
     return res[0]
 
 custom_css = """
-    /* Set the overall background to a dark color */
-    .gradio-container {
-        background-color: #121212;
-        color: #ffffff;
+        /* Define color variables for light mode */
+    :root {
+        --background-color-light: #ffffff;
+        --text-color-light: #000000;
+        --input-background-light: #f0f0f0;
+        --input-text-light: #000000;
+        --button-background-light: #4CAF50;
+        --button-text-light: #ffffff;
     }
     
-    /* Style the title and description text */
-    .gradio-container h1, .gradio-container h2, .gradio-container p {
-        color: #ffffff;
+    /* Define color variables for dark mode */
+    @media (prefers-color-scheme: dark) {
+        :root {
+            --background-color-dark: #121212;
+            --text-color-dark: #ffffff;
+            --input-background-dark: #1e1e1e;
+            --input-text-dark: #ffffff;
+            --button-background-dark: #2a5298;
+            --button-text-dark: #ffffff;
+        }
     }
     
-    /* Style the input fields with a dark background and blue border */
+    /* Apply background and text colors based on the current mode */
+    body {
+        background-color: var(--background-color-light);
+        color: var(--text-color-light);
+    }
+    
+    @media (prefers-color-scheme: dark) {
+        body {
+            background-color: var(--background-color-dark);
+            color: var(--text-color-dark);
+        }
+    }
+    
+    /* Style the input fields */
     input, textarea {
-        background-color: #1e1e1e;
-        border: 2px solid #2a5298;
-        color: #ffffff;
+        background-color: var(--input-background-light);
+        color: var(--input-text-light);
+        border: 1px solid #ccc;
         padding: 10px;
         border-radius: 5px;
         width: 100%;
         box-sizing: border-box;
     }
     
-    /* Change border color on focus */
-    input:focus, textarea:focus {
-        border-color: #1e3c72;
-        outline: none;
+    @media (prefers-color-scheme: dark) {
+        input, textarea {
+            background-color: var(--input-background-dark);
+            color: var(--input-text-dark);
+            border: 1px solid #444;
+        }
     }
     
-    /* Style the buttons with a gradient blue background */
+    /* Style the buttons */
     button {
-        background: linear-gradient(to right, #1e3c72, #2a5298);
-        color: #ffffff;
+        background-color: var(--button-background-light);
+        color: var(--button-text-light);
         border: none;
         padding: 10px 20px;
         border-radius: 5px;
         cursor: pointer;
-        transition: background 0.3s ease;
+        transition: background-color 0.3s ease;
     }
     
-    /* Change button background on hover */
-    button:hover {
-        background: linear-gradient(to right, #2a5298, #1e3c72);
+    @media (prefers-color-scheme: dark) {
+        button {
+            background-color: var(--button-background-dark);
+            color: var(--button-text-dark);
+        }
+        button:hover {
+            background-color: #1e3c72;
+        }
     }
-    
-    /* Style the labels */
-    label {
-        color: #ffffff;
-        font-weight: bold;
-        margin-top: 10px;
-        display: block;
-    }
-
-    /* Hide footer display */
-    footer {display: none !important;}
+        /* Hide footer display */
+        footer {display: none !important;}
 """
 with gr.Blocks(
     title="R-Powered Calculator",