mirror of
https://github.com/thangisme/notes.git
synced 2024-12-22 19:16:47 -05:00
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!
This commit is contained in:
parent
721484a26e
commit
eabe7b2585
23
assets/js/dark-mode-preview.js
Normal file
23
assets/js/dark-mode-preview.js
Normal file
@ -0,0 +1,23 @@
|
||||
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)
|
||||
}
|
||||
})
|
||||
})
|
@ -46,20 +46,7 @@ color_scheme: "dark"
|
||||
```
|
||||
<button class="btn js-toggle-dark-mode">Preview dark color scheme</button>
|
||||
|
||||
<script>
|
||||
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')
|
||||
|
||||
addEvent(toggleDarkMode, 'click', function(){
|
||||
if (cssFile.getAttribute('href') === originalCssRef) {
|
||||
cssFile.setAttribute('href', darkModeCssRef)
|
||||
} else {
|
||||
cssFile.setAttribute('href', originalCssRef)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<script type="text/javascript" src="{{ "/assets/js/dark-mode-preview.js" | absolute_url }}"></script>
|
||||
|
||||
See [Customization]({{ site.baseurl }}{% link docs/customization.md %}) for more information.
|
||||
|
||||
|
@ -34,20 +34,7 @@ color_scheme: "dark"
|
||||
```
|
||||
<button class="btn js-toggle-dark-mode">Preview dark color scheme</button>
|
||||
|
||||
<script>
|
||||
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')
|
||||
|
||||
addEvent(toggleDarkMode, 'click', function(){
|
||||
if (cssFile.getAttribute('href') === originalCssRef) {
|
||||
cssFile.setAttribute('href', darkModeCssRef)
|
||||
} else {
|
||||
cssFile.setAttribute('href', originalCssRef)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<script type="text/javascript" src="{{ "/assets/js/dark-mode-preview.js" | absolute_url }}"></script>
|
||||
|
||||
## Specific visual customization
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user