REST serializer missing user (and Code for dark and light theme)

related to: Dark and light theme implementation

@PerOve123 here is the code you might need… and hopefully the answer for the last part if you need that too. I added some extra comments for anybody who wants to implement this.

All works except storing the changed mode using an ajax call. The problem I can identify is that I don’t pass the user in the call…and dont know how to solve that. (and some small things)

For the dark and light mode I created the following:

HTML main template:

In the head :white_check_mark:

<input type="hidden" id="update_mode" url_ref="{% url 'update_mode' %}" />
<input type="hidden" id="get_mode" url_ref="{% url 'get_mode' %}" />
<link id="mode__light" rel="stylesheet" type="text/css" href="{% static 'css/light.css' %}" disabled="disabled"/>
<link id="mode__dark" rel="stylesheet" type="text/css" href="{% static 'css/dark.css' %}" disabled="disabled"/>

There are many solutions to implementing the light and dark theme (css options) and I chose to use two stylesheets. I need both stylesheets disabled when creating the page to prevent multiple changes at load. In the body tag I added “onload=“init_mode()” After loading the page this will activate the correct mode.

And the switch mode button:white_check_mark:

<button id="mode-button" class="mode-switch" onclick="switch_mode()"> <i id="mode__icon" class="bi bi-moon"></i></button>
Changing the icon and the active css file (see javascript)

I have 4 javascript functions including AJAX:
  1. I use the function getCookie(name) as described in [Django documentation] :white_check_mark:
    ( ) including const csrftoken = Cookies.get('csrftoken');

  2. The initialization of the correct mode for a known user :white_check_mark:

function init_mode() {
    var get_url = $("#get_mode").attr("url_ref");
            url: get_url,
            type: "GET",
            beforeSend: function (xhr) {
                xhr.setRequestHeader("X-CSRFToken", csrftoken);
            success: function (data) {
            error: function (error) {
  1. The function actually making the changes. :white_check_mark:
 function setMode(mode){
    var dark__sheet_link = document.getElementById("mode__dark"),
        light__sheet_link = document.getElementById("mode__light"),
        mode__icon = document.getElementById("mode__icon");
    if(mode == 'D'){
        light__sheet_link.disabled = "disabled";
     //The opposite of the above

:exclamation: And number 4 with the possible problem :exclamation:
4. The function to toggle the theme with a button. It does not store. :interrobang:

function switch_mode() {
    var post_url = $("#update_mode").attr("url_ref");
    var dark__sheet_link = document.getElementById("mode__dark"),
        light__sheet_link = document.getElementById("mode__light");
    if( dark__sheet_link.disabled == true ) {
            url:  post_url ,
            type: "PUT",
            data: {"mode":"D"},
            beforeSend: function (xhr) {
                xhr.setRequestHeader("X-CSRFToken", csrftoken);
            success: function (data) {
            error: function (error) {
                //Cannot store mode but change it anyway
    else {
            //same code as above but now for L
The model
class VisualConfiguration(models.Model):
    """The model for the theme (color) and the mode (dark or light) of the website"""
    can_delete = False

    MODE = [
        ('D', _('dark')),
        ('L', _('light')),

    user = models.OneToOneField(settings.AUTH_USER_MODEL, on_delete=models.CASCADE)
    mode = models.CharField(_('mode'), max_length=1, default='L', choices=MODE)
    #Future color theme
    #theme = models.???(_('theme')) #probably links to multiple possible color themes

    class Meta:
        constraints = [
            models.UniqueConstraint(fields=['user'], name='One Entry Per User')

    def __str__(self):
        return "VisualConfiguration"
from rest_framework import serializers
from .models import VisualConfiguration

class VisualModeSerializer(serializers.ModelSerializer):
    """Serializer for the dark or light mode of the website"""
    class Meta:
        model = VisualConfiguration
        fields = ('user', 'mode')
from .models import VisualConfiguration

def mode(request):
    if request.user.is_authenticated:
        _mode = VisualConfiguration.objects.filter(user=request.user).last()
        _mode = None
    return {
        'mode': _mode,

I forgot why I created this context processor :sweat_smile: so you might not need this
from rest_framework import status
from rest_framework.response import Response
from rest_framework.decorators import api_view
from .serializers import VisualModeSerializer

def get_mode(request):
    if request.method == 'GET':
        user = request.user
        if user.is_authenticated:
            visual_mode, created = VisualConfiguration.objects.get_or_create(user=user) # default light
            serializer = VisualModeSerializer(visual_mode, many=False)

  'get_mode[ serializer data: ' + "]")
            return Response(
        logger.error('get_mode with wrong method: ' + request.method.__str__())

def update_mode(request):'test' +
    if request.method == 'PUT':
        user = request.user
        if user.is_authenticated:
            serializer = VisualModeSerializer(
  'PUT: Update_mode for authenticated user: ' + + '; --> data: ' +

            if serializer.is_valid(): #raise_exception=True
      'PUT:  Response( ' + Response(
                return Response(, status=status.HTTP_201_CREATED)
                logger.error('Invalid serializer: ' + serializer.errors.__str__())
                return Response(, status=status.HTTP_400_BAD_REQUEST)
  'User not authenticated')
    else:'Update_mode wrong method: '+ request.method.__str__())

I get the following log in the terminal:

PUT: Update_mode for authenticated user: 1; --> data: <QueryDict: {'mode': ['D']}>

Invalid serializer: {'user': [ErrorDetail(string='Required field', code='required')]}

Bad Request: /account/update_mode/

[12/Mar/2022 16:02:08] "PUT /account/update_mode/ HTTP/1.1" 400 12

I realize I don’t send the user with it but cant find out how to get that. I tried to add the user in the update_mode view but either that is not possible or I do it wrong. Or I need to create a save function that uses the current user but that did not work either.

So how can I add the user so I can store it :question: (I hope that is the only problem.)

For anybody who wants to use this code.... changes / problems I am still facing:

I have some problems I still have to research:

  1. I want to start with the default mode as set in the browser
  2. I want to set the mode of the admin site equal to the mode in the main site
  3. The code: <input type="hidden" id="update_mode" url_ref="{% url 'update_mode' %}" /> in the head is incorrect html in many ways but it is the only way I could pass the two url’s for the update and the getmode So I hope to find a better way ….some day :grinning: and I will add it here if I remember

The things I also need but probably can solve:

  • You can store the mode in cookies or local storage when ajax returns an error because you cant store it in the database (see first part of this for a solution)