How to change html background color using django code

Question

I was doing a project and I was wondering, I wanted to make a button in HTML which would be controlled in the Django views.py. So basically when someone clicks on the button the background becomes dark and it gets saved, what I mean is if the person refreshes the page the background will still be dark. I wanted to know if it was possible to do it.

Thanks.

Does this answer your question? Adding Different Theme modes in a Django Project Also if you need it to work for anonymous users: How to add dark mode for anonymous users — Abdul Aziz Barkat
– Abdul Aziz Barkat, Commented Sep 26, 2021 at 13:53

Rajesh · Accepted Answer · 2021-09-26 14:15:48Z

1

This is very easily doable. The button click could be connected to a jquery click function which also includes an ajax call:

$('#id_button).click(function(){
   $('body').css({'background-color': 'dark-gray'})
   $.post({% url 'change-background-color' %}, {color: 'dark-gray'}, function(){
         location.reload()  // to refresh the page with new background color
      })
})

# urls.py
add the following path

 path('change-background-color/', views.change_background_color, name='change-background-color'),

# views.py
add the following view

def change_background_color(request):
  color = request.POST.get('color')
  # you could save the input to a model BackgroundColor as an instance or 
   update a current record.
  # creating an instance
  BackgroundColor.objects.create(bg_color=color)
  return JsonResponse({'response': 'successfully changed color'})

Now all that is left is to ensure that your html has background color set to a variable referring to the Model instance where you saved the color in Ajax call

<body style='background-color:{{bg_color}}'></body>

answered Sep 26, 2021 at 14:15

Rajesh

686 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kronox Over a year ago

Ok I got it I tried using plain javascript and that too worked out so I will use your code and see if it can make it mode efficient. Thanks a lot!

Collectives™ on Stack Overflow

How to change html background color using django code

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related