Upload 3 files

static/app.js

@@ -34,6 +34,12 @@ const STATE = {
 
 const DOM = {};
 const HISTORY_KEY = "vomebook_search_history";
+function themeIcon(isDark) {
+  const shape = isDark
+    ? '<path d="M20 15.5A8 8 0 1 1 8.5 4 6.5 6.5 0 0 0 20 15.5Z"/>'
+    : '<circle cx="12" cy="12" r="4"/><path d="M12 2v2m0 16v2M4.93 4.93l1.42 1.42m11.3 11.3 1.42 1.42M2 12h2m16 0h2M4.93 19.07l1.42-1.42m11.3-11.3 1.42-1.42"/>';
+  return `<svg class="theme-icon-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">${shape}</svg>`;
+}
 const ICON_HTML = {
   source: '<span class="ui-icon ui-icon-stack" aria-hidden="true"></span>',
   folder: '<span class="ui-icon ui-icon-folder" aria-hidden="true"></span>',
@@ -347,12 +353,14 @@ function renderHistoryDropdown() {
 
 function applyTheme() {
   document.body.classList.toggle("light", !STATE.isDark);
+  DOM.themeBtn.innerHTML = themeIcon(STATE.isDark);
+  DOM.themeBtn.setAttribute("aria-label", STATE.isDark ? "切换到白天模式" : "切换到黑夜模式");
+  DOM.themeBtn.title = STATE.isDark ? "白天模式" : "黑夜模式";
   const previewThemeBtn = DOM.previewPanel?.querySelector("[data-action='toggle-preview-theme']");
   if (previewThemeBtn) {
     previewThemeBtn.setAttribute("aria-label", STATE.isDark ? "切换到白天模式" : "切换到黑夜模式");
     previewThemeBtn.title = STATE.isDark ? "白天模式" : "黑夜模式";
-    const glyph = previewThemeBtn.querySelector(".preview-theme-glyph");
-    if (glyph) glyph.textContent = STATE.isDark ? "☾" : "☀";
+    previewThemeBtn.innerHTML = themeIcon(STATE.isDark);
   }
 }
 
@@ -558,7 +566,7 @@ async function openPreview(docId, keyword, options = {}) {
         </div>
         <div class="preview-tools">
           <button type="button" class="icon-btn-sm" data-action="close-preview" aria-label="关闭预览">×</button>
-          <button type="button" class="icon-btn-sm preview-theme-btn" data-action="toggle-preview-theme" aria-label="${STATE.isDark ? "切换到白天模式" : "切换到黑夜模式"}" title="${STATE.isDark ? "白天模式" : "黑夜模式"}"><span class="preview-theme-glyph" aria-hidden="true">${STATE.isDark ? "☾" : "☀"}</span></button>
+          <button type="button" class="icon-btn-sm preview-theme-btn" data-action="toggle-preview-theme" aria-label="${STATE.isDark ? "切换到白天模式" : "切换到黑夜模式"}" title="${STATE.isDark ? "白天模式" : "黑夜模式"}">${themeIcon(STATE.isDark)}</button>
         </div>
       </div>
       <pre class="preview-body">${text}</pre>`;

static/index.html

@@ -30,7 +30,7 @@
   <div class="header-right">
     <button id="settings-btn" class="icon-btn" aria-label="搜索设置"><span class="ui-icon ui-icon-sliders" aria-hidden="true"></span></button>
     <button id="mobile-toggle-btn" class="icon-btn" aria-label="切换手机或电脑模式" title="手机/电脑模式切换"><span id="mobile-toggle-icon" class="ui-icon ui-icon-devices" aria-hidden="true"></span></button>
-    <button id="theme-btn" class="icon-btn" aria-label="切换主题"><span class="ui-icon ui-icon-theme" aria-hidden="true"></span></button>
+    <button id="theme-btn" class="icon-btn" aria-label="切换到白天模式" title="白天模式"><svg class="theme-icon-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M20 15.5A8 8 0 1 1 8.5 4 6.5 6.5 0 0 0 20 15.5Z"/></svg></button>
   </div>
 </header>
 

static/style.css

@@ -503,10 +503,10 @@ ul, li {
   display: none;
 }
 
-.preview-theme-glyph {
-  font-family: var(--font-sans);
-  font-size: 18px;
-  line-height: 1;
+.theme-icon-svg {
+  width: 20px;
+  height: 20px;
+  display: block;
 }
 
 .preview-title {