// Obtén el elemento
const htmlElement = document.querySelector('html');
let btnMode = document.getElementById("mode");
let cont_svg_icon_theme = document.getElementsByClassName('icon_theme')[0];
let ico_home = document.getElementsByClassName("bi-house-fill")[0];
let cursor = document.getElementById("cursor");
let codeTag = document.getElementsByTagName("code");
let news_banner = document.querySelector('div.ticker-wrapper-h');
btnMode.addEventListener("click", () => {
// light mode
// bi bi-moon-stars-fill
// bi bi-sun-fill
if (btnMode.className == 'bi bi-sun-fill') {
btnMode.setAttribute('class', 'bi bi-moon-stars-fill');
news_banner.classList.toggle("nb_darkmode");
htmlElement.setAttribute('data-bs-theme', 'light');
set_theme_site("light");
cont_svg_icon_theme.setAttribute("id", 'theme_icon_sun');
ico_home.style.color = 'black';
color_path("black");
// code_lightMode
tagCodeTheme('code_lightMode');
// dark mode
} else {
btnMode.setAttribute('class', 'bi bi-sun-fill');
news_banner.classList.toggle("nb_lightmode");
htmlElement.setAttribute('data-bs-theme', 'dark');
set_theme_site("dark");
cont_svg_icon_theme.setAttribute("id", 'theme_icon_moon');
ico_home.style.color = 'white';
color_path("white");
tagCodeTheme('code_darkMode');
}
});
function set_theme_site(theme_mode) {
if (localStorage != null) {
localStorage.setItem("theme", theme_mode);
}
}
function get_theme_site() {
if (localStorage != null) {
let mode = localStorage.getItem("theme");
return mode;
}
}
// switchCodeTheme
function tagCodeTheme(classNameTheme) {
// code_lightMode | code_darktMode
len_elements = codeTag.length;
let c = 0;
for (; c < len_elements; c++) {
codeTag[c].setAttribute('class', classNameTheme);
}
}
function color_path(color_elements) {
let pth = document.querySelectorAll("li.breadcrumb-item");
pth.forEach(ele => {
if (ele.children[0].nodeName == 'A') {
ele.children[0].style.color = color_elements;
}
});
}
// establecer el tema guardado en la base de datos
(() => {
if (localStorage != null) {
if (localStorage.getItem('theme')) {
// establecer en el html el tema
htmlElement.setAttribute('data-bs-theme', get_theme_site());
let current_theme = get_theme_site();
// dark mode
if (current_theme == 'dark') {
btnMode.setAttribute('class', 'bi bi-sun-fill');
cont_svg_icon_theme.setAttribute("id", 'theme_icon_moon');
ico_home.style.color = 'white';
cursor.style.backgroundColor = 'white';
color_path("white");
news_banner.classList.toggle("nb_darkmode");
tagCodeTheme("code_darktMode");
// light mode
} else {
btnMode.setAttribute('class', 'bi bi-moon-stars-fill');
cont_svg_icon_theme.setAttribute("id", 'theme_icon_sun');
ico_home.style.color = 'black';
color_path("black");
news_banner.classList.toggle("nb_lightmode");
tagCodeTheme("code_lightMode");
}
}
}
})();