如何通过CDN在Tailwind CSS中为Blogger模板添加暗黑模式切换按钮

你不需要额外的CDN，但要添加一段JavaScript代码，同时处理暗黑模式的样式——因为你用的Tailwind v2.2.15默认CDN版本是跟随系统主题（prefers-color-scheme）的媒体查询模式，要实现手动切换得按以下步骤操作：

1. 配置暗黑模式样式 #

默认CDN的Tailwind没有包含dark:前缀的类（这类样式只有在配置darkMode: 'class'时才会生成），你有两个简单的选择：

选项一：自定义暗黑样式 #

在Blogger模板的<head>标签内添加自定义CSS，用Tailwind的@apply指令复用现有样式，保证风格统一：

<style>
/* 全局暗黑样式 */
.dark body {
  @apply bg-gray-900 text-gray-100;
}
/* 示例：文章卡片的暗黑样式 */
.dark .blog-post-card {
  @apply bg-gray-800 border-gray-700;
}
/* 链接的暗黑样式 */
.dark a {
  @apply text-blue-400;
}
.dark a:hover {
  @apply text-blue-300;
}
</style>

你可以根据自己的模板结构，添加更多元素的暗黑样式规则。

选项二：改用类模式的Tailwind构建版本 #

如果你不想手写自定义CSS，可以替换当前的CDN链接为预先配置好darkMode: 'class'的Tailwind版本（基于v2.2.15构建），这样就能直接使用dark:前缀的类来定义暗黑样式：

<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.15/dist/tailwind.min.css" rel="stylesheet">

（注：此版本已包含类模式的暗黑样式支持，无需额外CDN）

2. 添加切换按钮 #

在模板的导航栏或其他合适位置插入切换按钮：

<button id="darkModeToggle" class="px-3 py-2 rounded-md bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600">
  切换暗黑模式
</button>

3. 编写切换逻辑的JavaScript代码 #

在模板的</body>标签前添加这段代码，负责切换模式、记住用户的选择：

<script>
const toggleBtn = document.getElementById('darkModeToggle');
const rootEl = document.documentElement;

// 初始化：读取本地存储的设置，或跟随系统主题
const savedMode = localStorage.getItem('darkMode');
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

if (savedMode === 'dark' || (!savedMode && prefersDark)) {
  rootEl.classList.add('dark');
  toggleBtn.textContent = '切换浅色模式';
}

// 点击切换逻辑
toggleBtn.addEventListener('click', () => {
  const isDark = rootEl.classList.contains('dark');
  if (isDark) {
    rootEl.classList.remove('dark');
    localStorage.setItem('darkMode', 'light');
    toggleBtn.textContent = '切换暗黑模式';
  } else {
    rootEl.classList.add('dark');
    localStorage.setItem('darkMode', 'dark');
    toggleBtn.textContent = '切换浅色模式';
  }
});
</script>

完成以上设置后，用户点击按钮即可切换暗黑/浅色模式，且刷新页面会自动应用之前的选择。

内容的提问来源于stack exchange，提问作者Md. Ibrahim