mirror of
https://github.com/thangisme/notes.git
synced 2024-09-06 18:24:30 -04:00
Merge pull request #153 from jacobherrington/change-theme-button-text
Change button copy on theme preview
This commit is contained in:
commit
900639b02c
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)
|
||||
}
|
||||
})
|
||||
})
|
@ -75,20 +75,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');
|
||||
|
||||
jtd.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');
|
||||
|
||||
jtd.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