diff --git a/assets/js/dark-mode-preview.js b/assets/js/dark-mode-preview.js new file mode 100644 index 0000000..addfb27 --- /dev/null +++ b/assets/js/dark-mode-preview.js @@ -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) + } + }) +}) \ No newline at end of file diff --git a/docs/configuration.md b/docs/configuration.md index 872e170..eb43a08 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -75,20 +75,7 @@ color_scheme: "dark" ``` - + See [Customization]({{ site.baseurl }}{% link docs/customization.md %}) for more information. diff --git a/docs/customization.md b/docs/customization.md index a3d5b6f..8411b69 100644 --- a/docs/customization.md +++ b/docs/customization.md @@ -34,20 +34,7 @@ color_scheme: "dark" ``` - + ## Specific visual customization