如何在Django中实现无需JavaScript的明暗模式切换？

如果要在不使用JavaScript的前提下实现主题切换，有两种可行方案：一种是纯前端通过CSS伪类模拟切换效果，另一种是结合服务器端逻辑真正切换CSS文件引用。

纯前端模拟方案（同时加载两个CSS，控制生效状态） #

这种方案会同时加载light.css和dark.css，利用CSS的:checked伪类结合隐藏复选框，控制哪个主题的样式生效。

HTML结构 #

<!-- 隐藏的复选框，用于记录当前主题状态 -->
<input type="checkbox" id="theme-toggle" hidden>

<!-- 切换按钮（用label关联复选框，点击即切换复选框状态） -->
<label for="theme-toggle" class="theme-btn">切换主题</label>

<!-- 引入两个主题CSS文件 -->
<link rel="stylesheet" href="light.css">
<link rel="stylesheet" href="dark.css">

浅色主题（light.css） #

/* 定义浅色主题变量 */
:root {
  --bg-color: #ffffff;
  --text-color: #2d3748;
  --btn-bg: #2b6cb0;
  --btn-text: #ffffff;
}

/* 默认状态下（未选中复选框），应用浅色主题 */
#theme-toggle:not(:checked) ~ * {
  :root {
    --bg-color: #ffffff;
    --text-color: #2d3748;
    --btn-bg: #2b6cb0;
    --btn-text: #ffffff;
  }
}

/* 基础样式使用变量 */
body {
  margin: 0;
  padding: 20px;
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
}

.theme-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background-color: var(--btn-bg);
  color: var(--btn-text);
}

深色主题（dark.css） #

/* 选中复选框时，覆盖变量为深色主题值 */
#theme-toggle:checked ~ * {
  :root {
    --bg-color: #1a202c;
    --text-color: #f7fafc;
    --btn-bg: #4299e1;
    --btn-text: #1a202c;
  }
}

服务器端切换方案（真正切换CSS文件引用） #

如果需要只加载当前主题的CSS文件，而非同时加载两个，可以通过链接按钮传递参数，由服务器根据参数返回对应的CSS引用。

HTML结构 #

<a href="?theme=light" class="theme-btn">浅色主题</a>
<a href="?theme=dark" class="theme-btn">深色主题</a>

服务器端示例（以PHP为例） #

<?php
// 获取主题参数，默认浅色
$selectedTheme = $_GET['theme'] ?? 'light';
// 确定要加载的CSS文件
$cssFile = $selectedTheme === 'dark' ? 'dark.css' : 'light.css';
?>

<!-- 根据参数输出对应的CSS引用 -->
<link rel="stylesheet" href="<?php echo $cssFile; ?>">

注意：纯前端无JS的情况下，无法动态修改HTML的<link>属性，因此无法完全实现“切换CSS文件引用”的效果，只能通过CSS层叠规则控制生效样式；若要真正切换加载的文件，必须借助服务器端逻辑。

内容的提问来源于stack exchange，提问作者static-man