Enhance theme toggle functionality and update styles; add light and dark SVG icons

static/css/style.css

@@ -441,13 +441,17 @@ body.modal-open {
 
 /* 主题切换按钮 */
 .theme-toggle {
-    position: static;  /* Override the fixed positioning */
+    position: static;
-    width: 36px;      /* Match the size of other buttons */
+    width: 36px;
-    height: 36px;     /* Match the size of other buttons */
+    height: 36px;
-    display: flex;    /* Center the image */
+    display: flex;
     align-items: center;
     justify-content: center;
     border: 1px solid var(--border-color);
+    border-radius: 50%; /* 改为圆形 */
+    cursor: pointer;
+    background: var(--card-bg);
+    transition: all 0.2s ease;
 }
 
 .theme-toggle:hover {
@@ -460,6 +464,33 @@ body.modal-open {
     height: 20px;
 }
 
+/* ...existing code... */
+
+.theme-toggle .theme-icon {
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    transition: opacity 0.2s ease;
+}
+
+.theme-toggle .light-icon {
+    opacity: 0;
+}
+
+.theme-toggle .dark-icon {
+    opacity: 1;
+}
+
+[data-theme="light"] .theme-toggle .light-icon {
+    opacity: 1;
+}
+
+[data-theme="light"] .theme-toggle .dark-icon {
+    opacity: 0;
+}
+
+/* ...existing code... */
+
 .base-model-label {
     max-width: 120px;
     white-space: nowrap;
@@ -908,7 +939,7 @@ body.modal-open {
 .search-container input {
     width: 100%;
     padding: 6px 32px 6px 12px;
-    border: 1px solid var(--lora-border);
+    border: 1px solid oklch(65% 0.02 256); /* 更深的边框颜色，提高对比度 */
     border-radius: var(--border-radius-sm);
     background: var(--lora-surface);
     color: var(--text-color);
@@ -917,6 +948,11 @@ body.modal-open {
     box-sizing: border-box; /* 确保padding不会增加总宽度 */
 }
 
+.search-container input:focus {
+    outline: none;
+    border-color: var(--lora-accent);
+}
+
 .search-icon {
     position: absolute;
     right: 12px;
@@ -940,8 +976,6 @@ body.modal-open {
     }
 }
 
-/* ...existing code... */
-
 .corner-controls {
     position: fixed;
     top: 20px;
@@ -951,9 +985,10 @@ body.modal-open {
     z-index: var(--z-overlay);
 }
 
-.control-button {
+.control-button,
-    cursor: pointer;
+.theme-toggle {
-    padding: 8px;
+    width: 36px;
+    height: 36px;
     border-radius: 50%;
     background: var(--card-bg);
     border: 1px solid var(--border-color);
@@ -961,28 +996,38 @@ body.modal-open {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 36px;
+    cursor: pointer;
-    height: 36px;
     transition: all 0.2s ease;
 }
 
-.control-button:hover {
+.control-button:hover,
+.theme-toggle:hover {
     background: var(--lora-accent);
     color: white;
     transform: translateY(-2px);
 }
 
 /* Add responsive adjustments */
+@media (max-width: 1024px) {
+    .search-container {
+        width: 200px; /* 减小搜索框宽度 */
+    }
+}
+
 @media (max-width: 768px) {
-    .corner-controls {
+    .actions {
-        top: 10px;
+        position: relative;
-        right: 10px;
+        padding-right: 130px; /* 为corner-controls预留空间 */
-        gap: 8px;
     }
     
-    .control-button,
+    .search-container {
-    .theme-toggle {
+        width: 100%;
-        width: 32px;
+    }
-        height: 32px;
+    
+    .corner-controls {
+        position: absolute; /* 改为相对于actions定位 */
+        top: 50%;
+        transform: translateY(-50%);
+        right: 0;
     }
 }

static/images/theme-toggle-dark.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M21 12.79A9 9 0 1 1 11.21 3 A7 7 0 0 0 21 12.79z" fill="#e0e0e0" stroke="#e0e0e0"/>
+</svg>

static/images/theme-toggle-light.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <circle cx="12" cy="12" r="5" fill="#333333"/>
+  <line x1="12" y1="1" x2="12" y2="3" stroke="#333333"/>
+  <line x1="12" y1="21" x2="12" y2="23" stroke="#333333"/>
+  <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" stroke="#333333"/>
+  <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" stroke="#333333"/>
+  <line x1="1" y1="12" x2="3" y2="12" stroke="#333333"/>
+  <line x1="21" y1="12" x2="23" y2="12" stroke="#333333"/>
+  <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" stroke="#333333"/>
+  <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" stroke="#333333"/>
+</svg>

static/images/theme-toggle.svg

@@ -1,11 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-  <circle cx="12" cy="12" r="5"/>
-  <path d="M12 1v2"/>
-  <path d="M12 21v2"/>
-  <path d="M4.22 4.22l1.42 1.42"/>
-  <path d="M18.36 18.36l1.42 1.42"/>
-  <path d="M1 12h2"/>
-  <path d="M21 12h2"/>
-  <path d="M4.22 19.78l1.42-1.42"/>
-  <path d="M18.36 5.64l1.42-1.42"/>
-</svg>

templates/loras.html

@@ -42,7 +42,8 @@
             <i class="fas fa-bug"></i>
         </button>
         <div class="theme-toggle" onclick="toggleTheme()" title="Toggle theme">
-            <img src="/loras_static/images/theme-toggle.svg" alt="Theme">
+            <img src="/loras_static/images/theme-toggle-light.svg" alt="Theme" class="theme-icon light-icon">
+            <img src="/loras_static/images/theme-toggle-dark.svg" alt="Theme" class="theme-icon dark-icon">
         </div>
     </div>