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

Document syntax highlighting theme switching in blog post

Browse source
This commit is contained in:
Russell Ballestrini 2025-10-13 11:49:45 -04:00
parent ac9fb10063
commit 1f310836ff
1 changed files with 37 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

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

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