// If you know how to do this properly feel free to open a PR.
// This is a quick and very dirty script to change the theme of the page.
// Icons Downloaded from : https://remixicon.com/
const MOON = ``;
const SUN = ``;
function createThemeButton() {
let div = document.createElement('button');
div.innerHTML = "";
div.innerHTML += `
${MOON.trim()}
`;
div.innerHTML += `
${SUN.trim()}
`;
div.classList.add('sidebar-toggle');
div.classList.add('theme');
return div;
}
function toggleTheme() {
function _toggleTheme(enable, disable) {
document.querySelectorAll(`.theme-${enable}`).forEach(function(el) {
el.removeAttribute("disabled");
});
document.querySelectorAll(`.theme-${disable}`).forEach(function(el) {
el.setAttribute("disabled", '');
});
}
// Yup, I have no idea how JS/CSS works together.
const isLight = !document.querySelector(".theme-light").hasAttribute("disabled");
if (isLight) {
_toggleTheme('dark', 'light');
document.querySelector("#icon-sun").style.display = 'flex';
document.querySelector("#icon-moon").style.display = 'none';
} else {
_toggleTheme('light', 'dark');
document.querySelector("#icon-moon").style.display = 'flex';
document.querySelector("#icon-sun").style.display = 'none';
}
}
function onDocsifyReady() {
// TODO: store the theme in the localStorage.
let theme_toggle = createThemeButton();
let main = document.querySelector('main');
let sidebar_toggle = main.querySelector('.sidebar-toggle');
main.insertBefore(theme_toggle, sidebar_toggle);
theme_toggle.onclick = function() {
toggleTheme();
}
}