steve/just-the-docs
1
0
Fork 0
mirror of https://github.com/snachodog/just-the-docs.git synced 2025-04-17 00:22:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

Change button copy on theme preview

Browse Source 
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:
jacobherrington 2019-06-21 18:19:49 -05:00
parent 721484a26e
commit eabe7b2585
3 changed files with 25 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
assets/js/dark-mode-preview.js Normal file
View 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)
}
})
})

15
docs/configuration.md
View File

@ -46,20 +46,7 @@ color_scheme: "dark"
``` ```
<button class="btn js-toggle-dark-mode">Preview dark color scheme</button> <button class="btn js-toggle-dark-mode">Preview dark color scheme</button>
<script> <script type="text/javascript" src="{{ "/assets/js/dark-mode-preview.js" | absolute_url }}"></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>
See [Customization]({{ site.baseurl }}{% link docs/customization.md %}) for more information. See [Customization]({{ site.baseurl }}{% link docs/customization.md %}) for more information.

15
docs/customization.md
View File

@ -34,20 +34,7 @@ color_scheme: "dark"
``` ```
<button class="btn js-toggle-dark-mode">Preview dark color scheme</button> <button class="btn js-toggle-dark-mode">Preview dark color scheme</button>
<script> <script type="text/javascript" src="{{ "/assets/js/dark-mode-preview.js" | absolute_url }}"></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>
## Specific visual customization ## Specific visual customization