Komponenty/Switch theme/script.js

90 lines
2.8 KiB
JavaScript

// Dark / Light Mode
const body = document.querySelector("body");
const head = document.querySelector("header");
const links = document.querySelectorAll("a");
const nav = document.querySelector(".navigation");
const h1 = document.querySelector("h1");
const nadpish2 = document.querySelectorAll("h2");
const p = document.querySelector("p");
const solid = document.querySelector(".fa-solid");
const solid1 = document.querySelector(".menu-icon");
const footer = document.querySelector("footer");
const gotop = document.querySelector("#scrollToTopBtn");
const theme = document.querySelector("#toggleButton");
const box = document.querySelectorAll(".code-box");
const form = document.querySelector(".log");
let isDraculaMode = false;
// Funkce pro nastavení stylů pro Dracula mód
function setDraculaStyles() {
body.style.backgroundColor = "#2a232b";
body.style.color = "#f8f8f2";
head.style.backgroundColor = "#2a232b";
theme.style.color = "#9fea8a";
gotop.style.color = "#9fea8a";
links.forEach((a) => {
a.style.color = "#f76b00";
});
nav.style.backgroundColor = "#2a232b";
h1.style.color = "#e54472";
nadpish2.forEach((h2) => {
h2.style.color = "#18f700";
});
solid.style.backgroundColor = "#2a232b";
solid.style.color = "#f76b00";
solid1.style.backgroundColor = "#2a232b";
footer.style.backgroundColor = "#2a232b";
//gotop.style.backgroundColor = "#18f700";
//theme.style.backgroundColor = "#18f700";
form.style.backgroundColor = "#18f700";
form.style.color = "black";
}
// Funkce pro nastavení stylů pro Light mód;
function setKakouneStyles() {
body.style.backgroundColor = "#9fea8a";
body.style.color = "#282a36";
h1.style.color = "#e84046";
theme.style.color = "#2a232b";
links.forEach((a) => {
a.style.color = "#ea3838";
});
gotop.style.color = "#2a232b";
head.style.backgroundColor = "#9fea8a";
nav.style.backgroundColor = "#9fea8a";
solid.style.backgroundColor = "#9fea8a";
solid1.style.backgroundColor = "#9fea8a";
footer.style.backgroundColor = "#9fea8a";
nadpish2.forEach((h2) => {
h2.style.color = "#1909f4";
});
//gotop.style.backgroundColor = "#a7e6ef";
//theme.style.backgroundColor = "#a7e6ef";
box.forEach((p) => {
p.style.color = "white";
});
form.style.backgroundColor = "#1909f4";
form.style.color = "white";
}
// Funkce pro přepnutí módu
function toggleMode() {
if (isDraculaMode) {
// Pokud je momentálně v Dracula modu, přepnout na Light mód
setKakouneStyles();
isDraculaMode = false;
} else {
// Pokud je momentálně v Light modu, přepnout na Dracula mód
setDraculaStyles();
isDraculaMode = true;
}
}
// Funkce na změnu stylů
document.getElementById("toggleButton").addEventListener("click", toggleMode);
// Nastavení - výchozí styl na Light(Kakoune)
setKakouneStyles();
isDraculaMode = true;