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::