Implement a dark theme

[lemonsaurus]

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.

[ks129]

As python-discord/django-simple-bulma#46 is closed, I'm moving this issue out from stalled status.

[hedyhli]

Hi! I'd love to have a go at this

[lemonsaurus]

@hedyhli

Hi there! Are you still interested in working on this?

[GDWR]

I've been having a quick look into this and how it could be implemented. This is the first time I've looked into using a server-side rendered website, let alone Django.

I am trying to get my head around how you could implement something that would use state (the user's requested theme) to serve up different stylesheets when we are using server-side rendering. I understand that Bulma is being used to created multiple themes that are {theme_name}_variables and can be served up using the {% Bulma theme_name %}.

I have played around with context_processors as they allow you to intercept requests and attach additional variables to the context, although there is little (to my knowledge) we can use to determine what theme to serve to the user.

The closest I have found to a solution for this is to use the CSS standard prefers-color-scheme, but this would require Bulma to either recognize a dark and a light theme and serve them together, or us to fully rework the styling (which I think is not a reasonable thing to do.)

[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.

[lemonsaurus]

Should I assign it to you, @GDWR? I'm happy to help out with this if you have any more questions, you can just ping me whenever. I was planning on solving this myself if nobody grabbed it soon.

[GDWR]

Thanks for the detailed response. Please do assign it to me, I'd love to give this a try.

[Ibrahim2750mi]

I have been looking into this and have a few questions. I have currently implemented a dark theme for the pre-defined colors in the BULMA_SETTINGS, the colors only change for the nav bar i.e colors present in the BULMA_SETTINGS are only used in the css of nav bar. To have a full dark theme I think we need to have background color too, will the bsckground color be implemented at base.css base.css is called by base.html which isn't returned by any of the views as far as I have explored and understood the structure of the whole src of site.

[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.

[Ibrahim2750mi]

Umm, I will first try to implement bare minimum of this on my fork(2-3 days) if it works I will post a comment and they you can assign this to me.

[hedyhli]

UPDATE: I've now taken over this feature and is working on it on the above pull request.

---

Hi @Ibrahim2750mi, since it's been over a year without a follow-up comment, I'm assuming you're no longer in interested in implementing this?

It has come to my attention that this issue may be up for grabs again, and we still don't have a dark theme 😢

I have recently pulled in GDWR's previous work and synced upstream changes (fixed conflicts). If anyone wishes to work on top of it, it should be very easy to do so.

If no one decides to pick this up in a week (starting today), can get assigned, please? I'd love to try and get this to the finish line this time.

[Ibrahim2750mi]

Hi @Ibrahim2750mi, since it's been over a year without a follow-up comment, I'm assuming you're no longer in interested in implementing this?

Sure. Go ahead!