Update app.py

app.py

@@ -424,13 +424,14 @@ T = \left(\frac{(1 - A) \times L}{16 \pi \sigma \, d^2}\right)^{\frac{1}{4}} - 2
 # สร้าง UI ด้วย Gradio
 ###################################
 css_code = """
-/* โหมดสว่าง (Light Theme) */
 body {
-    background-color: #F9FBFF;
+    /* ลบการกำหนดสีพื้นหลัง */
+    /* background-color: #F9FBFF; */
     font-family: "Kanit", sans-serif;
-    color: #333333; /* สีข้อความทั่วไป */
+    /* ใช้ตัวแปรสีสำหรับพื้นหลัง */
+    background-color: var(--background-color);
+    color: var(--text-color);
 }
-
 #title {
     color: #4A90E2;
     text-align: center;
@@ -439,18 +440,18 @@ body {
     margin-bottom: 10px;
     font-weight: bold;
 }
-
 .game-desc {
     margin: 0 auto;
     width: 90%;
-    background-color: #ECF6FF;
+    /* ลบการกำหนดสีพื้นหลัง */
+    /* background-color: #ECF6FF; */
     border: 2px dashed #B3DAFF;
     border-radius: 10px;
     padding: 15px;
-    color: #333333;
+    /* เปลี่ยนสีข้อความให้เข้ากับธีม */
+    color: var(--text-color, #333);
     margin-bottom: 20px;
 }
-
 .btn-main {
     background-color: #FFE066;
     border: 2px solid #FFCA28;
@@ -459,18 +460,17 @@ body {
     padding: 10px 30px;
     border-radius: 10px;
     margin-right: 10px;
-    color: #000000; /* สีข้อความปุ่ม */
 }
-
 #child-summary, #detail-th, #prompt1-en, #prompt2-en, #prompt3-en, #formula-box {
-    background-color: #FFFDF5;
+    /* ลบการกำหนดสีพื้นหลัง */
+    /* background-color: #FFFDF5; */
     border: 2px solid #FFE082;
     border-radius: 10px;
     padding: 10px;
     margin-bottom: 20px;
-    color: #333333; /* สีข้อความภายในกล่อง */
+    /* เปลี่ยนสีข้อความให้เข้ากับธีม */
+    color: var(--text-color, #333);
 }
-
 .copy-btn {
     background-color: #F06292; 
     border: 2px solid #E91E63; 
@@ -479,54 +479,17 @@ body {
     padding: 5px 10px; 
     border-radius: 5px;
     margin-top: 5px;
-    color: #FFFFFF; /* สีข้อความปุ่มคัดลอก */
 }
 
-/* โหมดมืด (Dark Theme) */
-@media (prefers-color-scheme: dark) {
-    body {
-        background-color: #1E1E1E !important;
-        color: #FFFFFF !important; /* สีข้อความทั่วไปในโหมดมืด */
-    }
-
-    #title {
-        color: #6EB1FF !important;
-    }
-
-    .game-desc {
-        background-color: #2E2E2E !important;
-        border: 2px dashed #555555 !important;
-        color: #FFFFFF !important;
-    }
-
-    .btn-main {
-        background-color: #FFA500 !important;
-        border: 2px solid #FF8C00 !important;
-        color: #FFFFFF !important;
-    }
-
-    #child-summary, #detail-th, #prompt1-en, #prompt2-en, #prompt3-en, #formula-box {
-        background-color: #333333 !important;
-        border: 2px solid #555555 !important;
-        color: #FFFFFF !important;
-    }
-
-    .copy-btn {
-        background-color: #FF4081 !important; 
-        border: 2px solid #F50057 !important; 
-        color: #FFFFFF !important;
-    }
-
-    /* ปรับสีข้อความเพิ่มเติมในโหมดมืด */
-    .game-desc p, #child-summary p, #detail-th p, #prompt1-en p, #prompt2-en p, #prompt3-en p, #formula-box p {
-        color: #FFFFFF !important;
-    }
+/* ตัวแปรสีสำหรับธีม */
+:root {
+    --background-color: #FFFFFF;
+    --text-color: #333333;
+}
 
-    /* ปรับสีตัวหนังสืออื่นๆ ที่อาจไม่ถูกครอบคลุม */
-    h1, h2, h3, h4, h5, h6, p, span, div, label, button {
-        color: #FFFFFF !important;
-        background-color: #1E1E1E !important;
-    }
+[data-theme="dark"] {
+    --background-color: #121212;
+    --text-color: #FFFFFF;
 }
 """