Document syntax highlighting theme switching in blog post

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 </capability-driven-presentation/>`_ post from 2016. For more on resilient web design philosophy, I highly recommend the free online book `Resilient Web Design <https://resilientwebdesign.com/>`_ 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
+
+ <!-- Dark mode syntax highlighting (default) -->
+ <link rel="stylesheet" href="/theme/css/pygments-dark.css" id="pygments-dark">
+ <!-- Light mode syntax highlighting -->
+ <link rel="stylesheet" href="/theme/css/pygments-light.css" id="pygments-light" disabled>
+
+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::