From 2a46a70620f302824b30276e94d38b02145999b6 Mon Sep 17 00:00:00 2001 From: Jake Howard Date: Sat, 20 Aug 2022 17:45:12 +0100 Subject: [PATCH] Add more elements to the dark mode --- requirements/base.txt | 2 +- requirements/dev.txt | 2 +- static/src/js/darkmode.js | 17 +++++++--- static/src/scss/_blocks.scss | 12 +++++++ static/src/scss/_content.scss | 6 ++++ static/src/scss/_footer.scss | 4 +-- static/src/scss/_hero.scss | 32 +++++++++++++++++++ static/src/scss/_homepage.scss | 2 ++ static/src/scss/_mixins.scss | 6 ++-- static/src/scss/_navbar.scss | 10 ++++++ static/src/scss/_variables.scss | 2 ++ static/src/scss/base.scss | 20 +++++++++++- .../common/templates/common/content_page.html | 3 +- 13 files changed, 105 insertions(+), 13 deletions(-) create mode 100644 static/src/scss/_variables.scss 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 %}