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, 10 insertions, 0 deletions

diff --git a/pydis_site/static/css/home/index.css b/pydis_site/static/css/home/index.css
index e117a35b..23e27be1 100644
--- a/pydis_site/static/css/home/index.css
+++ b/pydis_site/static/css/home/index.css
@@ -91,6 +91,11 @@ h1 {
     height: 26px;
     z-index: 3;
 }
+[data-theme="dark"] {
+    #bottom-wave {
+        background: url(../../images/waves/wave_black.svg) repeat-x !important;
+    }
+}
 
 @keyframes wave {
   0% {
@@ -176,6 +181,11 @@ h1 {
 #projects .card:hover .card-header-title {
     color: #363636;
 }
+[data-theme="dark"] {
+    #projects .card:hover .card-header-title {
+        color: #CAD6FF;
+    }
+}
 
 #projects .card-content {
     padding-top: 8px;