diff --git a/content/2025-10-11-pelican-theme-upgrade-right-sidebar-toc.rst b/content/2025-10-11-pelican-theme-upgrade-right-sidebar-toc.rst index b08b605..952ca64 100644 --- a/content/2025-10-11-pelican-theme-upgrade-right-sidebar-toc.rst +++ b/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 ===========