如何在Django项目中配置明暗主题切换功能？

方案一：纯前端实现（无需后端视图） #

这种方法不用修改后端代码，完全靠前端JS和Cookie保存用户选择，适配你的base.html没有对应视图的场景：

1. 添加切换按钮
   在base.html的菜单区域插入按钮：

<button id="theme-toggle" class="menu-item">切换明暗模式</button>

2. 编写JS逻辑
   在base.html的</body>前添加脚本，负责读取Cookie、切换主题、保存状态：

// 页面加载时检查Cookie，设置初始主题
document.addEventListener('DOMContentLoaded', function() {
  const themeToggle = document.getElementById('theme-toggle');
  const body = document.body;
  
  // 读取Cookie里的主题设置
  const savedTheme = document.cookie.split('; ').find(row => row.startsWith('theme='))?.split('=')[1];
  
  if (savedTheme === 'dark') {
    body.classList.add('theme--dark');
  }

  // 点击按钮切换主题
  themeToggle.addEventListener('click', function() {
    body.classList.toggle('theme--dark');
    const currentTheme = body.classList.contains('theme--dark') ? 'dark' : 'light';
    
    // 保存到Cookie，有效期30天
    document.cookie = `theme=${currentTheme}; path=/; max-age=${30*24*60*60}`;
  });
});

3. 模板里的body标签
   base.html的body标签无需写固定类，JS会自动处理：

<body>

方案二：结合Django会话（后端保存用户偏好） #

如果需要后端记住用户的主题选择（比如登录用户跨页面保持设置），可以用Django的session：

1. 添加切换视图
   在任意app的views.py里加一个简单的视图函数：

from django.http import HttpResponseRedirect
from django.urls import reverse

def toggle_theme(request):
    # 切换session里的主题值
    current_theme = request.session.get('theme', 'light')
    request.session['theme'] = 'dark' if current_theme == 'light' else 'light'
    # 重定向回原页面
    return HttpResponseRedirect(request.META.get('HTTP_REFERER', reverse('home')))

2. 配置URL
   在项目的urls.py里添加路由：

path('toggle-theme/', views.toggle_theme, name='toggle_theme'),

3. 模板里的条件判断
   base.html的body标签用Django模板语法判断session值：

<body {% if request.session.theme == 'dark' %}class="theme--dark"{% endif %}>

4. 添加切换按钮
   用表单POST请求触发切换（推荐，避免GET缓存问题）：

<form action="{% url 'toggle_theme' %}" method="post" class="d-inline">
    {% csrf_token %}
    <button type="submit" class="menu-item">切换明暗模式</button>
</form>

推荐搜索关键词 #

如果需要进一步优化，可以搜索这些关键词：

• Django dark mode toggle without view
• Django template conditional body class
• Django session theme preference
• JavaScript toggle theme with cookie

内容的提问来源于stack exchange，提问作者mdev