如何通过Django代码实现HTML背景色切换并持久化保存用户设置

这个需求完全可以实现，以下是可直接复用的实现方案：

将用户的深色模式偏好存储在Django后端，页面加载时由模板读取偏好值渲染对应样式，用户点击按钮后发请求给views.py更新偏好值，实现状态持久化。

步骤1：配置存储逻辑 #

根据你的用户场景二选一即可：

• 针对已登录用户：在用户模型新增深色模式标识字段，models.py示例：

from django.db import models
from django.contrib.auth.models import AbstractUser

class CustomUser(AbstractUser):
    dark_mode = models.BooleanField(default=False)

添加后执行python manage.py makemigrations和python manage.py migrate更新数据库。

• 针对未登录用户：直接使用Django自带的session存储即可，无需修改模型。

步骤2：编写views.py逻辑 #

from django.shortcuts import render
from django.http import JsonResponse

# 现有页面视图，把深色模式状态传给模板
def your_page_view(request):
    if request.user.is_authenticated:
        dark_mode = request.user.dark_mode
    else:
        dark_mode = request.session.get('dark_mode', False)
    return render(request, 'your_page.html', {'dark_mode': dark_mode})

# 切换深色模式的接口
def toggle_dark_mode(request):
    if request.method == 'POST':
        if request.user.is_authenticated:
            # 更新用户表的偏好设置
            request.user.dark_mode = not request.user.dark_mode
            request.user.save()
            current_mode = request.user.dark_mode
        else:
            # 更新session存储的偏好设置
            current_mode = not request.session.get('dark_mode', False)
            request.session['dark_mode'] = current_mode
        return JsonResponse({'status': 'success', 'dark_mode': current_mode})

步骤3：配置urls.py路由 #

from django.urls import path
from . import views

urlpatterns = [
    # 你的现有页面路由
    path('', views.your_page_view, name='your_page'),
    # 新增切换深色模式的路由
    path('toggle-dark-mode/', views.toggle_dark_mode, name='toggle_dark_mode'),
]

步骤4：编写HTML模板逻辑 #

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 深色模式自定义样式 */
        body.dark {
            background-color: #1a1a1a;
            color: #f0f0f0;
        }
    </style>
</head>
<!-- 页面加载时直接根据后端传的状态渲染样式 -->
<body class="{% if dark_mode %}dark{% endif %}">
    <button id="darkModeBtn">切换深色模式</button>

    <script>
        const toggleBtn = document.getElementById('darkModeBtn');
        toggleBtn.addEventListener('click', () => {
            // 发送请求给后端更新状态
            fetch("{% url 'toggle_dark_mode' %}", {
                method: 'POST',
                headers: {
                    'X-CSRFToken': '{{ csrf_token }}',
                    'Content-Type': 'application/json'
                }
            })
            .then(res => res.json())
            .then(data => {
                // 实时切换页面样式
                document.body.classList.toggle('dark', data.dark_mode);
            })
        })
    </script>
</body>
</html>

如果需要支持匿名用户关闭浏览器后再次打开依然保留设置，只需要在前端把偏好值同时存在localStorage，页面加载时优先读取localStorage的值和后端同步即可，逻辑完全一致。

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