Implement a dark theme

There’s been some requests for a dark theme, and we came up with a feasible way this could be implemented.

First, let’s solve the actual theming on django-simple-bulma instead of here. I’ve created an issue for this, and until this issue is solved, this issue will be blocked. https://github.com/python-discord/django-simple-bulma/issues/46

Second, we just create an alternative theme by passing in a dict of alternate variables into BULMA_SETTINGS, and then ensuring we have the right bulma classes applied to the right parts of the site. We probably need to apply a class to the background of the page itself, everything is very white currently.

Third, we need some way for our users to toggle this on and off. We could put a switch in the user settings, so that users would have to log in with OAuth and set their preference. We could put a simple on off switch somewhere on the page and use some sort of cookie or something to store it for that session.

[lemonsaurus]

@GDWR

Okay, so you understand the mechanism by which multiple themes can be defined for django-simple-bulma, that’s good. So all we need to do is dynamically modify the theme name that the bulma loader tag will use.

So, for example, instead of {% bulma %}, we will do {% bulma user_theme %}, and here user_theme will need to be a variable that exists in the context.

Next, we need to make sure that variable gets added. You mentioned context processors, and that’s an absolutely valid approach. We simply ensure that user_theme is always part of every context, and has a default value.

But how do we store the users preference? I suggest we just put a slider in the menu under More to switch between the themes. Something like this:

When this is switched, we give the user a cookie that never expires containing their theme preference. In the context processor, we look for this cookie, and use it to set the theme if it exists.

When the button is clicked, set the cookie and simply reload the page so the changes will take effect. For maximum user experience, make the button reactive so it switches the theme without reloading the page, but this may be tricky.

[GDWR]

Oops, I should have linked my draft PR on here so people could use it for reference. #657 - site preview It is now a stale PR and can be ignored. @Ibrahim2750mi, if you wish to take over I can reassign this issue to you.

In regards to your question about the background colour, from when I was creating this draft I am pretty sure I used the class has-background-white-bis to set let Bulma hook into the background-color css attribute. from looking back at my commit

You can find this CSS class on their docs, hopefully that helps.