Django CSS graphical interface for selecting styles

I am looking to implement a feature that allows users to select an "interface theme":

To enable users to change the theme across all templates, I have created a dropdown in my base.html.

For all my HTML templates, I utilize a base.html file by extending it using {% extends 'base.html'%}.

'# All views will require this:

theme = MyThemeModel.objects.filter(user=self.request.user).first().theme

return render(request, 'mytemplate.html', {'theme': theme})

'#base.html

{% if theme == 'theme 1'%}
<link rel="stylesheet" type="text/css" href="{% static 'theme1.css' %}" />
{% elif theme == 'theme 2'%}
<link rel="stylesheet" type="text/css" href="{% static 'theme2.css' %}" />
{% elif theme == 'theme 3'%}
<link rel="stylesheet" type="text/css" href="{% static 'theme3.css' %}" />
{% endif%}

I am considering utilizing AJAX to retrieve the selected theme from the user. However, I am concerned about having to add a function to each existing view. I aim to minimize code repetition. Is there a simpler way to achieve this?

Answer №1

To easily add your custom theme variable to every request in Django, you can utilize middleware. However, be cautious of the extra database query being made for each request when retrieving the user's theme. To optimize this process, consider saving the user's theme in a session variable instead. This way, the middleware can first check if the theme variable is already set in the session before querying the database. Here's an example implementation of the middleware logic:

if not request.session.theme:
    request.session.theme = MyThemeModel.objects.filter(user=self.request.user).first().theme
By accessing request.session.theme in your views and templates, you can ensure a smoother and more efficient process. Additionally, it might be beneficial to reconsider storing user-theme associations on the MyThemeModel rather than directly on the User model. Storing this information on the user model itself could eliminate the need for middleware entirely by allowing direct access to request.user.theme.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

By simply clicking a button in a React component, I aim to alter the font style of the text

function makeTextBold() { const boldText = document.querySelector('.form-control'); boldText.style.fontWeight = 'bold'; setText(boldText); } When I click the button, it redirects me to a blank page in the browser. ...

The active tabs or placeholders do not update properly when I click on them

Is there anyone who can help figure out why the tabs are not functioning as expected? The goal is for the tabs to change the input field placeholder and perform a search based on the active tab. If you're able to assist, please review my complete cod ...

Place an element in relation to the vertical size of a div that includes written content

Currently, I am working on implementing a button with a popup that appears underneath it when the user hovers over it. The specific requirements for this setup are: The size of the button should not affect the size of the popup The popup should always be ...

`What are some strategies for effectively handling concurrency in queries?`

Here is the code snippet I am working with: if LikedSlot.objects.filter(restaurant__id=r.id, user__id=u.id).count() == 0: l = LikedSlot.objects.create(restaurant=r, user=u) The purpose of this code is to create a new LikedSlot only if the user has no ...

When using the <object> tag, it may not always render at 100% height as intended

Application Inquiry I am seeking assistance with a web page that features a title, and a sticky menu bar at the top, allowing the rest of the space for displaying content. When a menu item is clicked, the objective is to load a page in the content at full ...

The div element disappears upon calling the load() function

Currently, I am working to implement sorting criteria (such as by price or author) on my jsp page. I am utilizing ajax to refresh the content of a div when a new sorting option is selected. However, upon calling the reload function, the div just disappears ...

"Enhance Your Website with Slider Swipe Effects using CSS3 and

After scouring the internet for various types of sliders, including swipe sliders, I am interested in creating a responsive swipe slider specifically for mobile phones. This would be a full page swipe slider where users can swipe left and right seamlessly. ...

What impact will splitting a single file into multiple files have on the overall performance of the website?

Imagine having an index.php file that includes multiple other files: Contents of index.php --------------------------- include('header.php'); include('footer.php'); --------------------------- Contents of header.php ------------------ ...

The overflow:hidden feature doesn't appear to be functioning as expected

I am struggling to hide the text details within a div containing text and image, organized in ul li structure. Despite applying overflow hidden to the .sbox class, the text details refuse to remain hidden and appear to be overflowing. Explore this issue o ...

Pressing the submit button will trigger the execution of a .php script, which will then generate a popup on the screen and refresh a specific part of

I have a select form and submit button on my page, which are dynamically generated based on entries in the database. Here is the HTML output: <div id="structures"> <h1>Build</h1> <form name="buildForm" id="buildForm" method="POST" ons ...

form for submitting multiple data via Ajax

I am working with two forms (request and feedback) where I need to use jQuery Ajax to send the data. When a user submits a request, the subject line will display "Request". If they submit feedback, the subject line will display "Feedback". Here is my cur ...

The issue I am facing is that whenever I use an AJAX POST request,

I encountered an issue where the ajax post method was unable to pass a parameter to the controller, as the controller parameter always appeared as Null. Index.schtml: I attempted to initiate a new view via a parameter by triggering an element in HTML and ...

"Transitioning from Bootstrap version 3.3.7 to the latest Bootstrap version 4.1.3

Everywhere I look, it says that Bootstrap 4.1 is compatible with Bootstrap 3, but when I update my project to the newer version, a lot of things stop working, such as this cookie consent feature. @{ Layout = ""; } @using Microsoft.AspNetCore.Http ...

Keep some table columns locked in place on your webpage while others are located off-screen, requiring a scroll to access

I have a question regarding an HTML table. There is a windows application that features a vertical scrollable table where some columns are fixed on the page while others remain outside the page. Here is an example: The black border represents the responsi ...

Blur effect on backdrop-filter causing shadowy inset borders (specific to Chrome and Windows)

Note: The issue mentioned below has been resolved in the latest version of Chrome (119.0.6045.200). While transitioning on backdrop-filter, I have observed a dark inset shadow that is only visible during the transition. This behavior seems to occur only ...

Updating a column in a SQL Table via an Ajax request

I am attempting to store the on or off value from a form into an SQL database by calling a JS function with an AJAX request that sends it to a PHP page for processing. I seem to be facing some issues with my code and could really use some assistance as the ...

Selecting the first li element using JQuery selectors

Can anyone help me with creating an onclick event that triggers when the user clicks on the first list item which is labeled as "Any Date"? I am looking to use jQuery to target this specific element. <ul id="ui-id-1" class="ui-menu ui-widget ui-widge ...

What is the reason for restricting AJAX requests to the same domain?

I'm puzzled by the limitation of AJAX requests to the same domain. Can you explain the reasoning behind this restriction? I don't understand why requesting files from external locations is an issue, especially since servers making XMLHTTP reques ...

Create dynamic filters in Django

Is there a way to optimize my Django filters for multiple models that have the same filtering requirements? class TestFilter(django_filters.FilterSet): field_list = Test._meta.get_fields() for field in field_list: field_name = (field.__str ...

Issue with collapsing custom-height navigation bar in Bootstrap 4

I have implemented a Bootstrap 4 navbar with a brand logo image sized at 150px x 33px. Now, I want to increase the height of the navbar to 80px. To do this, I added min-height: 80px; in my CSS. <!DOCTYPE html> <html lang="en"> <head> ...