generated
This commit is contained in:
parent
3df11b3b1a
commit
19d7787e25
65 changed files with 89 additions and 100 deletions
41
js/index.js
41
js/index.js
|
@ -1,3 +1,44 @@
|
|||
window.onload = (event) => {
|
||||
const btn = document.getElementById("theme-toggler");
|
||||
const darkTheme = window.matchMedia("(prefers-color-scheme: dark)");
|
||||
const currentTheme = sessionStorage.getItem("theme");
|
||||
|
||||
if (currentTheme == "dark") {
|
||||
document.body.classList.toggle("dark");
|
||||
} else if (currentTheme == "light") {
|
||||
document.body.classList.toggle("light");
|
||||
btn.classList.toggle("rotate-180");
|
||||
}
|
||||
|
||||
btn.addEventListener("click", function () {
|
||||
btn.classList.toggle("rotate-180");
|
||||
var theme = "dark";
|
||||
if (darkTheme.matches) {
|
||||
document.body.classList.toggle("light");
|
||||
theme = document.body.classList.contains("light") ? "light" : "dark";
|
||||
} else {
|
||||
document.body.classList.toggle("dark");
|
||||
theme = document.body.classList.contains("dark") ? "dark" : "light";
|
||||
}
|
||||
sessionStorage.setItem("theme", theme);
|
||||
});
|
||||
|
||||
if ((document.documentElement.scrollHeight / window.screen.availHeight ) > 1.5) {
|
||||
window.addEventListener("scroll", () => {
|
||||
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
|
||||
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
|
||||
var scrolled = (winScroll / height) * 100;
|
||||
document.getElementById('progress').style.width = scrolled + "%";
|
||||
|
||||
const toTop = document.getElementById('totop');
|
||||
|
||||
if ((window.scrollY > 0 && !toTop.classList.contains("show")) || (window.scrollY <= 0 && toTop.classList.contains("show"))) {
|
||||
toTop.classList.toggle("show");
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function toggleTableOfContent(e) {
|
||||
const toc = document.getElementById('TableOfContents');
|
||||
toc.classList.toggle("show");
|
||||
|
|
16
js/scroll.js
16
js/scroll.js
|
@ -1,16 +0,0 @@
|
|||
window.onload = (event) => {
|
||||
if ((document.documentElement.scrollHeight / window.screen.availHeight ) > 1.5) {
|
||||
window.addEventListener("scroll", () => {
|
||||
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
|
||||
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
|
||||
var scrolled = (winScroll / height) * 100;
|
||||
document.getElementById('progress').style.width = scrolled + "%";
|
||||
|
||||
const toTop = document.getElementById('totop');
|
||||
|
||||
if ((window.scrollY > 0 && !toTop.classList.contains("show")) || (window.scrollY <= 0 && toTop.classList.contains("show"))) {
|
||||
toTop.classList.toggle("show");
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
27
js/theme.js
27
js/theme.js
|
@ -1,27 +0,0 @@
|
|||
// https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/#aa-using-a-body-class
|
||||
|
||||
window.onload = (event) => {
|
||||
const btn = document.getElementById("theme-toggler");
|
||||
const darkTheme = window.matchMedia("(prefers-color-scheme: dark)");
|
||||
const currentTheme = localStorage.getItem("theme");
|
||||
|
||||
if (currentTheme == "dark") {
|
||||
document.body.classList.toggle("dark");
|
||||
} else if (currentTheme == "light") {
|
||||
document.body.classList.toggle("light");
|
||||
btn.classList.toggle("rotate-180");
|
||||
}
|
||||
|
||||
btn.addEventListener("click", function () {
|
||||
btn.classList.toggle("rotate-180");
|
||||
var theme = "dark";
|
||||
if (darkTheme.matches) {
|
||||
document.body.classList.toggle("light");
|
||||
theme = document.body.classList.contains("light") ? "light" : "dark";
|
||||
} else {
|
||||
document.body.classList.toggle("dark");
|
||||
theme = document.body.classList.contains("dark") ? "dark" : "light";
|
||||
}
|
||||
localStorage.setItem("theme", theme);
|
||||
});
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue