Add progressive enhancement section for hiding theme buttons without JavaScript

content/2025-10-11-pelican-theme-upgrade-right-sidebar-toc.rst

@@ -179,6 +179,40 @@ The UncloseAI button required special handling with hardcoded colors and ``!impo
    border: 2px solid #ffffff !important;
  }
 
+**Progressive Enhancement - Hiding Buttons Without JavaScript**
+
+The theme toggle buttons only work when JavaScript is enabled, so they should be hidden when JavaScript is disabled. This is accomplished using progressive enhancement:
+
+.. code-block:: css
+
+ /* Hide theme toggle buttons by default */
+ #theme-toggle,
+ #mobile-theme-toggle {
+   display: none;
+ }
+
+ /* Show buttons only when JavaScript is enabled */
+ .js-enabled #theme-toggle,
+ .js-enabled #mobile-theme-toggle {
+   display: inline-block;
+ }
+
+The ``js-enabled`` class is added to the document element in the same inline script that handles flash-of-unstyled-content prevention:
+
+.. code-block:: javascript
+
+ (function() {
+   // Add js-enabled class to show theme toggle buttons
+   document.documentElement.classList.add('js-enabled');
+
+   const savedTheme = localStorage.getItem('theme');
+   if (savedTheme === 'light') {
+     document.documentElement.classList.add('light-mode');
+   }
+ })();
+
+This approach ensures the buttons are never visible if they can't function. Without JavaScript, users still get a perfectly usable site in the default dark theme - they just don't see non-functional toggle buttons cluttering the interface.
+
 what's next
 ===========