Repository: python-discord/site

Issue:
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.


Discussion:
As python-discord/django-simple-bulma#46 is closed, I'm moving this issue out from stalled status.
Hi! I'd love to have a go at this
@hedyhli 

Hi there! Are you still interested in working on this? 
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](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/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.)
@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: 
![image](https://user-images.githubusercontent.com/2098517/152816158-0a9d07af-e910-491e-8d0c-5d7adb0c870e.png)

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.
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.
Thanks for the detailed response. 
Please do assign it to me, I'd love to give this a try.

Resolving patch:
diff --git a/pydis_site/context_processors.py b/pydis_site/context_processors.py
--- a/pydis_site/context_processors.py
+++ b/pydis_site/context_processors.py
@@ -1,7 +1,7 @@
 from django.conf import settings
-from django.template import RequestContext
+from django.http import HttpRequest
 
 
-def git_sha_processor(_: RequestContext) -> dict:
+def git_sha_processor(_: HttpRequest) -> dict:
     """Expose the git SHA for this repo to all views."""
     return {'git_sha': settings.GIT_SHA}
diff --git a/pydis_site/settings.py b/pydis_site/settings.py
--- a/pydis_site/settings.py
+++ b/pydis_site/settings.py
@@ -299,8 +299,8 @@
 
 # Custom settings for django-simple-bulma
 BULMA_SETTINGS = {
-    "variables": {  # If you update these colours, please update the notification.css file
-        "primary": "#7289DA",    # Discord blurple
+    "variables": {
+        "primary": "#7289DA",    # PyDis blurple
         "green": "#32ac66",      # Colour picked after Discord discussion
         "turquoise": "#7289DA",  # Blurple, because Bulma uses this regardless of `primary` above
         "blue": "#2482c1",       # Colour picked after Discord discussion
@@ -315,6 +315,56 @@
         "footer-padding": "1rem 1.5rem 1rem",
         "tooltip-max-width": "30rem",
     },
+    "dark_variables": {
+        "primary": "#5365A4",         # A darker PyDis blurple
+        "warning": "#4B4636",
+        "warning-invert": "#FFFFFF",
+        "primary-dark": "#EFF1FB",    # Bulma's primary-light
+        "primary-light": "#2B3660",
+        "success-dark": "#EFFAF5",    # Bulma's success-light
+        "success-light": "#214133",
+        "danger-dark": "#FEECF0",     # Bulma's danger-light
+        "danger-light": "#4C1822",
+        "info-dark": "#EFF5FB",       # Bulma's info-light
+        "info-light": "#254056",
+
+        "body-background-color": "#252629",
+
+        "white": "#2C2F33",
+        "white-bis": "#23272A ",
+        "white-ter": "#36393F",
+        "light": "$white",
+
+        "black": "#F7F7F7",
+        "black-bis": "#F2F2F2",
+        "black-ter": "#E6E6E6",
+        "dark": "$black",
+
+        "grey-darker": "#303032",
+
+        "text": "#F4F4F4",
+        "text-light": "#F7F7F7",
+        "text-strong": "#FEFEFE",
+
+        "link": "#99B0FF",            # A brighter PyDis blurple
+        "link-hover": "#FFFFFF",
+        "link-focus": "$link-hover",
+        "link-active": "$link-hover",
+
+        "code": "#FF7990",            # Adjusted to 4.5 contrast ratio per WCAG Level AA
+        "code-background": "#464951", # A graduation lighter than the default for light theme
+
+        # Same as bulma, adjusted for dark mode
+        "shadow": "0 0.5em 1em -0.125em rgba(0, 0, 0, 0.3), 0 0px 0 1px rgba(0, 0, 0, 0.13)",
+        "border": "#4E4F51",
+        "border-light": "#313233",
+
+        # Use the same sizes
+        "dimensions": "16 24 32 48 64 96 128 256 512",
+        "navbar-height": "4.75rem",
+        "footer-padding": "1rem 1.5rem 1rem",
+        "tooltip-max-width": "30rem",
+    },
     "extensions": [
         "bulma-dropdown",
         "bulma-navbar-burger",


Test patch: