[docs] Move theme toggle (sun icon) into header (#2090)

**Link the Issue(s) this Pull Request is related to.**
Fixes #1894

**Summarize your change.**
Modified header_custom.html file to append the theme button element to
aux-nav-list instead of directly to the document body. This improves
visibility.

<img width="1165" height="339" alt="Screenshot 2025-12-02 at 11 31
27 PM"
src="https://github.com/user-attachments/assets/a1c99a3c-fae1-4c11-872c-0833389778c2"
/>


<!--
For a step-by-step list to walk you through the pull request process,
see
https://www.opencue.io/contributing/.

Please add unit tests for any new code. This helps our project maintain
code quality and ensure
future changes don't break anything. If you're stuck on this or not sure
how to proceed, feel
free to create a Draft Pull Request and ask one of the OpenCue
committers for advice.
-->

[docs] Fix theme toggle issues from header migration

- Add null check for aux-nav-list to prevent TypeError
- Remove orphaned CSS properties (top, right, align-items, gap) that had
no effect without position:fixed and display:flex
- Fix typos in comments
- Update function comment to reflect new behavior

---------

Signed-off-by: silvialpz <[email protected]>
Signed-off-by: Ramon Figueiredo <[email protected]>
Co-authored-by: Ramon Figueiredo <[email protected]>

Author: silvialpz

docs/_includes/header_custom.html

@@ -2423,8 +2423,8 @@
     });
   }
 
-  // Add theme toggle button as floating button
-  function addThemeToggleToMainArea() {
+  // Add theme toggle button to auxiliary navigation
+  function addThemeToggleToAuxNav() {
     if (!document.getElementById('main-theme-toggle')) {
       const themeButton = document.createElement('button');
       themeButton.id = 'main-theme-toggle';
@@ -2434,10 +2434,6 @@
 
       // Style the button to be clearly visible
       themeButton.style.cssText = `
-        position: fixed !important;
-        top: 80px !important;
-        right: calc(50% - 440px) !important;
-        z-index: 9999 !important;
         background: #6b7280 !important;
         color: white !important;
         border: none !important;
@@ -2446,9 +2442,6 @@
         font-size: 16px !important;
         cursor: pointer !important;
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
-        display: flex !important;
-        align-items: center !important;
-        gap: 8px !important;
         font-weight: 500 !important;
         transition: all 0.2s ease !important;
         white-space: nowrap !important;
@@ -2481,8 +2474,19 @@
         updateMainThemeButton();
         updateNavigationThemeLink();
       });
-      
-      document.body.appendChild(themeButton);
+
+
+      const auxNavList = document.querySelector('.aux-nav-list');
+      const auxNavList = document.querySelector('.aux-nav-list');
+      if (!auxNavList) {
+        console.warn('aux-nav-list not found, cannot add theme toggle');
+        return;
+      }
+      // Create a list item to wrap the themeButton
+      const listItem = document.createElement('li');
+      listItem.className = 'aux-nav-list-item';
+      listItem.appendChild(themeButton);
+      auxNavList.appendChild(listItem);
       updateMainThemeButton();
     }
   }
@@ -2506,7 +2510,7 @@
   }
 
   // Add main theme button after page loads
-  setTimeout(addThemeToggleToMainArea, 200);
+  setTimeout(addThemeToggleToAuxNav, 200);
 
   // Function to update navigation theme link
   function updateNavigationThemeLink() {