feat: 侧边栏主题选择.

src/App.svelte

@@ -44,7 +44,7 @@
     'winter'
   ];
 
-  /**导航栏注入对象*/
+  /**导航栏&侧边栏 -> 注入功能对象*/
   const injectText = [
     {
       id: 'search',
@@ -83,9 +83,10 @@
     }
   ];
 
+  // -----------------------------
+
   /**search input DOM元素*/
   let searchInputDom;
-
   /**执行搜索
    * @param event 事件对象
    */
@@ -104,6 +105,13 @@
     // }, 1000);
   }
 
+  /**设定网站主题*/
+  function setTheme(theme) {
+    document.documentElement.setAttribute('data-theme', theme);
+    $_theme = theme;
+    console.log('切换主题:\t', theme);
+  }
+
   // -----------------------------
 
   // FIXME: 环境变量 -> 处理生产模式和开发模式的文件网络路径问题
@@ -199,7 +207,7 @@
             />
           </div>
 
-          <!-- NOTE: 功能区遍历 -->
+          <!-- NOTE: (导航栏) 功能区遍历 -->
           {#each injectText as Item}
             <li>
               <div class="p-3 tooltip tooltip-left" data-tip={Item.hint}>
@@ -227,9 +235,7 @@
                     <button
                       data-theme={theme}
                       on:click={() => {
-                        document.documentElement.setAttribute('data-theme', theme);
-                        $_theme = theme;
-                        console.log('切换主题:\t', theme);
+                        setTheme(theme);
                       }}
                       class="rounded my-1 flex justify-between items-center"
                     >
@@ -258,12 +264,43 @@
   <div class="drawer-side z-[40]">
     <label for="my-drawer-3" aria-label="close sidebar" class="drawer-overlay" />
     <ul class="menu p-4 w-60 min-h-full bg-base-200">
-      <!-- Sidebar content here -->
+      <!-- NOTE: (侧边栏) 功能区遍历 -->
       {#each injectText as Item}
         <li>
           <button on:click={Item.click}>{Item.text}</button>
         </li>
       {/each}
+
+      <!-- NOTE: 主题 -->
+      <li>
+        <details>
+          <summary>主题选择</summary>
+          <ul>
+            {#each themes as theme}
+              <li>
+                <button
+                  data-theme={theme}
+                  on:click={() => {
+                    setTheme(theme);
+                  }}
+                  class="rounded my-1 flex justify-between items-center"
+                >
+                  <div>
+                    {theme}
+                  </div>
+
+                  <div class="flex h-full flex-shrink-0 flex-wrap gap-1">
+                    <span class="bg-primary w-4 h-4 rounded-box" />
+                    <span class="bg-secondary w-4 h-4 rounded-box" />
+                    <span class="bg-accent w-4 h-4 rounded-box" />
+                    <span class="bg-neutral w-4 h-4 rounded-box" />
+                  </div>
+                </button>
+              </li>
+            {/each}
+          </ul>
+        </details>
+      </li>
     </ul>
   </div>
 </div>