1
0
mirror of https://github.com/thangisme/notes.git synced 2024-11-10 15:46:11 -05:00
notes/assets/js/dark-mode-preview.js
jacobherrington eabe7b2585 Change button copy on theme preview
This commit makes the dark mode preview feel a little more interactive
and it also pulls some duplicated code into one file so that people like
me aren't stumped when they are looking at the wrong page!
2019-06-21 18:19:49 -05:00

23 lines
944 B
JavaScript

document.addEventListener("DOMContentLoaded", function(){
const toggleDarkMode = document.querySelector('.js-toggle-dark-mode')
const cssFile = document.querySelector('[rel="stylesheet"]')
const originalCssRef = cssFile.getAttribute('href')
const darkModeCssRef = originalCssRef.replace('just-the-docs.css', 'dark-mode-preview.css')
const buttonCopy = ['Return to the light side', 'Preview dark color scheme']
const updateButtonText = function(toggleDarkMode) {
toggleDarkMode.textContent === buttonCopy[0] ?
toggleDarkMode.textContent = buttonCopy[1] :
toggleDarkMode.textContent = buttonCopy[0]
}
addEvent(toggleDarkMode, 'click', function(){
if (cssFile.getAttribute('href') === originalCssRef) {
cssFile.setAttribute('href', darkModeCssRef)
updateButtonText(toggleDarkMode)
} else {
cssFile.setAttribute('href', originalCssRef)
updateButtonText(toggleDarkMode)
}
})
})