Add theme-aware support links and gamepad icons

Introduce .support-card-link CSS to ensure support page anchors use the correct text and hover colors across themes, and update support.html to apply this class to the support cards instead of the hardcoded link-light class. In assets/js/gamepad-tester.js add a MutationObserver to listen for data-bs-theme changes (reinitializing button images when the theme changes) and select Black/White icon variants based on the current theme so controller button images remain visible in both light and dark modes.

Author: ReenigneArcher

_sass/styles.scss

@@ -289,6 +289,15 @@ table tr:nth-child(2n) {
   color: var(--hover-col);
 }
 
+/* Support card link styling */
+.support-card-link {
+  color: var(--text-col);
+}
+
+.support-card-link:hover {
+  color: var(--link-col);
+}
+
 /* Language icons - add shadow in light mode for visibility */
 [data-bs-theme="light"] .language-logo {
   filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 1));

assets/js/gamepad-tester.js

@@ -17,6 +17,24 @@ document.addEventListener('DOMContentLoaded', function() {
         return;
     }
 
+    // Watch for theme changes to update button images
+    const themeObserver = new MutationObserver(function(mutations) {
+        mutations.forEach(function(mutation) {
+            if (mutation.type === 'attributes' && mutation.attributeName === 'data-bs-theme') {
+                // Theme changed, reinitialize buttons with new color scheme
+                if (activeGamepadIndex !== null) {
+                    initGamepadButtons();
+                }
+            }
+        });
+    });
+
+    // Start observing theme changes on the document element
+    themeObserver.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ['data-bs-theme']
+    });
+
     // Setup gamepad event listeners
     window.addEventListener("gamepadconnected", function(e) {
         gamepads[e.gamepad.index] = e.gamepad;
@@ -158,12 +176,17 @@ document.addEventListener('DOMContentLoaded', function() {
 
         const controllerType = gamepadHelper.detectControllerType(gamepad.id);
 
+        // Detect current theme - use Black icons for light theme, White icons for dark theme
+        const isDarkTheme = document.documentElement.getAttribute('data-bs-theme') === 'dark';
+        const colorScheme = isDarkTheme ? 'White' : 'Black';
+
         for (let i = 0; i < gamepad.buttons.length; i++) {
             const buttonName = gamepadHelper.getButtonName(controllerType, i);
             const buttonImagePath = gamepadHelper.getButtonImagePath(
                 controllerType,
                 i,
                 `https://cdn.jsdelivr.net/npm/@lizardbyte/gamepad-helper@${gamepadHelperVersion}/assets/img/gamepads/`,
+                colorScheme
             );
 
             const buttonDiv = document.createElement('div');

support.html

@@ -25,7 +25,7 @@ <h1>
                 </h1>
             </div>
             <div class="col-sm-auto border-white my-3 px-3 py-2 border-start">
-                <a class="text-decoration-none link-light stretched-link"
+                <a class="text-decoration-none support-card-link stretched-link"
                         href="https://docs.lizardbyte.dev/latest/about/overview.html"
                         target="_blank">
                     <h4 class="card-title mb-3 fw-bolder crowdin-ignore">Read the Docs</h4>
@@ -68,7 +68,7 @@ <h1>
                 </h1>
             </div>
             <div class="col-sm-auto border-white my-3 px-3 py-2 border-start">
-                <a class="text-decoration-none link-light stretched-link"
+                <a class="text-decoration-none support-card-link stretched-link"
                         href="{{ '/discord' | relative_url }}">
                     <h4 class="card-title mb-3 fw-bolder crowdin-ignore">Discord</h4>
                 </a>
@@ -99,7 +99,7 @@ <h1>
                 </h1>
             </div>
             <div class="col-sm-auto border-white my-3 px-3 py-2 border-start">
-                <a class="text-decoration-none link-light stretched-link"
+                <a class="text-decoration-none support-card-link stretched-link"
                         href="https://github.com/orgs/LizardByte/discussions">
                     <h4 class="card-title mb-3 fw-bolder crowdin-ignore">GitHub</h4>
                 </a>
@@ -129,7 +129,7 @@ <h1>
                 </h1>
             </div>
             <div class="col-sm-auto border-white my-3 px-3 py-2 border-start">
-                <a class="text-decoration-none link-light stretched-link"
+                <a class="text-decoration-none support-card-link stretched-link"
                         href="https://www.reddit.com/r/LizardByte" target="_blank">
                     <h4 class="card-title mb-3 fw-bolder crowdin-ignore">Reddit</h4>
                 </a>