在 Django 项目中添加不同的主题模式

Question

我正在尝试在 Django 项目中为用户添加主题。用户可以选择深色模式和浅色模式。

所以在base.html中，我将链接设置如下：

    <link id="mystylesheet" href="{% static 'css/app-light.css' %}" type="text/css" rel="stylesheet">
        <!-- Mode -->
        <div id="mode" class="section" style="padding-top: 1rem; padding-bottom: 3rem;text-align: right">
            <button onclick="swapStyles('app-light.css')" type="button" class="btn btn-secondary">Light Mode</button>
            <button onclick="swapStyles('app-dark.css')" type="button" class="btn btn-dark">Dark Mode</button>
        </div>
        <!-- Mode -->

我已经启动了一个名为 mode 的新应用程序，其中包含以下 models.py：

class Setting(models.Model):
    user = models.OneToOneField(User, on_delete=models.CASCADE, related_name="mode",null=True,blank=True)
    name = models.CharField(max_length=200, null=True)
    value = models.CharField(max_length=200)

    def __str__(self):
        return self.name

这是 JavaScript

    <script type="text/javascript">

        function getCookie(name) {
            var cookieValue = null;
            if (document.cookie && document.cookie !== '') {
                var cookies = document.cookie.split(';');
                for (var i = 0; i < cookies.length; i++) {
                    var cookie = cookies[i].trim();
                    // Does this cookie string begin with the name we want?
                    if (cookie.substring(0, name.length + 1) === (name + '=')) {
                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                        break;
                    }
                }
            }
            return cookieValue;
        }
        var csrftoken = getCookie('csrftoken');

        var cssFile = "{% static 'css' %}"
        function swapStyles(sheet){
            document.getElementById('mystylesheet').href = cssFile + '/' + sheet
            localStorage.setItem('theme', sheet)

            updateTheme(sheet)
        }
        function loadSettings(){
            //Call data and set local storage

            var url = "{% url 'mode:user_settings' %}"
            fetch(url, {
                method:'GET',
                headers:{
                    'Content-type':'application/json'
                }
            })
            .then((response) => response.json())
            .then(function(data){

                console.log('Data:', data)

                var theme = data.value;

                if (theme == 'light.css' || null){
                    swapStyles('light.css')
                }else if(theme == 'dark.css'){
                    swapStyles('dark.css')
                }
            })
        }
        loadSettings()
        function updateTheme(theme){
            var url = "{% url 'mode:update_theme' %}"
            fetch(url, {
                method:'POST',
                headers:{
                    'Content-type':'application/json',
                    'X-CSRFToken':csrftoken,
                },
                body:JSON.stringify({'theme':theme})
            })
        }
    </script>

这是 urls.py

app_name = 'mode'

urlpatterns = [
    path('user_settings/', views.userSettings, name="user_settings"),
    path('update_theme/', views.updateTheme, name="update_theme"),
]

我很难设置用户设置views.py来反映用户何时登录，但是，更新后的主题工作正常。

def userSettings(request):
    user = request.user
    setting = getattr(user, 'setting', None)

def updateTheme(request):
    data = json.loads(request.body)
    theme = data['theme']

    user = request.user
    setting = Setting.objects.update_or_create(
        user=user, defaults={'value': theme}, name='theme')

    print('Request:', theme)
    return JsonResponse('Updated..', safe=False)

我的问题：如何配置user settings当前登录的用户默认设置为浅色模式，以及如果他选择在所有页面的数据库中设置深色模式当处于深色模式并且用户选择要在数据库中设置的浅色模式时。

Answer 1

您可以执行此操作的一种方法是；

1. 定义用户偏好模型
2. 创建上下文处理器以将首选项传递给您的模板
3. 在模板中添加针对用户首选项的检查，然后传递定义的css

然后，您可以在设置更改时强制刷新页面以“应用”新值。

这是一个例子

models.py

class Preferences(models.Model):
    
    themes = (
        ('light', 'Light Theme'),
        ('dark', 'Dark Theme'),
    )
    
    preference_id = models.AutoField(primary_key=True)
    user = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE)
    
    theme = models.CharField(max_length=255, choices=themes)
    
    
    class Meta:
        constraints = [
            models.UniqueConstraint(fields=['user'], name='One Entry Per User')
        ]

context processor

from apps.users.models import Preferences

def pref(request):
    if request.user.is_authenticated:
        _preferences = Preferences.objects.filter(user=request.user).last()
            
    else:
        _preferences = None
            
    return {
        'user_pref': _preferences,
    }

settings.py

TEMPLATES = [
    {
        'BACKEND': ...,
        'DIRS': ...,
        'OPTIONS': {
            'context_processors': [
                'context_processors.user_preferences_context.pref',
                ],
        },
    },
]

base.html

{% if user_pref.theme == 'dark' %}
<link href="{% static 'theme/css/themes/layout/header/base/dark.css' %}" rel="stylesheet" type="text/css" />
<link href="{% static 'theme/css/themes/layout/header/menu/dark.css' %}" rel="stylesheet" type="text/css" />
<link href="{% static 'theme/css/themes/layout/brand/dark.css' %}" rel="stylesheet" type="text/css" />
<link href="{% static 'theme/css/themes/layout/aside/dark.css' %}" rel="stylesheet" type="text/css" />
{% else %}
<link href="{% static 'theme/css/themes/layout/header/base/light.css' %}" rel="stylesheet" type="text/css" />
<link href="{% static 'theme/css/themes/layout/header/menu/light.css' %}" rel="stylesheet" type="text/css" />
<link href="{% static 'theme/css/themes/layout/brand/light.css' %}" rel="stylesheet" type="text/css" />
<link href="{% static 'theme/css/themes/layout/aside/light.css' %}" rel="stylesheet" type="text/css" />
{% endif %}

文件结构

project/
    -> apps
        -> Django Apps stored here
    -> context_processors
        -> Custom context processors stored here
    -> project
        -> settings.py
    manage.py