技术笔记

编程 营销 外贸


夜间模式

<h3>夜间模式</h3> <p><img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=29b9ec91e7979c52fcbc38b5f7c890ea&amp;amp;file=file.png" alt="" /> <img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=b156395a4c91b3f9cc7d34b5c6524b36&amp;amp;file=file.png" alt="" /></p> <pre><code>&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&amp;quot;zh-CN&amp;quot;&amp;gt; &amp;lt;head&amp;gt;     &amp;lt;meta charset=&amp;quot;UTF-8&amp;quot;&amp;gt;     &amp;lt;meta name=&amp;quot;viewport&amp;quot; content=&amp;quot;width=device-width, initial-scale=1.0&amp;quot;&amp;gt;     &amp;lt;title&amp;gt;暗色模式演示&amp;lt;/title&amp;gt;         &amp;lt;!-- Bootstrap 5 CSS --&amp;gt;     &amp;lt;link href=&amp;quot;https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css&amp;quot; rel=&amp;quot;stylesheet&amp;quot;&amp;gt;     &amp;lt;link href=&amp;quot;static/css/bootstrap-icons.min.css&amp;quot; rel=&amp;quot;stylesheet&amp;quot; /&amp;gt;     &amp;lt;style&amp;gt;         /* 默认白天模式 */         :root {             --bg-color: #ffffff;             --text-color: #212529;             --card-bg: #f8f9fa;         }         /* 暗色模式 */         .dark-mode {             --bg-color: #1a1a1a;             --text-color: #f8f9fa;             --card-bg: #2d2d2d;         }         body {             background-color: var(--bg-color);             color: var(--text-color);             transition: all 0.3s ease;         }         .custom-card {             background-color: var(--card-bg);             border: 1px solid rgba(0, 0, 0, 0.125);             border-radius: 0.5rem;             padding: 1rem;             margin: 1rem 0;         }         /* 覆盖Bootstrap导航栏样式 */         .dark-mode .navbar {             background-color: var(--card-bg) !important;             border-bottom: 1px solid rgba(255, 255, 255, 0.1);         }     &amp;lt;/style&amp;gt; &amp;lt;/head&amp;gt; &amp;lt;body&amp;gt;     &amp;lt;!-- 导航栏 --&amp;gt;     &amp;lt;nav class=&amp;quot;navbar navbar-expand-lg navbar-light bg-light&amp;quot;&amp;gt;         &amp;lt;div class=&amp;quot;container&amp;quot;&amp;gt;             &amp;lt;a class=&amp;quot;navbar-brand&amp;quot; href=&amp;quot;#&amp;quot;&amp;gt;网站LOGO&amp;lt;/a&amp;gt;             &amp;lt;div class=&amp;quot;d-flex align-items-center&amp;quot;&amp;gt;                 &amp;lt;button id=&amp;quot;themeToggle&amp;quot; class=&amp;quot;btn btn-outline-secondary&amp;quot;&amp;gt;                     &amp;lt;i class=&amp;quot;bi bi-moon-fill&amp;quot;&amp;gt;&amp;lt;/i&amp;gt; 夜间模式                 &amp;lt;/button&amp;gt;             &amp;lt;/div&amp;gt;         &amp;lt;/div&amp;gt;     &amp;lt;/nav&amp;gt;     &amp;lt;!-- 内容区域 --&amp;gt;     &amp;lt;div class=&amp;quot;container mt-4&amp;quot;&amp;gt;         &amp;lt;div class=&amp;quot;custom-card&amp;quot;&amp;gt;             &amp;lt;h3&amp;gt;示例内容&amp;lt;/h3&amp;gt;             &amp;lt;p&amp;gt;这是一个简单的暗色模式切换演示,使用Bootstrap 5和jQuery实现。&amp;lt;/p&amp;gt;             &amp;lt;button class=&amp;quot;btn btn-primary&amp;quot;&amp;gt;示例按钮&amp;lt;/button&amp;gt;         &amp;lt;/div&amp;gt;     &amp;lt;/div&amp;gt;     &amp;lt;!-- Bootstrap 5 JS 和依赖 --&amp;gt;     &amp;lt;script src=&amp;quot;https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;     &amp;lt;script src=&amp;quot;https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;         &amp;lt;script&amp;gt;         $(document).ready(function() {             // 检查本地存储中的主题设置             const currentTheme = localStorage.getItem(&amp;#039;theme&amp;#039;);             if (currentTheme === &amp;#039;dark&amp;#039;) {                 $(&amp;#039;body&amp;#039;).addClass(&amp;#039;dark-mode&amp;#039;);                 updateButtonIcon(&amp;#039;dark&amp;#039;);             }             // 切换按钮点击事件             $(&amp;#039;#themeToggle&amp;#039;).click(function() {                 $(&amp;#039;body&amp;#039;).toggleClass(&amp;#039;dark-mode&amp;#039;);                                 if ($(&amp;#039;body&amp;#039;).hasClass(&amp;#039;dark-mode&amp;#039;)) {                     localStorage.setItem(&amp;#039;theme&amp;#039;, &amp;#039;dark&amp;#039;);                     updateButtonIcon(&amp;#039;dark&amp;#039;);                 } else {                     localStorage.setItem(&amp;#039;theme&amp;#039;, &amp;#039;light&amp;#039;);                     updateButtonIcon(&amp;#039;light&amp;#039;);                 }             });             // 更新按钮图标和文字             function updateButtonIcon(theme) {                 const button = $(&amp;#039;#themeToggle&amp;#039;);                 const icon = theme === &amp;#039;dark&amp;#039; ? &amp;#039;bi bi-sun-fill&amp;#039; : &amp;#039;bi bi-moon-fill&amp;#039;;                 const text = theme === &amp;#039;dark&amp;#039; ? &amp;#039; 白天模式&amp;#039; : &amp;#039; 夜间模式&amp;#039;;                                 button.html(`&amp;lt;i class=&amp;quot;${icon}&amp;quot;&amp;gt;&amp;lt;/i&amp;gt;${text}`);             }         });     &amp;lt;/script&amp;gt; &amp;lt;/body&amp;gt; &amp;lt;/html&amp;gt;</code></pre>

页面列表

ITEM_HTML