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