engineering/opencompletion.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve code highlighter theme for dark mode

Browse source 
- Switch from default highlight.js theme to GitHub themes
- Use github-dark theme for dark mode with better color contrast
- Use github theme for light mode
- Dynamically switch themes when user toggles dark/light mode
- Apply correct theme on page load based on saved preferences
This commit is contained in:
Claude 2025-11-08 15:59:26 +00:00
parent 48fc6f472f
commit b61f7944d3
No known key found for this signature in database
1 changed files with 20 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

22
templates/base.html
View file

@ -7,8 +7,9 @@
<!-- Include highlight.js library for syntax highlighting --> <!-- Include highlight.js library for syntax highlighting -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>
<!-- Include a highlight.js theme (replace 'default' with your preferred theme) --> <!-- Include highlight.js themes for light and dark modes -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/default.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/github.min.css" id="highlight-theme-light">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/github-dark.min.css" id="highlight-theme-dark" disabled>
<!-- Include socket.io for real-time bidirectional event-based communication --> <!-- Include socket.io for real-time bidirectional event-based communication -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.min.js"></script>
@ -863,6 +864,22 @@
// Update button text for both desktop and mobile // Update button text for both desktop and mobile
updateThemeButtonText(newTheme); updateThemeButtonText(newTheme);
// Switch highlight.js theme
updateHighlightTheme(newTheme);
}
function updateHighlightTheme(theme) {
const lightTheme = document.getElementById('highlight-theme-light');
const darkTheme = document.getElementById('highlight-theme-dark');
if (theme === 'dark') {
lightTheme.disabled = true;
darkTheme.disabled = false;
} else {
lightTheme.disabled = false;
darkTheme.disabled = true;
}
} }
function updateThemeButtonText(theme) { function updateThemeButtonText(theme) {
@ -883,6 +900,7 @@
const savedTheme = localStorage.getItem('theme') || 'light'; const savedTheme = localStorage.getItem('theme') || 'light';
document.documentElement.setAttribute('data-theme', savedTheme); document.documentElement.setAttribute('data-theme', savedTheme);
updateThemeButtonText(savedTheme); updateThemeButtonText(savedTheme);
updateHighlightTheme(savedTheme);
} }
// Apply theme immediately (before DOMContentLoaded to prevent flash) // Apply theme immediately (before DOMContentLoaded to prevent flash)