bootstrap 5 prettify dark theme support

current status:
- made prettify theme work with dark mode

to be done:
- fix password modal display
- add "Dark Mode" to translation strings
- check tab alignment in HTML source
This commit is contained in:
El RIDO 2024-04-19 14:00:49 +02:00
parent 491ed9a521
commit a7ea62fcd0
No known key found for this signature in database
GPG key ID: 0F5C940A6BD81F92
2 changed files with 39 additions and 8 deletions

View file

@ -2,7 +2,7 @@
* Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
* Copyright 2011-2024 The Bootstrap Authors
* Licensed under the Creative Commons Attribution 3.0 Unported License.
* Modified to work with a simpler checkbox toggle
* Modified to work with a simpler checkbox toggle & support prettify CSS themes
*/
(() => {
@ -20,15 +20,39 @@
return getPreferredTheme()
}
const setTheme = theme => {
if (theme === 'auto') {
document.documentElement.setAttribute('data-bs-theme', getPreferredTheme())
} else {
document.documentElement.setAttribute('data-bs-theme', theme)
const delStoredPrettifyTheme = () => localStorage.removeItem('themePrettify')
const getStoredPrettifyTheme = () => localStorage.getItem('themePrettify')
const setStoredPrettifyTheme = theme => localStorage.setItem('themePrettify', theme)
const getPrettifyThemeLink = () => {
for (const sheet of document.getElementsByTagName('link')) {
if (sheet.rel === 'stylesheet' && sheet.href.includes('css/prettify/') && !sheet.href.includes('css/prettify/prettify.css')) {
return sheet
}
}
return null
}
setTheme(getStoredPreferredTheme())
const setTheme = theme => {
const preferredTheme = theme === 'auto' ? getPreferredTheme() : theme
document.documentElement.setAttribute('data-bs-theme', preferredTheme)
const sheetPrettify = getPrettifyThemeLink()
if (sheetPrettify) {
sheetPrettify.remove()
}
const link = document.createElement('link')
link.rel = 'stylesheet'
if (preferredTheme === 'dark') {
link.href = 'css/prettify/sons-of-obsidian.css'
document.head.appendChild(link)
} else {
const themePrettify = getStoredPrettifyTheme()
if (themePrettify) {
link.href = themePrettify
document.head.appendChild(link)
}
}
}
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
const storedTheme = getStoredTheme()
@ -38,6 +62,13 @@
})
window.addEventListener('DOMContentLoaded', () => {
const sheetPrettify = getPrettifyThemeLink()
if (sheetPrettify) {
setStoredPrettifyTheme(sheetPrettify.href)
} else {
delStoredPrettifyTheme()
}
setTheme(getStoredPreferredTheme())
const toggle = document.querySelector('#bd-theme')
toggle.checked = getStoredTheme() === 'dark'
toggle.addEventListener('change', (event) => {