change color for darkmode

app.py

@@ -75,16 +75,16 @@ def detect_ai_audio(audio_file):
     except Exception as e:
         return f"<div>Error processing audio: {str(e)}</div>"
 
-# 심플하고 깔끔한 CSS
+# 다크모드 호환 CSS
 custom_css = """
-.gradio-container { background: #f5f5f5 !important; min-height: 100vh; }
-.main-container { background: #ffffff !important; border-radius: 15px !important; box-shadow: 0 8px 20px rgba(0,0,0,0.1) !important; margin: 20px auto !important; padding: 30px !important; max-width: 800px; }
-h1 { text-align: center !important; font-size: 2.5em !important; font-weight: 700 !important; margin-bottom: 15px !important; color: #333 !important; }
-.gradio-markdown p { text-align: center !important; font-size: 1.1em !important; color: #555 !important; margin-bottom: 20px !important; }
-.upload-container { background: #f0f0f0 !important; border-radius: 10px !important; padding: 15px !important; border: 1px solid #ccc !important; margin-bottom: 20px !important; }
-.output-container { background: #fafafa !important; border-radius: 10px !important; padding: 15px !important; border: 1px solid #ccc !important; min-height: 150px !important; }
-.gr-button { background: #667eea !important; color: #fff !important; border: none !important; border-radius: 20px !important; padding: 10px 25px !important; font-weight: 600 !important; transition: all 0.2s ease !important; }
-.gr-button:hover { background: #5563c1 !important; transform: translateY(-2px) !important; }
+.gradio-container { min-height: 100vh; }
+.main-container { border-radius: 15px !important; margin: 20px auto !important; padding: 30px !important; max-width: 800px; }
+h1 { text-align: center !important; font-size: 2.5em !important; font-weight: 700 !important; margin-bottom: 15px !important; }
+.gradio-markdown p { text-align: center !important; font-size: 1.1em !important; margin-bottom: 20px !important; }
+.upload-container { border-radius: 10px !important; padding: 15px !important; margin-bottom: 20px !important; }
+.output-container { border-radius: 10px !important; padding: 15px !important; min-height: 150px !important; }
+.gr-button { border-radius: 20px !important; padding: 10px 25px !important; font-weight: 600 !important; transition: all 0.2s ease !important; }
+.gr-button:hover { transform: translateY(-2px) !important; }
 @media (max-width: 768px) {
     h1 { font-size: 2em !important; }
     .main-container { margin: 10px !important; padding: 20px !important; }
@@ -127,4 +127,4 @@ demo = gr.Interface(
 
 
 if __name__ == "__main__":
-    demo.launch(server_name="0.0.0.0", server_port=7860,  show_api=False, show_error=True)
+    demo.launch(server_name="0.0.0.0", server_port=7860,  show_api=False, show_error=True)