Keep button graphics visible in dark mode using filter instead of hiding background

Co-authored-by: ulysses4ever <[email protected]>

Author: Copilot

docs/assets/css/dark-mode.css

@@ -137,7 +137,13 @@ body.dark-mode {
 body.dark-mode #newsplash {
     color: #e0e0e0;
     background-color: #1a1a1a !important;
-    background-image: none !important;
+    /* Dim the background image instead of hiding it */
+    filter: brightness(0.4) contrast(1.2);
+}
+
+/* Prevent filter from affecting child elements */
+body.dark-mode #newsplash > div {
+    filter: brightness(2.5) contrast(0.83);
 }
 
 body.dark-mode .newsplash a.nostarchlink {
@@ -148,29 +154,12 @@ body.dark-mode .newsplash a.nostarchlink:hover {
     color: #ff6666;
 }
 
-/* Make index page buttons visible in dark mode */
+/* Make index page buttons slightly more visible in dark mode without hiding graphics */
 body.dark-mode #faq-button,
 body.dark-mode #book-button,
 body.dark-mode #read-button {
-    text-indent: 0;
-    background-color: rgba(102, 179, 255, 0.15);
-    border: 2px solid #66b3ff;
-    border-radius: 8px;
-    color: #66b3ff;
-    font-weight: bold;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    transition: all 0.3s ease;
-}
-
-body.dark-mode #faq-button:hover,
-body.dark-mode #book-button:hover,
-body.dark-mode #read-button:hover {
-    background-color: rgba(102, 179, 255, 0.25);
-    color: #ff6666;
-    border-color: #ff6666;
+    /* Keep the buttons as clickable areas over the dimmed graphics */
+    opacity: 1;
 }
 
 /* Handle image backgrounds in dark mode */