russellballestrini/russell.ballestrini.net
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

Add progressive enhancement section for hiding theme buttons without JavaScript

Browse source
This commit is contained in:
Russell Ballestrini 2025-10-11 14:08:36 -04:00
parent 1e709abe6a
commit 9c7d0592d6
1 changed files with 34 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -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
===========