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:
parent
491ed9a521
commit
a7ea62fcd0
2 changed files with 39 additions and 8 deletions
|
@ -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) => {
|
||||
|
|
|
@ -42,7 +42,7 @@ endif;
|
|||
<script type="text/javascript" data-cfasync="false" src="js/base-x-4.0.0.js" integrity="sha512-nNPg5IGCwwrveZ8cA/yMGr5HiRS5Ps2H+s0J/mKTPjCPWUgFGGw7M5nqdnPD3VsRwCVysUh3Y8OWjeSKGkEQJQ==" crossorigin="anonymous"></script>
|
||||
<script type="text/javascript" data-cfasync="false" src="js/rawinflate-0.3.js" integrity="sha512-g8uelGgJW9A/Z1tB6Izxab++oj5kdD7B4qC7DHwZkB6DGMXKyzx7v5mvap2HXueI2IIn08YlRYM56jwWdm2ucQ==" crossorigin="anonymous"></script>
|
||||
<script type="text/javascript" data-cfasync="false" src="js/bootstrap-5.3.3.js" integrity="sha512-in2rcOpLTdJ7/pw5qjF4LWHFRtgoBDxXCy49H4YGOcVdGiPaQucGIbOqxt1JvmpvOpq3J/C7VTa0FlioakB2gQ==" crossorigin="anonymous"></script>
|
||||
<script type="text/javascript" data-cfasync="false" src="js/dark-mode-switch.js?<?php echo rawurlencode($VERSION); ?>" integrity="sha512-Az8HG0zbZ+yisIA5bRykjmXwC1Rv2KZ/freagwMdikN4eLO0ZDKNawJzcvqTO+y5kZHgyoTW2s3f39y+cCOVwQ==" crossorigin="anonymous"></script>
|
||||
<script type="text/javascript" data-cfasync="false" src="js/dark-mode-switch.js?<?php echo rawurlencode($VERSION); ?>" integrity="sha512-xdW325H1OW06oUf/Lc4ccJXOUW41tU08iyXVOiVL3SbTufQtKVWi1/cQPrWZ3FagPTNL2CwDMqZsHNmXruHnHg==" crossorigin="anonymous"></script>
|
||||
<?php
|
||||
if ($SYNTAXHIGHLIGHTING) :
|
||||
?>
|
||||
|
|
Loading…
Reference in a new issue