Add more elements to the dark mode

requirements/base.txt

@@ -37,7 +37,7 @@ openpyxl==3.0.10          # via tablib
 packaging==21.3           # via redis
 pillow==9.2.0             # via wagtail
 psycopg2==2.9.3           # via -r requirements/base.in
-pygments==2.12.0          # via -r requirements/base.in
+pygments==2.13.0          # via -r requirements/base.in
 pyparsing==3.0.9          # via packaging
 pytz==2022.1              # via django-modelcluster, djangorestframework, l18n
 redis==4.3.4              # via django-redis, django-rq, rq

requirements/dev.txt

@@ -60,7 +60,7 @@ platformdirs==2.5.2       # via black
 psycopg2==2.9.3           # via -r requirements/base.txt
 pycodestyle==2.8.0        # via flake8
 pyflakes==2.4.0           # via flake8
-pygments==2.12.0          # via -r requirements/base.txt
+pygments==2.13.0          # via -r requirements/base.txt
 pyparsing==3.0.9          # via -r requirements/base.txt, packaging
 python-dateutil==2.8.2    # via faker
 pytz==2022.1              # via -r requirements/base.txt, django-modelcluster, djangorestframework, l18n

static/src/js/darkmode.js

@@ -1,17 +1,26 @@
 const DARK_MODE_CLASS = "dark-mode";
 const STORAGE_KEY = "dark-mode";
 
-const body = document.getElementsByTagName("body")[0];
+const htmlTag = document.getElementsByTagName("html")[0];
 const darkModeToggle = document.getElementById("dark-mode-toggle");
 
 const matchesDarkMode = window.matchMedia("(prefers-color-scheme: dark)");
 
+const darkModeCodeStyles = document.getElementById("pygments-dark");
+const lightModeCodeStyles = document.getElementById("pygments-light");
+
 function handleDarkMode(darkMode) {
   window.localStorage.setItem(STORAGE_KEY, darkMode.toString());
+
   if (darkMode) {
-    body.classList.add(DARK_MODE_CLASS);
+    htmlTag.classList.add(DARK_MODE_CLASS);
   } else {
-    body.classList.remove(DARK_MODE_CLASS);
+    htmlTag.classList.remove(DARK_MODE_CLASS);
+  }
+
+  if (darkModeCodeStyles) {
+    darkModeCodeStyles.sheet.disabled = !darkMode;
+    lightModeCodeStyles.sheet.disabled = darkMode;
   }
 }
 
@@ -32,6 +41,6 @@ window.addEventListener("load", () => {
   });
 
   window.setTimeout(() => {
-    body.classList.add("dark-mode-animate");
+    htmlTag.classList.add("dark-mode-animate");
   }, 1000);
 });

static/src/scss/_blocks.scss

@@ -46,5 +46,17 @@ div.block-mermaid {
 
   img {
     width: unset;
+
+    @include dark-mode {
+      filter: invert(100%);
+    }
+  }
+}
+
+div.block-code .highlight {
+  pre,
+  span,
+  & {
+    @include dark-mode;
   }
 }

static/src/scss/_content.scss

@@ -41,3 +41,9 @@ section.content {
     max-width: calc(99% - ($column-gap * 2));
   }
 }
+
+.tags.has-addons {
+  @include dark-mode {
+    filter: invert(100%);
+  }
+}

static/src/scss/_footer.scss

@@ -3,8 +3,8 @@ footer.footer {
   padding: 1rem;
 
   @include dark-mode {
-    background-color: $dark;
-    color: $grey-light;
+    background-color: $black;
+    color: $dark-mode-text;
 
     a:hover {
       color: $grey-lighter;

static/src/scss/_hero.scss

@@ -14,6 +14,10 @@ section.hero {
   background-color: $white;
   display: block;
 
+  @include dark-mode {
+    background-color: $dark-mode-background;
+  }
+
   &.stuck {
     box-shadow: $shadow;
   }
@@ -36,6 +40,18 @@ section.hero {
     .dropdown-content {
       overflow-y: scroll;
       max-height: 50vh;
+
+      @include dark-mode {
+        background-color: $grey-dark;
+
+        a {
+          color: $dark-mode-text;
+
+          &:hover {
+            background-color: $grey-darker;
+          }
+        }
+      }
     }
 
     ul {
@@ -47,6 +63,18 @@ section.hero {
     }
   }
 
+  .button {
+    @include dark-mode {
+      background-color: $grey-darker;
+      border-color: $black;
+      color: $dark-mode-text;
+
+      &:hover {
+        border-color: $grey-dark;
+      }
+    }
+  }
+
   .subtitle {
     margin-bottom: 0.5rem;
   }
@@ -55,6 +83,10 @@ section.hero {
     margin-bottom: 1.25rem;
     font-weight: 300;
     font-size: 3.5rem;
+
+    @include dark-mode {
+      color: $dark-mode-text;
+    }
   }
 
   .column {

static/src/scss/_homepage.scss

@@ -1,4 +1,6 @@
 body.page-homepage {
+  height: 100vh;
+
   main {
     background-repeat: no-repeat;
     background-size: cover;

static/src/scss/_mixins.scss

@@ -1,11 +1,11 @@
 @mixin dark-mode {
   // Ensure animations aren't for the initial transition
-  body.dark-mode-animate & {
+  html.dark-mode-animate & {
     transition-duration: 0.5s;
-    transition-property: color, background-color;
+    transition-property: color, background-color, border-color, filter;
   }
 
-  body.dark-mode & {
+  html.dark-mode & {
     @content;
   }
 }

static/src/scss/_navbar.scss

@@ -7,6 +7,10 @@
   }
 }
 
+.navbar-item:hover {
+  background-color: transparent !important;
+}
+
 #dark-mode-toggle i {
   transition: transform 0.5s !important;
 
@@ -14,3 +18,9 @@
     transform: rotate(180deg);
   }
 }
+
+nav.navbar {
+  @include dark-mode {
+    background-color: $black;
+  }
+}

static/src/scss/_variables.scss

@@ -0,0 +1,2 @@
+$dark-mode-background: $dark;
+$dark-mode-text: $grey-lighter;

static/src/scss/base.scss

@@ -6,6 +6,7 @@
 
 @import "bulma/bulma";
 
+@import "variables";
 @import "navbar";
 @import "homepage";
 @import "footer";
@@ -20,10 +21,15 @@
 
 html,
 body {
-  height: 100%;
+  min-height: 100vh;
   display: flex;
   flex-direction: column;
   font-variant-ligatures: none;
+
+  @include dark-mode {
+    background-color: $dark-mode-background;
+    color: $dark-mode-text;
+  }
 }
 
 main {
@@ -32,4 +38,16 @@ main {
 
 a {
   transition: color 0.25s, background-color 0.25s;
+
+  @include dark-mode {
+    &:hover {
+      color: $grey-lighter;
+    }
+  }
+}
+
+.wagtail-userbar {
+  @include dark-mode {
+    filter: invert(100%);
+  }
 }

website/common/templates/common/content_page.html

@@ -13,7 +13,8 @@
 {% block extra_css %}
   <link rel="stylesheet" type="text/css" href="{% static 'css/lite-youtube-embed.css' %}">
   <link rel="stylesheet" type="text/css" href="{% static 'contrib/shareon/shareon.min.css' %}">
-  <link rel="stylesheet" type="text/css" href="{% url 'code-block:styles' 'default' %}">
+  <link rel="stylesheet" type="text/css" href="{% url 'code-block:styles' 'default' %}" id="pygments-light">
+  <link rel="stylesheet" type="text/css" href="{% url 'code-block:styles' 'github-dark' %}" id="pygments-dark">
 {% endblock %}
 
 {% block extra_js %}