Update app.py

app.py

@@ -211,12 +211,17 @@ def respond(
 def create_ui():
     try:
         css = """
+        body, .gradio-container {
+            background-color: #f8f9fa !important;
+            color: #333333 !important;
+        }
         footer {visibility: hidden;}
         .output-group {
-            border: 1px solid #ddd;
+            border: 1px solid #dee2e6;
             border-radius: 5px;
             padding: 10px;
             margin-bottom: 20px;
+            background-color: #ffffff;
         }
         .scroll-lock {
             overflow-y: auto !important;
@@ -236,6 +241,8 @@ def create_ui():
             white-space: pre !important;
             word-wrap: normal !important;
             height: 100% !important;
+            background-color: #f8f9fa !important;
+            border: 1px solid #dee2e6 !important;
         }
         .code-box > div {
             min-width: 100% !important;
@@ -245,13 +252,13 @@ def create_ui():
             overflow-wrap: normal !important;
         }
         .tab-nav {
-            background-color: #2c3e50;
+            background-color: #e9ecef;
             border-radius: 5px 5px 0 0;
             overflow: hidden;
         }
         .tab-nav button {
-            color: #ecf0f1 !important;
-            background-color: #34495e;
+            color: #495057 !important;
+            background-color: #e9ecef;
             border: none;
             padding: 10px 20px;
             margin: 0;
@@ -260,50 +267,53 @@ def create_ui():
             font-weight: bold;
         }
         .tab-nav button:hover {
-            background-color: #2980b9;
+            background-color: #dee2e6;
         }
         .tab-nav button.selected {
-            color: #2c3e50 !important;
-            background-color: #ecf0f1;
+            color: #212529 !important;
+            background-color: #ffffff;
         }
         input[type="text"], textarea {
-            color: #2c3e50 !important;
-            background-color: #ecf0f1 !important;
+            color: #495057 !important;
+            background-color: #ffffff !important;
+            border: 1px solid #ced4da !important;
         }
         
         /* AI 코딩 탭의 Chatbot 스타일 수정 */
         .chatbot, .chatbot *, .wrap, .wrap * {
-            color: #000000 !important;
+            color: #212529 !important;
+            background-color: #ffffff !important;
         }
         .chatbot .message, .chatbot .user-message, .chatbot .bot-message {
-            color: #000000 !important;
+            color: #212529 !important;
             padding: 10px 15px;
             margin: 5px 0;
-            border-radius: 0;
+            border-radius: 5px;
+            background-color: #f8f9fa !important;
         }
         .chatbot .user-message {
-            border-left: 4px solid #4caf50 !important;
+            border-left: 4px solid #28a745 !important;
         }
         .chatbot .bot-message {
-            border-left: 4px solid #2196f3 !important;
+            border-left: 4px solid #007bff !important;
         }
         .chatbot pre {
-            background-color: #f5f5f5 !important;
-            border: 1px solid #ddd !important;
+            background-color: #f1f3f5 !important;
+            border: 1px solid #dee2e6 !important;
             border-radius: 4px;
             padding: 10px;
             overflow-x: auto;
-            color: #000000 !important;
+            color: #212529 !important;
         }
         .chatbot code {
-            background-color: #f0f0f0 !important;
+            background-color: #e9ecef !important;
             padding: 2px 4px;
             border-radius: 4px;
             font-family: monospace;
-            color: #000000 !important;
+            color: #212529 !important;
         }
         .chatbot p, .chatbot span, .chatbot div {
-            color: #000000 !important;
+            color: #212529 !important;
             margin: 5px 0;
         }
         .chatbot * {
@@ -311,37 +321,37 @@ def create_ui():
             white-space: pre-wrap !important;
         }
         .chatbot h1, .chatbot h2, .chatbot h3, .chatbot h4, .chatbot h5, .chatbot h6 {
-            color: #000000 !important;
+            color: #212529 !important;
         }
         .chatbot a {
-            color: #0000EE !important;
+            color: #007bff !important;
             text-decoration: underline !important;
         }
         .chatbot ul, .chatbot ol {
-            color: #000000 !important;
+            color: #212529 !important;
             padding-left: 20px !important;
         }
         .chatbot li {
             margin-bottom: 5px !important;
-            color: #000000 !important;
+            color: #212529 !important;
         }
         .chatbot table {
             border-collapse: collapse !important;
             width: 100% !important;
         }
         .chatbot th, .chatbot td {
-            border: 1px solid #000000 !important;
+            border: 1px solid #dee2e6 !important;
             padding: 8px !important;
             text-align: left !important;
-            color: #000000 !important;
+            color: #212529 !important;
         }
         .chatbot th {
-            background-color: #f2f2f2 !important;
+            background-color: #e9ecef !important;
             font-weight: bold !important;
         }
         """
 
-        with gr.Blocks(theme="Nymbo/Nymbo_Theme", css=css) as demo:
+        with gr.Blocks(css=css) as demo:
             gr.Markdown("# Mouse: HuggingFace")
             
             with gr.Tabs() as tabs: