diff --git a/index.php b/index.php
index 7bb135e..a9e02b6 100644
--- a/index.php
+++ b/index.php
@@ -8,18 +8,26 @@ header('Content-Type: text/html; charset=utf-8');
     <title>考试看板配置查询</title>
     <style>
         body { 
-            max-width: 800px; 
-            margin: 20px auto; 
-            padding: 20px; 
-            font-family: Arial, sans-serif; 
-            background-color: #f2f2f2; 
+            font-family: 'Roboto', Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            background: url('background.jpg') no-repeat center center fixed;
+            background-size: cover;
+            color: #333;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            transition: background-color 0.3s ease, color 0.3s ease;
         }
         .container { 
-            border: 1px solid #ddd; 
-            padding: 20px; 
-            border-radius: 8px; 
-            background-color: #fff; 
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
+            background-color: rgba(255, 255, 255, 0.9);
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
+            max-width: 600px;
+            width: 100%;
+            transition: background-color 0.3s ease, color 0.3s ease;
         }
         .form-group { 
             margin-bottom: 15px; 
@@ -28,28 +36,32 @@ header('Content-Type: text/html; charset=utf-8');
             display: block; 
             margin-bottom: 5px; 
             font-weight: bold; 
+            color: #333;
         }
         input[type="text"] { 
             width: 100%; 
-            padding: 8px; 
+            padding: 10px; 
             box-sizing: border-box; 
             border: 1px solid #ccc; 
             border-radius: 4px; 
+            margin-bottom: 10px;
         }
         button { 
-            background: #007bff; 
+            background: #6200ea; 
             color: white; 
             border: none; 
             padding: 10px 20px; 
             cursor: pointer; 
             border-radius: 4px; 
+            transition: background-color 0.3s ease;
         }
         button:hover { 
-            background: #0056b3; 
+            background: #3700b3; 
         }
         #result { 
             margin-top: 20px; 
             white-space: pre-wrap; 
+            color: #333;
         }
         .error { 
             color: red; 
@@ -65,9 +77,22 @@ header('Content-Type: text/html; charset=utf-8');
         .boolean { color: blue; }
         .null { color: magenta; }
         .key { color: red; }
+        .theme-toggle {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            background: #333;
+            color: white;
+            border: none;
+            padding: 10px 20px;
+            cursor: pointer;
+            border-radius: 4px;
+            transition: background-color 0.3s ease, color 0.3s ease;
+        }
     </style>
 </head>
 <body>
+    <button class="theme-toggle" onclick="toggleTheme()">切换主题</button>
     <div class="container">
         <h1>考试看板配置查询</h1>
         <div class="form-group">
@@ -134,6 +159,34 @@ header('Content-Type: text/html; charset=utf-8');
                 return '<span class="' + cls + '">' + match + '</span>';
             });
     }
+
+    function toggleTheme() {
+        const body = document.body;
+        const container = document.querySelector('.container');
+        const themeToggle = document.querySelector('.theme-toggle');
+        if (body.classList.contains('dark-theme')) {
+            body.classList.remove('dark-theme');
+            container.classList.remove('dark-theme');
+            themeToggle.textContent = '切换主题';
+        } else {
+            body.classList.add('dark-theme');
+            container.classList.add('dark-theme');
+            themeToggle.textContent = '切换主题';
+        }
+    }
     </script>
+    <style>
+        .dark-theme {
+            background: #333 !important;
+            color: #e0e0e0 !important;
+        }
+        .dark-theme .container {
+            background-color: rgba(255, 255, 255, 0.1) !important;
+        }
+        .dark-theme .theme-toggle {
+            background: #e0e0e0 !important;
+            color: #333 !important;
+        }
+    </style>
 </body>
 </html>
\ No newline at end of file
