thang/notes
1
0
Fork 0
mirror of https://github.com/thangisme/notes.git synced 2025-01-03 10:06:24 -05:00
Code Issues Projects Releases Wiki Activity

Merge pull request #153 from jacobherrington/change-theme-button-text

Browse Source 
Change button copy on theme preview
This commit is contained in:
Patrick Marsceill 2019-09-09 16:06:33 -04:00 committed by GitHub
commit 900639b02c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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

@ -75,20 +75,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');
jtd.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');
jtd.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