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 4ccaf1c..7e22f42 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 @@ -273,4 +273,41 @@ This approach ensures the buttons are never visible if they can't function. With This technique follows the same principles we wrote about in the `capability driven presentation `_ post from 2016. For more on resilient web design philosophy, I highly recommend the free online book `Resilient Web Design `_ by Jeremy Keith. +**Syntax Highlighting Theme Switching** + +Code syntax highlighting needed theme-aware styling since most color schemes are designed for either light or dark backgrounds. We implemented automatic switching between Pygments themes: + +- **Dark mode**: Uses the ``monokai`` style with bright colors on dark backgrounds +- **Light mode**: Uses the ``default`` style with dark colors on light backgrounds + +The implementation loads both stylesheets but disables the inactive one: + +.. code-block:: html + + + + + + +The theme toggle function switches between them by enabling/disabling the stylesheets: + +.. code-block:: javascript + + function toggleTheme() { + const pygmentsDark = document.getElementById('pygments-dark'); + const pygmentsLight = document.getElementById('pygments-light'); + + if (root.classList.contains('light-mode')) { + // Switching to dark mode + pygmentsDark.disabled = false; + pygmentsLight.disabled = true; + } else { + // Switching to light mode + pygmentsDark.disabled = true; + pygmentsLight.disabled = false; + } + } + +The flash-of-unstyled-content prevention script also switches the syntax highlighting stylesheet before the page renders, ensuring code blocks always appear with the correct colors. + .. contents::