556 lines
20 KiB
JavaScript
556 lines
20 KiB
JavaScript
var pageName = window.location.pathname.split("/").pop().split(".")[0];
|
|
|
|
var fixedPlugin = document.querySelector("[fixed-plugin]");
|
|
var fixedPluginButton = document.querySelector("[fixed-plugin-button]");
|
|
var fixedPluginButtonNav = document.querySelector("[fixed-plugin-button-nav]");
|
|
var fixedPluginCard = document.querySelector("[fixed-plugin-card]");
|
|
var fixedPluginCloseButton = document.querySelector("[fixed-plugin-close-button]");
|
|
|
|
var navbar = document.querySelector("[navbar-main]");
|
|
|
|
var buttonNavbarFixed = document.querySelector("[navbar-fixed-toggle]");
|
|
|
|
var sidenav = document.querySelector("aside");
|
|
var sidenav_icons = sidenav.querySelectorAll("li a div");
|
|
|
|
var sidenav_target = "../pages/" + pageName + ".html";
|
|
|
|
var transparentBtn = document.querySelector("[transparent-style-btn]");
|
|
var whiteBtn = document.querySelector("[white-style-btn]");
|
|
|
|
var non_active_style = ["bg-none", "bg-transparent", "text-fuchsia-500", "border-fuchsia-500"];
|
|
var active_style = ["bg-gradient-to-tl", "from-purple-700", "to-pink-500", "bg-fuchsia-500", "text-white", "border-transparent"];
|
|
|
|
var transparent_sidenav_classes = ["xl:bg-transparent", "shadow-none"];
|
|
var transparent_sidenav_highlighted = ["shadow-soft-xl"];
|
|
var transparent_sidenav_icons = ["bg-white"];
|
|
|
|
var white_sidenav_classes = ["xl:bg-white", "xl:shadow-soft-xl"];
|
|
var white_sidenav_highlighted = ["shadow-none"];
|
|
var white_sidenav_icons = ["bg-gray-200"];
|
|
|
|
var sidenav_highlight = document.querySelector("a[active_primary]");
|
|
|
|
// fixed plugin toggle
|
|
if (pageName != "rtl-page") {
|
|
fixedPluginButton.addEventListener("click", function () {
|
|
fixedPluginCard.classList.toggle("-right-90");
|
|
fixedPluginCard.classList.toggle("right-0");
|
|
});
|
|
|
|
fixedPluginButtonNav.addEventListener("click", function () {
|
|
fixedPluginCard.classList.toggle("-right-90");
|
|
fixedPluginCard.classList.toggle("right-0");
|
|
});
|
|
|
|
fixedPluginCloseButton.addEventListener("click", function () {
|
|
fixedPluginCard.classList.toggle("-right-90");
|
|
fixedPluginCard.classList.toggle("right-0");
|
|
});
|
|
|
|
window.addEventListener("click", function (e) {
|
|
if (!fixedPlugin.contains(e.target) && !fixedPluginButton.contains(e.target) && !fixedPluginButtonNav.contains(e.target)) {
|
|
if (fixedPluginCard.classList.contains("right-0")) {
|
|
fixedPluginCloseButton.click();
|
|
}
|
|
}
|
|
});
|
|
} else {
|
|
fixedPluginButton.addEventListener("click", function () {
|
|
fixedPluginCard.classList.toggle("-left-90");
|
|
fixedPluginCard.classList.toggle("left-0");
|
|
});
|
|
|
|
fixedPluginButtonNav.addEventListener("click", function () {
|
|
fixedPluginCard.classList.toggle("-left-90");
|
|
fixedPluginCard.classList.toggle("left-0");
|
|
});
|
|
|
|
fixedPluginCloseButton.addEventListener("click", function () {
|
|
fixedPluginCard.classList.toggle("-left-90");
|
|
fixedPluginCard.classList.toggle("left-0");
|
|
});
|
|
|
|
window.addEventListener("click", function (e) {
|
|
if (!fixedPlugin.contains(e.target) && !fixedPluginButton.contains(e.target) && !fixedPluginButtonNav.contains(e.target)) {
|
|
if (fixedPluginCard.classList.contains("left-0")) {
|
|
fixedPluginCloseButton.click();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// color sidenav
|
|
|
|
function sidebarColor(a) {
|
|
var color_from = a.getAttribute("data-color-from");
|
|
var color_to = a.getAttribute("data-color-to");
|
|
var parent = a.parentElement.children;
|
|
|
|
var activeColorFrom;
|
|
var activeColorTo;
|
|
var activeSidenavIconColorClassFrom;
|
|
var activeSidenavIconColorClassTo;
|
|
var activeSidenavCardColorClassFrom;
|
|
var activeSidenavCardColorClassTo;
|
|
var activeSidenavCardIconColorClassFrom;
|
|
var activeSidenavCardIconColorClassTo;
|
|
|
|
var checkedSidenavIconColorFrom = "from-" + color_from;
|
|
var checkedSidenavIconColorTo = "to-" + color_to;
|
|
|
|
var checkedSidenavCardColorFrom = "after:from-" + (color_from == "purple-700" ? "slate-600" : color_from);
|
|
var checkedSidenavCardColorTo = "after:to-" + (color_to == "pink-500" ? "slate-300" : color_to);
|
|
|
|
var checkedSidenavCardIconColorClassFrom = "from-" + (color_from == "purple-700" ? "slate-600" : color_from);
|
|
var checkedSidenavCardIconColorClassTo = "to-" + (color_to == "pink-500" ? "slate-300" : color_to);
|
|
|
|
var sidenavCard = document.querySelector("[sidenav-card]");
|
|
var sidenavCardIcon = document.querySelector("[sidenav-card-icon]");
|
|
var sidenavIcon = sidenav_highlight.firstElementChild;
|
|
|
|
for (var i = 0; i < parent.length; i++) {
|
|
if (parent[i].hasAttribute("active-color")) {
|
|
activeColorFrom = parent[i].getAttribute("data-color-from");
|
|
activeColorTo = parent[i].getAttribute("data-color-to");
|
|
|
|
parent[i].classList.toggle("border-white");
|
|
parent[i].classList.toggle("border-slate-700");
|
|
|
|
activeSidenavIconColorClassFrom = "from-" + activeColorFrom;
|
|
activeSidenavIconColorClassTo = "to-" + activeColorTo;
|
|
|
|
activeSidenavIconColorClassFrom = "from-" + activeColorFrom;
|
|
activeSidenavIconColorClassTo = "to-" + activeColorTo;
|
|
|
|
activeSidenavCardIconColorClassFrom = "from-" + (activeColorFrom == "purple-700" ? "slate-600" : activeColorFrom);
|
|
activeSidenavCardIconColorClassTo = "to-" + (activeColorTo == "pink-500" ? "slate-300" : activeColorTo);
|
|
}
|
|
parent[i].removeAttribute("active-color");
|
|
}
|
|
|
|
var att = document.createAttribute("active-color");
|
|
|
|
a.setAttributeNode(att);
|
|
a.classList.toggle("border-white");
|
|
a.classList.toggle("border-slate-700");
|
|
|
|
sidenavCard.classList.remove(activeSidenavCardColorClassFrom);
|
|
sidenavCard.classList.remove(activeSidenavCardColorClassTo);
|
|
|
|
sidenavCardIcon.classList.remove(activeSidenavCardIconColorClassFrom);
|
|
sidenavCardIcon.classList.remove(activeSidenavCardIconColorClassTo);
|
|
|
|
sidenavIcon.classList.remove(activeSidenavIconColorClassFrom);
|
|
sidenavIcon.classList.remove(activeSidenavIconColorClassTo);
|
|
|
|
sidenavCard.classList.add(checkedSidenavCardColorFrom);
|
|
sidenavCard.classList.add(checkedSidenavCardColorTo);
|
|
|
|
sidenavCardIcon.classList.add(checkedSidenavCardIconColorClassFrom);
|
|
sidenavCardIcon.classList.add(checkedSidenavCardIconColorClassTo);
|
|
|
|
sidenavIcon.classList.add(checkedSidenavIconColorFrom);
|
|
sidenavIcon.classList.add(checkedSidenavIconColorTo);
|
|
}
|
|
|
|
// sidenav style
|
|
|
|
transparentBtn.addEventListener("click", function () {
|
|
const active_style_attr = document.createAttribute("active-style");
|
|
if (!this.hasAttribute(active_style_attr)) {
|
|
// change trigger buttons style
|
|
|
|
this.setAttributeNode(active_style_attr);
|
|
|
|
non_active_style.forEach((style_class) => {
|
|
this.classList.remove(style_class);
|
|
});
|
|
|
|
active_style.forEach((style_class) => {
|
|
this.classList.add(style_class);
|
|
});
|
|
|
|
whiteBtn.removeAttribute(active_style_attr);
|
|
|
|
active_style.forEach((style_class) => {
|
|
whiteBtn.classList.remove(style_class);
|
|
});
|
|
|
|
non_active_style.forEach((style_class) => {
|
|
whiteBtn.classList.add(style_class);
|
|
});
|
|
|
|
// change actual styles
|
|
|
|
white_sidenav_classes.forEach((style_class) => {
|
|
sidenav.classList.remove(style_class);
|
|
});
|
|
transparent_sidenav_classes.forEach((style_class) => {
|
|
sidenav.classList.add(style_class);
|
|
});
|
|
|
|
white_sidenav_highlighted.forEach((style_class) => {
|
|
sidenav_highlight.classList.remove(style_class);
|
|
});
|
|
transparent_sidenav_highlighted.forEach((style_class) => {
|
|
sidenav_highlight.classList.add(style_class);
|
|
});
|
|
for (var i = 0; i < sidenav_icons.length; i++) {
|
|
white_sidenav_icons.forEach((style_class) => {
|
|
sidenav_icons[i].classList.remove(style_class);
|
|
});
|
|
transparent_sidenav_icons.forEach((style_class) => {
|
|
sidenav_icons[i].classList.add(style_class);
|
|
});
|
|
}
|
|
}
|
|
});
|
|
|
|
whiteBtn.addEventListener("click", function () {
|
|
const active_style_attr = document.createAttribute("active-style");
|
|
if (!this.hasAttribute(active_style_attr)) {
|
|
this.setAttributeNode(active_style_attr);
|
|
non_active_style.forEach((style_class) => {
|
|
this.classList.remove(style_class);
|
|
});
|
|
active_style.forEach((style_class) => {
|
|
this.classList.add(style_class);
|
|
});
|
|
|
|
transparentBtn.removeAttribute(active_style_attr);
|
|
active_style.forEach((style_class) => {
|
|
transparentBtn.classList.remove(style_class);
|
|
});
|
|
non_active_style.forEach((style_class) => {
|
|
transparentBtn.classList.add(style_class);
|
|
});
|
|
|
|
// change actual styles
|
|
|
|
transparent_sidenav_classes.forEach((style_class) => {
|
|
sidenav.classList.remove(style_class);
|
|
});
|
|
white_sidenav_classes.forEach((style_class) => {
|
|
sidenav.classList.add(style_class);
|
|
});
|
|
|
|
transparent_sidenav_highlighted.forEach((style_class) => {
|
|
sidenav_highlight.classList.remove(style_class);
|
|
});
|
|
|
|
white_sidenav_highlighted.forEach((style_class) => {
|
|
sidenav_highlight.classList.add(style_class);
|
|
});
|
|
|
|
for (var i = 0; i < sidenav_icons.length; i++) {
|
|
transparent_sidenav_icons.forEach((style_class) => {
|
|
sidenav_icons[i].classList.remove(style_class);
|
|
});
|
|
white_sidenav_icons.forEach((style_class) => {
|
|
sidenav_icons[i].classList.add(style_class);
|
|
});
|
|
}
|
|
}
|
|
});
|
|
|
|
// navbar fixed plugin
|
|
|
|
if (navbar) {
|
|
if (navbar.getAttribute("navbar-scroll") == "true") {
|
|
buttonNavbarFixed.setAttribute("checked", "true");
|
|
}
|
|
buttonNavbarFixed.addEventListener("change", function () {
|
|
if (this.checked) {
|
|
navbar.setAttribute("navbar-scroll", "true");
|
|
navbar.classList.add("sticky", "top-[1%]", "backdrop-saturate-200", "backdrop-blur-2xl", "bg-white/80", "shadow-blur", "z-110", "dark:bg-gray-950/80", "dark:shadow-dark-blur");
|
|
} else {
|
|
navbar.setAttribute("navbar-scroll", "false");
|
|
navbar.classList.remove("sticky", "top-[1%]", "backdrop-saturate-200", "backdrop-blur-2xl", "bg-white/80", "shadow-blur", "z-110", "dark:bg-gray-950/80", "dark:shadow-dark-blur");
|
|
}
|
|
});
|
|
} else {
|
|
// buttonNavbarFixed.setAttribute("checked", "true");
|
|
buttonNavbarFixed.setAttribute("disabled", "true");
|
|
}
|
|
|
|
var sidenav = document.querySelector("aside");
|
|
var mini_sidenav_burger = document.querySelector("[mini-sidenav-burger]");
|
|
var burger_mini = mini_sidenav_burger.firstElementChild;
|
|
var top_bread_mini = burger_mini.firstElementChild;
|
|
var main = document.querySelector("main");
|
|
if (!main) {
|
|
var main = document.querySelector("[main-content]");
|
|
}
|
|
var bottom_bread_mini = burger_mini.lastElementChild;
|
|
var normal_spans = sidenav.querySelectorAll("span:not(.opacity-0)");
|
|
var mini_spans = sidenav.querySelectorAll("span.opacity-0");
|
|
var primary_lists = sidenav.querySelectorAll("ul.pl-4.ml-6");
|
|
var secondary_lists = sidenav.querySelectorAll("ul.pl-0");
|
|
var primary_anchors = sidenav.querySelectorAll("a[collapse_trigger='primary']");
|
|
var sidenav_card_icon = sidenav.querySelector("[sidenav-card-icon]").parentElement;
|
|
var sidenav_card_content = sidenav.querySelector("i[sidenav-card-icon]").parentElement.nextElementSibling;
|
|
var mini_sidenav_toggle = document.querySelector("[sidenav-mini-toggle]");
|
|
|
|
mini_sidenav_burger.addEventListener("click", function (e) {
|
|
mini_sidenav_toggle.click();
|
|
});
|
|
|
|
mini_sidenav_toggle.addEventListener("change", toggle_sidenav_mini);
|
|
|
|
function toggle_sidenav_mini() {
|
|
if (pageName != "rtl-page") {
|
|
|
|
if (sidenav.getAttribute("mini") == "true") {
|
|
normal_sidenav();
|
|
sidenav.setAttribute("mini", "false");
|
|
} else {
|
|
mini_sidenav();
|
|
sidenav.setAttribute("mini", "true");
|
|
}
|
|
} else {
|
|
|
|
if (sidenav.getAttribute("mini") == "true") {
|
|
normal_sidenav_rtl();
|
|
sidenav.setAttribute("mini", "false");
|
|
} else {
|
|
mini_sidenav_rtl();
|
|
sidenav.setAttribute("mini", "true");
|
|
}
|
|
}
|
|
}
|
|
|
|
function mini_sidenav() {
|
|
sidenav.classList.add("max-w-24");
|
|
sidenav.classList.remove("max-w-64");
|
|
// setTimeout(function () {
|
|
sidenav.classList.add("overflow-hidden");
|
|
sidenav.classList.remove("overflow-y-auto");
|
|
// your code to be executed after .1 second
|
|
// }, 100);
|
|
main.classList.add("xl:ml-30");
|
|
main.classList.remove("xl:ml-68");
|
|
primary_anchors.forEach((primary_anchor) => {
|
|
primary_anchor.classList.remove("after:content-['\\f107']");
|
|
});
|
|
primary_lists.forEach((primary_list) => {
|
|
primary_list.classList.add("pl-0", "ml-0");
|
|
primary_list.classList.remove("pl-4", "ml-6");
|
|
});
|
|
secondary_lists.forEach((secondary_list) => {
|
|
secondary_list.classList.add("ml-0");
|
|
});
|
|
normal_spans.forEach((normal_span) => {
|
|
normal_span.classList.add("opacity-0");
|
|
normal_span.classList.add("max-w-0");
|
|
normal_span.classList.remove("opacity-100");
|
|
if (normal_span.previousElementSibling.tagName.toLowerCase() == "span") {
|
|
normal_span.parentElement.classList.add("before:content-[none]");
|
|
normal_span.parentElement.classList.add("ml-4");
|
|
normal_span.parentElement.classList.remove("before:content-['']");
|
|
normal_span.parentElement.classList.remove("ml-5.4");
|
|
}
|
|
});
|
|
|
|
mini_spans.forEach((mini_span) => {
|
|
mini_span.classList.remove("opacity-0");
|
|
mini_span.classList.add("ml-0.75");
|
|
mini_span.classList.add("min-w-7");
|
|
mini_span.classList.add("opacity-100");
|
|
});
|
|
sidenav_card_content.classList.add("opacity-0", "w-0", "h-0");
|
|
sidenav_card_icon.classList.remove("mb-4");
|
|
|
|
top_bread_mini.classList.remove("translate-x-[5px]");
|
|
bottom_bread_mini.classList.remove("translate-x-[5px]");
|
|
}
|
|
|
|
function normal_sidenav() {
|
|
sidenav.classList.add("max-w-64");
|
|
sidenav.classList.remove("max-w-24");
|
|
main.classList.add("xl:ml-68");
|
|
main.classList.remove("xl:ml-30");
|
|
sidenav_card_content.classList.remove("opacity-0", "w-0", "h-0");
|
|
sidenav_card_icon.classList.add("mb-4");
|
|
primary_anchors.forEach((primary_anchor) => {
|
|
primary_anchor.classList.add("after:content-['\\f107']");
|
|
});
|
|
mini_spans.forEach((mini_span) => {
|
|
mini_span.classList.remove("opacity-100");
|
|
mini_span.classList.remove("min-w-7");
|
|
mini_span.classList.remove("ml-0.75");
|
|
mini_span.classList.add("opacity-0");
|
|
});
|
|
primary_lists.forEach((primary_list) => {
|
|
primary_list.classList.remove("pl-0", "ml-0");
|
|
primary_list.classList.add("pl-4", "ml-6");
|
|
});
|
|
secondary_lists.forEach((secondary_list) => {
|
|
secondary_list.classList.remove("ml-0");
|
|
});
|
|
normal_spans.forEach((normal_span) => {
|
|
normal_span.classList.remove("opacity-0");
|
|
normal_span.classList.add("opacity-100");
|
|
normal_span.classList.remove("max-w-0");
|
|
if (normal_span.previousElementSibling.tagName.toLowerCase() == "span") {
|
|
normal_span.parentElement.classList.remove("before:content-[none]");
|
|
normal_span.parentElement.classList.add("before:content-['']");
|
|
normal_span.parentElement.classList.add("ml-5.4");
|
|
normal_span.parentElement.classList.remove("ml-4");
|
|
} else if (normal_span.previousElementSibling.tagName.toLowerCase() != "img") {
|
|
}
|
|
normal_span.classList.add("opacity-100");
|
|
});
|
|
top_bread_mini.classList.add("translate-x-[5px]");
|
|
bottom_bread_mini.classList.add("translate-x-[5px]");
|
|
// setTimeout(function () {
|
|
sidenav.classList.remove("overflow-hidden");
|
|
sidenav.classList.add("overflow-y-auto");
|
|
// your code to be executed after .1 second
|
|
// }, 100);
|
|
}
|
|
|
|
function mini_sidenav_rtl() {
|
|
sidenav.classList.add("max-w-24");
|
|
sidenav.classList.remove("max-w-64");
|
|
// setTimeout(function () {
|
|
sidenav.classList.add("overflow-hidden");
|
|
sidenav.classList.remove("overflow-y-auto");
|
|
// your code to be executed after .1 second
|
|
// }, 100);
|
|
main.classList.add("xl:mr-30");
|
|
main.classList.remove("xl:mr-68");
|
|
primary_anchors.forEach((primary_anchor) => {
|
|
primary_anchor.classList.remove("after:content-['\\f107']");
|
|
});
|
|
primary_lists.forEach((primary_list) => {
|
|
primary_list.classList.add("pr-0", "mr-0");
|
|
primary_list.classList.remove("pr-4", "mr-6");
|
|
});
|
|
secondary_lists.forEach((secondary_list) => {
|
|
secondary_list.classList.add("mr-0");
|
|
});
|
|
normal_spans.forEach((normal_span) => {
|
|
normal_span.classList.add("opacity-0");
|
|
normal_span.classList.add("max-w-0");
|
|
normal_span.classList.remove("opacity-100");
|
|
if (normal_span.previousElementSibling.tagName.toLowerCase() == "span") {
|
|
normal_span.parentElement.classList.add("before:content-[none]");
|
|
normal_span.parentElement.classList.add("mr-4");
|
|
normal_span.parentElement.classList.remove("before:content-['']");
|
|
normal_span.parentElement.classList.remove("mr-5.4");
|
|
}
|
|
});
|
|
|
|
mini_spans.forEach((mini_span) => {
|
|
mini_span.classList.remove("opacity-0");
|
|
mini_span.classList.add("mr-0.6");
|
|
mini_span.classList.add("min-w-7");
|
|
mini_span.classList.add("opacity-100");
|
|
});
|
|
sidenav_card_content.classList.add("opacity-0", "w-0", "h-0");
|
|
sidenav_card_icon.classList.remove("mb-4");
|
|
|
|
top_bread_mini.classList.remove("-translate-x-[5px]");
|
|
bottom_bread_mini.classList.remove("-translate-x-[5px]");
|
|
}
|
|
|
|
function normal_sidenav_rtl() {
|
|
sidenav.classList.add("max-w-64");
|
|
sidenav.classList.remove("max-w-24");
|
|
main.classList.add("xl:mr-68");
|
|
main.classList.remove("xl:mr-30");
|
|
sidenav_card_content.classList.remove("opacity-0", "w-0", "h-0");
|
|
sidenav_card_icon.classList.add("mb-4");
|
|
primary_anchors.forEach((primary_anchor) => {
|
|
primary_anchor.classList.add("after:content-['\\f107']");
|
|
});
|
|
mini_spans.forEach((mini_span) => {
|
|
mini_span.classList.remove("opacity-100");
|
|
mini_span.classList.remove("min-w-7");
|
|
mini_span.classList.remove("mr-0.6");
|
|
mini_span.classList.add("opacity-0");
|
|
});
|
|
primary_lists.forEach((primary_list) => {
|
|
primary_list.classList.remove("pr-0", "mr-0");
|
|
primary_list.classList.add("pr-4", "mr-6");
|
|
});
|
|
secondary_lists.forEach((secondary_list) => {
|
|
secondary_list.classList.remove("mr-0");
|
|
});
|
|
normal_spans.forEach((normal_span) => {
|
|
normal_span.classList.remove("opacity-0");
|
|
normal_span.classList.add("opacity-100");
|
|
normal_span.classList.remove("max-w-0");
|
|
if (normal_span.previousElementSibling.tagName.toLowerCase() == "span") {
|
|
normal_span.parentElement.classList.remove("before:content-[none]");
|
|
normal_span.parentElement.classList.add("before:content-['']");
|
|
normal_span.parentElement.classList.add("mr-5.4");
|
|
normal_span.parentElement.classList.remove("mr-4");
|
|
} else if (normal_span.previousElementSibling.tagName.toLowerCase() != "img") {
|
|
}
|
|
normal_span.classList.add("opacity-100");
|
|
});
|
|
top_bread_mini.classList.add("-translate-x-[5px]");
|
|
bottom_bread_mini.classList.add("-translate-x-[5px]");
|
|
// setTimeout(function () {
|
|
sidenav.classList.remove("overflow-hidden");
|
|
sidenav.classList.add("overflow-y-auto");
|
|
// your code to be executed after .1 second
|
|
// }, 100);
|
|
}
|
|
|
|
sidenav.addEventListener("mouseenter", () => {
|
|
if (sidenav.getAttribute("mini") == "true") {
|
|
if (pageName != "rtl-page") {
|
|
normal_sidenav();
|
|
} else {
|
|
normal_sidenav_rtl();
|
|
}
|
|
}
|
|
});
|
|
|
|
sidenav.addEventListener("mouseleave", () => {
|
|
if (sidenav.getAttribute("mini") == "true") {
|
|
if (pageName != "rtl-page") {
|
|
mini_sidenav();
|
|
} else {
|
|
mini_sidenav_rtl();
|
|
}
|
|
}
|
|
});
|
|
|
|
var dark_mode_toggle = document.querySelector("[dark-toggle]");
|
|
var root_html = document.querySelector("html");
|
|
|
|
dark_mode_toggle.addEventListener("change", function () {
|
|
dark_mode_toggle.setAttribute("manual", "true");
|
|
if (this.checked) {
|
|
root_html.classList.add("dark");
|
|
} else {
|
|
root_html.classList.remove("dark");
|
|
}
|
|
});
|
|
|
|
// function to set dark mode if user setting is for dark
|
|
|
|
// if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
|
|
// if (!dark_mode_toggle.hasAttribute("manual") && !root_html.classList.contains("dark")) {
|
|
// dark_mode_toggle.click();
|
|
// dark_mode_toggle.removeAttribute("manual");
|
|
// }
|
|
// }
|
|
|
|
// function to automatically switch on dark mode
|
|
|
|
// window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (event) => {
|
|
// const actual_color_scheme = event.matches ? "dark" : "light";
|
|
// if (actual_color_scheme == "dark" && !root_html.classList.contains("dark") && !dark_mode_toggle.hasAttribute("manual")) {
|
|
// dark_mode_toggle.click();
|
|
// dark_mode_toggle.removeAttribute("manual");
|
|
// } else if (actual_color_scheme == "light" && root_html.classList.contains("dark") && !dark_mode_toggle.hasAttribute("manual")) {
|
|
// dark_mode_toggle.click();
|
|
// dark_mode_toggle.removeAttribute("manual");
|
|
// }
|
|
// });
|