Update app.py

app.py

@@ -408,20 +408,85 @@ def finish_or_retire(pages_json, current_page, pid, orig_lev, action):
 #  UI
 # ======================================================
 custom_css = """
+/* ===============================
+   共通（両モード）
+   =============================== */
 .big-text {
     font-size: 20px !important;
     line-height: 1.8 !important;
     font-family: "Noto Sans", sans-serif !important;
 }
 
+/* 教材表示ボックス */
 .reading-area {
-    background-color: #fafafa;
-    padding: 20px;
-    border-radius: 10px;
-    border: 1px solid #ddd;
+    padding: 20px !important;
+    border-radius: 12px !important;
+    border: 1px solid #ccc !important;
+    transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+/* ===============================
+   ライトモード
+   =============================== */
+@media (prefers-color-scheme: light) {
+    body, .gradio-container {
+        background-color: #ffffff !important;
+        color: #222 !important;
+    }
+
+    .reading-area {
+        background-color: #fafafa !important;
+        color: #222 !important;
+        border-color: #ddd !important;
+    }
+
+    textarea, input, .gr-textbox textarea {
+        background-color: #ffffff !important;
+        color: #222 !important;
+        border: 1px solid #ccc !important;
+    }
+}
+
+/* ===============================
+   ダークモード
+   =============================== */
+@media (prefers-color-scheme: dark) {
+    body, .gradio-container {
+        background-color: #1e1e1e !important;
+        color: #e6e6e6 !important;
+    }
+
+    /* 教材の背景は黒すぎると読みにくいのでやや明るめのチャコール */
+    .reading-area {
+        background-color: #2a2a2a !important;
+        color: #f2f2f2 !important;
+        border-color: #444 !important;
+    }
+
+    textarea, input, .gr-textbox textarea {
+        background-color: #2c2c2c !important;
+        color: #f0f0f0 !important;
+        border: 1px solid #555 !important;
+    }
+
+    /* ボタンを見やすく */
+    button {
+        background-color: #3a3a3a !important;
+        color: #f0f0f0 !important;
+        border: 1px solid #555 !important;
+    }
+    button:hover {
+        background-color: #4a4a4a !important;
+    }
+
+    .gr-panel, .gr-box, .gr-group {
+        background-color: #272727 !important;
+        border-color: #444 !important;
+    }
 }
 """
 
+
 with gr.Blocks(css=custom_css) as demo:
     gr.Markdown("# 📚 Reading Exercise")