diff --git a/exam/Scripts/settings.js b/exam/Scripts/settings.js
index 1706087..0f57755 100644
--- a/exam/Scripts/settings.js
+++ b/exam/Scripts/settings.js
@@ -7,14 +7,25 @@ document.addEventListener("DOMContentLoaded", () => {
     const roomInput = document.getElementById("room-input");
     const roomElem = document.getElementById("room");
     const zoomInput = document.getElementById("zoom-input");
+    const themeToggle = document.getElementById("theme-toggle");
+    const themeLink = document.getElementById("theme-link");
 
     let offsetTime = getCookie("offsetTime") || 0;
     let room = getCookie("room") || "";
     let zoomLevel = getCookie("zoomLevel") || 1;
+    let theme = getCookie("theme") || "dark";
 
     offsetTime = parseInt(offsetTime);
     roomElem.textContent = room;
 
+    if (theme === "light") {
+        themeLink.href = "Styles/light.css";
+        themeToggle.checked = true;
+    } else {
+        themeLink.href = "Styles/dark.css";
+        themeToggle.checked = false;
+    }
+
     settingsBtn.addEventListener("click", () => {
         try {
             offsetTimeInput.value = offsetTime;
@@ -43,11 +54,14 @@ document.addEventListener("DOMContentLoaded", () => {
             offsetTime = parseInt(offsetTimeInput.value);
             room = roomInput.value;
             zoomLevel = parseFloat(zoomInput.value);
+            theme = themeToggle.checked ? "light" : "dark";
             setCookie("offsetTime", offsetTime, 365);
             setCookie("room", room, 365);
             setCookie("zoomLevel", zoomLevel, 365);
+            setCookie("theme", theme, 365);
             roomElem.textContent = room;
             document.body.style.zoom = zoomLevel;
+            themeLink.href = theme === "light" ? "Styles/light.css" : "Styles/dark.css";
             settingsModal.classList.add("fade-out");
             setTimeout(() => {
                 settingsModal.style.display = "none";
@@ -60,6 +74,11 @@ document.addEventListener("DOMContentLoaded", () => {
         }
     });
 
+    themeToggle.addEventListener("change", () => {
+        const theme = themeToggle.checked ? "light" : "dark";
+        themeLink.href = theme === "light" ? "Styles/light.css" : "Styles/dark.css";
+    });
+
     try {
         document.body.style.zoom = zoomLevel;
     } catch (e) {
diff --git a/exam/Styles/dark.css b/exam/Styles/dark.css
index de2104a..52316fa 100644
--- a/exam/Styles/dark.css
+++ b/exam/Styles/dark.css
@@ -330,3 +330,54 @@ td:last-child {
     border-radius: 50%;
     font-weight: bold;
 }
+
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 60px;
+    height: 34px;
+}
+
+.switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    transition: .4s;
+    border-radius: 34px;
+}
+
+.slider:before {
+    position: absolute;
+    content: "";
+    height: 26px;
+    width: 26px;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+    transition: .4s;
+    border-radius: 50%;
+}
+
+input:checked + .slider {
+    background-color: #2196F3;
+}
+
+input:checked + .slider:before {
+    transform: translateX(26px);
+}
+
+.theme-toggle-container {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
diff --git a/exam/Styles/light.css b/exam/Styles/light.css
new file mode 100644
index 0000000..8443996
--- /dev/null
+++ b/exam/Styles/light.css
@@ -0,0 +1,381 @@
+body {
+    font-family: 'HarmonyOS Sans SC Regular', 'Roboto', Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    background: url('../../background.jpg') no-repeat center center fixed;
+    background-size: cover;
+    animation: fadeIn 1s;
+    color: #333;
+    overflow: auto;
+}
+
+body::-webkit-scrollbar {
+    display: none;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+#fullscreen-btn, #settings-btn {
+    position: absolute;
+    top: 20px;
+    padding: 10px 20px;
+    font-size: 1rem;
+    cursor: pointer;
+    background-color: #f0f0f0;
+    color: #333;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+    transition: background-color 0.3s ease, transform 0.3s ease;
+    z-index: 1001;
+}
+
+#fullscreen-btn {
+    right: 20px;
+}
+
+#settings-btn {
+    right: 120px;
+}
+
+#settings-btn:hover, #fullscreen-btn:hover {
+    background-color: #ccc;
+    transform: scale(1.05);
+}
+
+.container {
+    padding: 20px;
+    max-width: 1400px;
+    margin: auto;
+    background-color: rgba(255, 255, 255, 0.8);
+}
+
+h1 {
+    font-size: 3.5rem;
+    font-weight: bold;
+    text-align: left;
+    margin-bottom: 10px;
+    color: #333;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+#room {
+    font-size: 3.5rem;
+    font-weight: bold;
+    color: #333;
+    position: relative;
+    right: 0;
+    margin-left: 20px;
+}
+
+#message {
+    font-size: 1.5rem;
+    color: #16a3d1;
+    margin-bottom: 20px;
+}
+
+.content {
+    display: flex;
+    justify-content: space-between;
+    gap: 3px;
+}
+
+.left-column, .right-column {
+    width: 48%;
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+}
+
+.clock-section, .info-section, .right-column {
+    background-color: rgba(255, 255, 255, 0.8);
+    backdrop-filter: blur(10px);
+    padding: 20px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+    border-radius: 8px;
+}
+
+#current-time {
+    font-size: 8rem;
+    text-align: center;
+    color: #333;
+    margin: 0;
+    font-weight: bold;
+}
+
+#current-subject, #exam-timing, #remaining-time, #status {
+    font-size: 3rem;
+    margin: 10px 0;
+    text-align: left;
+    color: #333;
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 20px;
+    border: 1px solid #ccc;
+    background-color: rgba(255, 255, 255, 0.8);
+}
+
+th, td {
+    border: 1px solid #ccc;
+    padding: 2px;
+    font-size: 2rem;
+    text-align: center;
+}
+
+th {
+    background-color: #f0f0f0;
+    color: #333;
+    font-weight: bold;
+    border-bottom: 2px solid #ccc;
+}
+
+.exam-status-进行中 td {
+    color: #5ba838 !important;
+}
+
+.exam-status-即将开始 td {
+    color: #fe9901 !important;
+}
+
+.exam-status-已结束 td {
+    color: #ec0434 !important;
+}
+
+.exam-status-空闲 td {
+    color: blue !important;
+}
+
+tr:hover {
+    background-color: #f0f0f0;
+}
+
+table {
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+td {
+    border-bottom: 1px solid #ccc;
+}
+
+td:first-child {
+    border-top-left-radius: 8px;
+    border-bottom-left-radius: 8px;
+}
+
+td:last-child {
+    border-top-right-radius: 8px;
+    border-bottom-right-radius: 8px;
+}
+
+#settings-modal {
+    display: none;
+    position: fixed;
+    z-index: 1000;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgba(0, 0, 0, 0.4);
+    padding-top: 60px;
+}
+
+#settings-modal-content {
+    background: rgba(255, 255, 255, 0.95);
+    padding: 25px;
+    margin: 25px auto;
+    border-radius: 12px;
+    border: 1px solid #ccc;
+    backdrop-filter: blur(8px);
+    max-width: 600px;
+    animation: fadeIn 0.5s ease;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(-20px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes fadeOut {
+    from { opacity: 1; transform: translateY(0); }
+    to { opacity: 0; transform: translateY(-20px); }
+}
+
+.fade-out {
+    animation: fadeOut 0.3s ease;
+}
+
+#settings-modal-content h3 {
+    margin: 0 0 20px;
+    color: #333;
+    font-size: 20px;
+}
+
+#settings-modal-content label {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin: 12px 0;
+    font-size: 16px;
+    color: #666;
+}
+
+#settings-modal-content input[type="number"],
+#settings-modal-content input[type="text"] {
+    font-size: 1.5rem;
+    padding: 10px;
+    margin-top: 10px;
+    margin-bottom: 20px;
+    width: 100%;
+    box-sizing: border-box;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    background-color: #fff;
+    color: #333;
+}
+
+#settings-modal-content input:focus {
+    outline: none;
+    border-color: #007acc;
+    box-shadow: 0 0 0 1px #007acc;
+}
+
+.button-group {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+}
+
+#settings-modal-content button {
+    background: linear-gradient(135deg, #3498db, #2980b9);
+    color: white;
+    border: none;
+    padding: 12px 24px;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 15px;
+    font-weight: 500;
+    transition: all 0.2s ease;
+    box-shadow: 0 4px 12px rgba(52,152,219,0.25);
+}
+
+#settings-modal-content button:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 6px 16px rgba(52,152,219,0.35);
+}
+
+#close-settings-btn {
+    padding: 10px 20px;
+    font-size: 2rem;
+    cursor: pointer;
+    background-color: #d9534f;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+    transition: background-color 0.3s ease;
+}
+
+#close-settings-btn:hover {
+    background-color: #c9302c;
+}
+
+.error-container {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: #ff6b6b;
+    color: white;
+    padding: 16px;
+    display: none;
+    z-index: 10001;
+    animation: slideUp 0.3s ease;
+}
+
+@keyframes slideUp {
+    from { transform: translateY(100%); }
+    to { transform: translateY(0); }
+}
+
+.error-content {
+    max-width: 800px;
+    margin: 0 auto;
+    font-size: 15px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.error-content:before {
+    content: '!';
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    background: white;
+    color: #ff6b6b;
+    border-radius: 50%;
+    font-weight: bold;
+}
+
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 60px;
+    height: 34px;
+}
+
+.switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    transition: .4s;
+    border-radius: 34px;
+}
+
+.slider:before {
+    position: absolute;
+    content: "";
+    height: 26px;
+    width: 26px;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+    transition: .4s;
+    border-radius: 50%;
+}
+
+input:checked + .slider {
+    background-color: #2196F3;
+}
+
+input:checked + .slider:before {
+    transform: translateX(26px);
+}
+
+.theme-toggle-container {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
diff --git a/exam/index.html b/exam/index.html
index d8da866..55b0564 100644
--- a/exam/index.html
+++ b/exam/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Exam Schedule</title>
-    <link rel="stylesheet" href="Styles/dark.css">
+    <link rel="stylesheet" href="Styles/dark.css" id="theme-link">
 	<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
 </head>
 <body>
@@ -57,6 +57,13 @@
             <input type="text" id="room-input" name="room-input" value="">
             <label for="zoom-input">页面缩放倍数:</label>
             <input type="number" id="zoom-input" step="0.1" min="0.5" max="2">
+            <div class="theme-toggle-container">
+                <label for="theme-toggle">亮/暗色模式:</label>
+                <label class="switch">
+                    <input type="checkbox" id="theme-toggle">
+                    <span class="slider round"></span>
+                </label>
+            </div>
             <div class="button-group">
                 <button id="save-settings-btn" class="control-btn">确定</button>
                 <button id="close-settings-btn" class="control-btn">关闭</button>