Dark: Fix hero colors on homepage

We can now use `[data-theme="dark"]` selector in CSS to defined styles
specifically for dark mode. This follows common web dev patterns and
gives little overhead.

- Hero
  - Added `wave_black` SVG which copies `wave_white` as is but uses the
    site's dark mode background color.

1 files changed, 2 insertions, 0 deletions

diff --git a/pydis_site/static/js/base/navbar.js b/pydis_site/static/js/base/navbar.js
index 04850add..2a57cad4 100644
--- a/pydis_site/static/js/base/navbar.js
+++ b/pydis_site/static/js/base/navbar.js
@@ -30,6 +30,8 @@ function setStyleSheets(newTheme) {
             darkStylesheet.disabled = false;
             break;
     }
+
+    document.querySelector("html").setAttribute("data-theme", newTheme);
 }
 
 // Reflect chosen theme on the switch toggle.