You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
42 lines
1.4 KiB
JavaScript
42 lines
1.4 KiB
JavaScript
2 years ago
|
document.addEventListener('DOMContentLoaded', function () {
|
||
|
|
renderMathInElement(document.body, {
|
||
|
|
delimiters: [
|
||
|
|
{ left: '$', right: '$', display: false },
|
||
|
|
{ left: '$$', right: '$$', display: true },
|
||
|
|
{ left: '\\(', right: '\\)', display: false },
|
||
|
|
{ left: '\\[', right: '\\]', display: true },
|
||
|
|
],
|
||
|
|
})
|
||
|
|
})
|
||
|
|
|
||
|
|
document.addEventListener('DOMContentLoaded', () => {
|
||
|
|
const $toggle = document.querySelector('#toggle-dark-mode')
|
||
|
|
const $toggleIcon = document.querySelector('#toggle-dark-mode i')
|
||
|
|
|
||
|
|
// Loads preferred dark from from localStorage or defaults to media query.
|
||
|
|
let prefersDarkMode =
|
||
|
|
localStorage.getItem('theme') !== undefined
|
||
|
|
? localStorage.getItem('theme') === 'dark'
|
||
|
|
: window.matchMedia('(prefers-color-scheme: dark)').matches
|
||
|
|
|
||
|
|
function storePrefersDarkMode(mode) {
|
||
|
|
prefersDarkMode = mode
|
||
|
|
localStorage.setItem('theme', mode ? 'dark' : 'light')
|
||
|
|
}
|
||
|
|
|
||
|
|
function displayToggle() {
|
||
|
|
document.body.classList.toggle('dark-mode', prefersDarkMode)
|
||
|
|
$toggleIcon.classList.toggle('fa-moon', prefersDarkMode)
|
||
|
|
$toggleIcon.classList.toggle('fa-sun', !prefersDarkMode)
|
||
|
|
|
||
|
|
document.dispatchEvent(new CustomEvent('theme:change'))
|
||
|
|
}
|
||
|
|
|
||
|
|
$toggle.addEventListener('click', () => {
|
||
|
|
storePrefersDarkMode(!prefersDarkMode)
|
||
|
|
displayToggle()
|
||
|
|
})
|
||
|
|
|
||
|
|
displayToggle()
|
||
|
|
})
|