diff --git a/requirements/base.txt b/requirements/base.txt
index 7971a4b..08c5384 100644
--- a/requirements/base.txt
+++ b/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
diff --git a/requirements/dev.txt b/requirements/dev.txt
index 2a68d76..6fa28a4 100644
--- a/requirements/dev.txt
+++ b/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
diff --git a/static/src/js/darkmode.js b/static/src/js/darkmode.js
index d497d8e..99a4e4c 100644
--- a/static/src/js/darkmode.js
+++ b/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);
});
diff --git a/static/src/scss/_blocks.scss b/static/src/scss/_blocks.scss
index 6b5a4b5..476b056 100644
--- a/static/src/scss/_blocks.scss
+++ b/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;
}
}
diff --git a/static/src/scss/_content.scss b/static/src/scss/_content.scss
index d2038f4..03053ef 100644
--- a/static/src/scss/_content.scss
+++ b/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%);
+ }
+}
diff --git a/static/src/scss/_footer.scss b/static/src/scss/_footer.scss
index 39290d2..ef059c3 100644
--- a/static/src/scss/_footer.scss
+++ b/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;
diff --git a/static/src/scss/_hero.scss b/static/src/scss/_hero.scss
index 0790e4c..48240ef 100644
--- a/static/src/scss/_hero.scss
+++ b/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 {
diff --git a/static/src/scss/_homepage.scss b/static/src/scss/_homepage.scss
index 4dca8b2..6d6f1c8 100644
--- a/static/src/scss/_homepage.scss
+++ b/static/src/scss/_homepage.scss
@@ -1,4 +1,6 @@
body.page-homepage {
+ height: 100vh;
+
main {
background-repeat: no-repeat;
background-size: cover;
diff --git a/static/src/scss/_mixins.scss b/static/src/scss/_mixins.scss
index 4893714..c4ae385 100644
--- a/static/src/scss/_mixins.scss
+++ b/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;
}
}
diff --git a/static/src/scss/_navbar.scss b/static/src/scss/_navbar.scss
index 09959e3..f3168b5 100644
--- a/static/src/scss/_navbar.scss
+++ b/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;
+ }
+}
diff --git a/static/src/scss/_variables.scss b/static/src/scss/_variables.scss
new file mode 100644
index 0000000..0f1627e
--- /dev/null
+++ b/static/src/scss/_variables.scss
@@ -0,0 +1,2 @@
+$dark-mode-background: $dark;
+$dark-mode-text: $grey-lighter;
diff --git a/static/src/scss/base.scss b/static/src/scss/base.scss
index 06e07b2..8ccdff8 100644
--- a/static/src/scss/base.scss
+++ b/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%);
+ }
}
diff --git a/website/common/templates/common/content_page.html b/website/common/templates/common/content_page.html
index 10ecd60..814525f 100644
--- a/website/common/templates/common/content_page.html
+++ b/website/common/templates/common/content_page.html
@@ -13,7 +13,8 @@
{% block extra_css %}
-
+
+
{% endblock %}
{% block extra_js %}