// ==UserScript== // @name Greasy Fork Theme Engine [BETA] // @namespace https://naeembolchhi.github.io/ // @version 0.21 // @description A sleek Geasy Fork redesign with light/dark mode and custom colors. // @author NaeemBolchhi // @license GPL-3.0-or-later // @icon data:image/svg+xml;utf8, // @match *://greasyfork.org/* // @match *://sleazyfork.org/* // @exclude */assets/* // @run-at document-start // @downloadURL https://update.greasyfork.icu/scripts/476333/Greasy%20Fork%20Theme%20Engine%20%5BBETA%5D.user.js // @updateURL https://update.greasyfork.icu/scripts/476333/Greasy%20Fork%20Theme%20Engine%20%5BBETA%5D.meta.js // ==/UserScript== // Main event initiator. (() => { 'use strict'; // Pendulum const pendulum = setInterval(() => { try { if (!document.querySelector('head')) { return; } themeStyles(true); // if favicon } catch(e) {console.error("early-load-failed");catchErrors(e);} }, 100); // Only execute if window is interactive or fully loaded at this point. if (document.readyState === 'interactive' || document.readyState === 'complete') { setTimeout((() => { clearInterval(pendulum); themeStyles(); removeStyles(); // check theme choice in localstorage // any favicon function // add the toggle for theme changing /* DOM Changes START */ commonUpdate(); /* DOM Changes END */ // fix favicon again, just in case loadTime(); }), 100); } // Modifying head when available. let observer = new MutationObserver(() => { if (document.body) { clearInterval(pendulum); themeStyles(); removeStyles(); // any favicon function observer.disconnect(); } }); observer.observe(document.documentElement, {childList: true, subtree: true}); // Execute DOM modifications when ready state changes. document.onreadystatechange = () => { // Modify body when document is interactive. if (document.readyState === 'interactive') { // check theme choice in localstorage // add the toggle for theme changing /* DOM Changes */ commonUpdate(); } // Modify body when document is complete. if (document.readyState === 'complete') { // fix favicon again, just in case loadTime(); } } })(); // Update Sequence Common function commonUpdate() { processTheme(); setBasic(); forkNAV(); forkHEADER(); addFOOTER(); forkHOME(); listenEvents(); } // Catch errors. function catchErrors(e) { console.log(e instanceof TypeError) console.log(e.message) console.log(e.name) console.log(e.fileName) console.log(e.lineNumber) console.log(e.columnNumber) console.log(e.stack) } // SVG Icons const greasySVG = '', sleazySVG = '', forkSVG = '', clearSVG = '', findSVG = '', menuSVG = '', closeSVG = '', colorsSVG = '', translateSVG = '', pagesSVG = '', autoSVG = '', moonSVG = '', sunSVG = '', profileSVG = '', logoutSVG = ''; const navSVGs = { "discussionsSVG": '', "helpSVG": '', "librariesSVG": '', "moderator_actionsSVG": '', // "otherSVG": '', "scriptsSVG": '', "searchSVG": '', "usersSVG": '', "homeSVG": '' }; // Function for inserting new elements in the DOM. function elemake(tag, innr, attr) { let element = document.createElement(tag); if (innr) {element.innerHTML = innr;} if (!attr) {return element;} for (let x = 0; x < attr.key.length; x++) { element.setAttribute(attr.key[x], attr.val[x]); } return element; } // Get variables from URL function getVar(link) { let vars = {}; link.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) { vars[key] = value; }); return vars; } // Light Theme Colors const lightCSS = ` html, html[data-accent=default] { --engine-accent-color: #b42121; --engine-link-default: #adc2fc; --engine-link-visited: #a591dc; } html, html[data-light=default] { --engine-background-1: #f6f6f6; --engine-background-2: #fbfbfb; --engine-background-2a: #e0e0e0; --engine-button-hover: #e8e8e8; --engine-search-bg: #fbfbfb; --engine-search-hover: #e8e8e8; --engine-text-1: #222222; --engine-text-2: #666666; --engine-text-2a: #444444; --engine-border-color: #e0e0e0; --engine-nav-bg-2: #f0f0f0; --engine-nav-bg-1: #f8f8f8; --engine-logo-bg: var(--engine-text-color); --engine-logo-fg: var(--engine-background-1); } `.replace(/[\n\s]/g,''); // Dark Theme Colors const darkCSS = ` html, html[data-accent=default] { --engine-accent-color: #c42121; --engine-link-default: #adc2fc; --engine-link-visited: #a591dc; } html, html[data-dark=default] { --engine-background-1: #161616; --engine-background-2: #1c1c1c; --engine-background-2a: #0e0e0e; --engine-button-hover: #262626; --engine-search-bg: #262626; --engine-search-hover: #2e2e2e; --engine-text-1: #eeeeee; --engine-text-2: #aaaaaa; --engine-text-2a: #cccccc; --engine-border-color: #2c2c2c; --engine-nav-bg-1: #161616; --engine-nav-bg-2: #212121; --engine-logo-bg: var(--engine-background-1); --engine-logo-fg: var(--engine-text-color); } `.replace(/[\n\s]/g,''); // General Redesign Excluding Colors const globalCSS = ` :root { --header-min-height: 10.1rem; --header-main-height: 8.6rem; --engine-border-radius: 4px; --header-search-width: 70rem; --body-margin-xl2: calc(9.6rem + 3.2rem + 3.2rem); --main-nav-width: 40rem; --safe-duration: .1s; --stable-duration: .1s; --font-sans: "Open Sans", sans-serif; --font-mono: "Fira Mono", monospace; } html { font-size: 10px; } html.no-delay { --safe-duration: 0s; } html, html > body { height: 100%; width: 100%; line-height: 1.5; -webkit-text-size-adjust: 100%; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; color: var(--engine-text-1); fill: var(--engine-text-1); } html > body { display: flex; flex-direction: column; background-color: var(--engine-background-1); font-size: 1.6rem; } html > body:has(#main-nav:not(.hidden)) { overflow: hidden; } *, *::before, *::after { -webkit-tap-highlight-color: transparent; box-sizing: border-box; } a, a:visited, a:active { color: var(--engine-text-1); fill: var(--engine-text-1); text-decoration: none; } svg { overflow: visible; } svg .logo-bg { fill: var(--engine-logo-bg); } svg .logo-ring, svg .logo-fg { fill: var(--engine-logo-fg); } #main-header { background: var(--engine-background-1); color: var(--engine-text-1); box-shadow: initial; padding: 0 3.2rem; min-height: -moz-fit-content; min-height: fit-content; } #main-header > .width-constraint { height: calc(var(--header-main-height) - 3.2rem); margin: 2.4rem auto 0 auto; padding: 0; display: flex; align-items: center; justify-content: space-between; } #main-header > .width-constraint:last-child { margin-bottom: 1.6rem; } #main-header > .search-options { font-size: 1.5rem; margin-top: 0.7rem; display: flex; gap: 1.3rem; transform: translateY(1px); padding-left: 14.1rem; color: var(--engine-text-2); } #main-header > .search-options a { display: flex; height: 2.75rem; font-weight: 700; transition-duration: var(--stable-duration); } #main-header > .search-options a:hover, #main-header > .search-options a:focus { color: var(--engine-text-2a); } #main-header > .search-options a.active { color: var(--engine-accent-color); border-bottom: 2px solid var(--engine-accent-color); } #main-header a, #main-header a:visited, #main-header a:active { color: inherit; fill: inherit; } #main-header a.greasy-svg, #main-header a.sleazy-svg { height: 4.8rem; width: 9.6rem; min-width: 4.8rem; display: flex; align-items: center; justify-content: flex-end; margin-right: 3.2rem; } #main-header a.greasy-svg svg, #main-header a.sleazy-svg svg { height: 100%; width: auto; } #main-header form.engine-search-main { --_height: 5.2rem; width: var(--header-search-width); max-width: calc(100% - 4rem); } #main-header span.dummy { display: block; width: 0; flex: 1 0 auto; opacity: 0; margin-right: 3.2rem; } #main-header span.menu, #main-header a.profile, #main-header a.signout, #main-header a.notification { display: flex; align-items: center; justify-content: center; height: 4rem; width: 4rem; min-width: 4rem; font-size: 2rem; border-radius: var(--engine-border-radius); cursor: pointer; } #main-header span.menu svg, #main-header a.profile svg, #main-header a.signout svg, #main-header a.notification svg { height: 1em; width: 1em; } #main-header span.menu:hover, #main-header span.menu:focus, #main-header a.profile:hover, #main-header a.profile:focus, #main-header a.signout:hover, #main-header a.signout:focus, #main-header a.notification:hover, #main-header a.notification:focus { fill: var(--engine-accent-color); color: var(--engine-accent-color); background: var(--engine-button-hover); } #main-header span.menu:active svg, #main-header a.profile:active svg, #main-header a.signout:active svg, #main-header a.notification:active svg { transform: scale(0.8); } #main-header a.profile { min-width: -moz-fit-content; min-width: fit-content; padding: 0 1rem; border: 1px solid var(--engine-border-color); border-radius: var(--engine-border-radius); } #main-header a.profile tie { display: flex; align-items: center; justify-content: center; gap: 1rem; } #main-header a.profile span { font-size: 1.4rem; } #main-header a.profile span:active { transform: scale(0.9); } #main-header a.profile:has(+ a.signout) { border-right: 0px; border-radius: var(--engine-border-radius) 0 0 var(--engine-border-radius); } #main-header a.profile:has(+ a.signout):hover + a.signout::before, #main-header a.profile:has(+ a.signout):focus + a.signout::before { background: transparent; } #main-header a.profile:has(+ span.menu) { margin-right: 1rem; } #main-header a.signout { margin: 0 1rem 0 1px; border: 1px solid var(--engine-border-color); border-left: 0px; border-radius: 0 var(--engine-border-radius) var(--engine-border-radius) 0; position: relative; } #main-header a.signout::before { content: ""; position: absolute; height: 65%; width: 1px; background: var(--engine-border-color); left: -1px; } #main-header a.signout::after { content: ""; position: absolute; height: calc(100% + 2px); width: 3px; border: 1px solid var(--engine-border-color); border-left: 0; border-right: 0; left: -2px; } #main-header a.signout:hover::before, #main-header a.signout:focus::before { background: transparent; } #main-header a.notification { margin-right: 1rem; border: 1px solid var(--engine-border-color); border-radius: var(--engine-border-radius); } #main-header a.notification:hover::before, #main-header a.notification:focus::before { background: transparent; } #main-header a.notification span { font-size: 1.4rem; } #main-header a.notification:active span { transform: scale(0.8); } .script-list, .user-list, .text-content, .discussion-list, .list-option-group ul, #script-info { border-color: transparent; box-shadow: initial; background: transparent; } .width-constraint { width: 100%; max-width: unset; } @media screen and (max-width: 1228px) { .width-constraint { margin: 0 auto; } } html:not([data-home=true]) body { background-color: var(--engine-background-2); } html:not([data-home=true]) body > .width-constraint { margin: 0 auto; width: calc(100% - var(--body-margin-xl2) * 2); } html:not([data-home=true]) body > .width-constraint .sidebarred > .sidebarred-main-content { max-width: var(--header-search-width); } body > .width-constraint { flex-grow: 1; } body > .width-constraint .all-center-home { height: 100%; width: 100%; padding: 1.6rem 1.6rem 12.8rem 1.6rem; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6rem; border-radius: 0; --_height: 5.6rem; } body > .width-constraint .all-center-home .engine-welcome { margin: 0.5rem 0 2rem 0; font-size: 1.5rem; } body > .width-constraint .all-center-home a.greasy-svg, body > .width-constraint .all-center-home a.sleazy-svg { height: auto; width: 24.5rem; min-width: 24.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 2.5rem; gap: 1.6rem; } body > .width-constraint .all-center-home a.greasy-svg svg[viewBox="0 0 92 92"], body > .width-constraint .all-center-home a.sleazy-svg svg[viewBox="0 0 92 92"] { width: calc(100% - 10.8rem); margin: 0 auto; border-radius: 100%; } .engine-search-main { display: flex; width: 100%; height: var(--_height); max-width: calc(var(--_height) * 13.35714286); background: var(--engine-search-bg); border-radius: var(--engine-border-radius); overflow: hidden; box-shadow: 0 3px 0 0 var(--engine-background-2a); } .engine-search-main .engine-search-input { flex-grow: 1; background: transparent; border: 0; outline: 0; font-size: 1.7rem; padding: 1.3rem 0 1.3rem 1.3rem; color: var(--engine-text-1); fill: var(--engine-text-1); } .engine-search-main .engine-search-clear, .engine-search-main .engine-search-submit { height: var(--_height); width: calc(var(--_height) * 1.2); background: transparent; border: 0; outline: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: fill var(--stable-duration) ease-in-out, background var(--stable-duration) ease-in-out; } .engine-search-main .engine-search-clear:hover, .engine-search-main .engine-search-clear:focus, .engine-search-main .engine-search-submit:hover, .engine-search-main .engine-search-submit:focus { fill: var(--engine-accent-color); } .engine-search-main .engine-search-clear { display: none; } .engine-search-main .engine-search-clear svg { height: calc(var(--_height) / 3.5); width: calc(var(--_height) / 3.5); } .engine-search-main .engine-search-submit svg { height: calc(var(--_height) / 3); width: calc(var(--_height) / 3); } .engine-search-main .engine-search-submit:hover, .engine-search-main .engine-search-submit:focus { background: var(--engine-search-hover); } .engine-search-main.active .engine-search-submit { background: var(--engine-search-hover); } .engine-search-main.active .engine-search-clear { display: flex; } .engine-search-main > *:active > svg { transform: scale(0.8); } #engine-top-sites { font-size: 1.4rem; display: flex; align-items: center; justify-content: center; gap: 0.8rem; flex-wrap: wrap; width: 100%; max-width: calc(var(--_height) * 13.35714286); } #engine-top-sites a { border: 1px solid var(--engine-border-color); border-radius: var(--engine-border-radius); padding: 0.4rem 0.7rem; color: var(--engine-text-1); } #engine-top-sites a:hover, #engine-top-sites a:focus { color: var(--engine-accent-color); background: var(--engine-button-hover); } #main-footer { font-size: 1.44rem; padding: 1.6rem 3.2rem; background: var(--engine-background-1); } #main-footer .width-constraint { display: flex; align-items: center; justify-content: space-between; } #main-footer .width-constraint > span:first-of-type { display: flex; gap: 0.4rem; } #main-footer a { color: inherit; } #main-footer a:hover, #main-footer a:focus { color: var(--engine-accent-color); } #main-nav { --_button-height: 4.8rem; --_button-height-top: 4rem; z-index: 20; transition: -webkit-backdrop-filter var(--stable-duration) linear; transition: backdrop-filter var(--stable-duration) linear; transition: backdrop-filter var(--stable-duration) linear, -webkit-backdrop-filter var(--stable-duration) linear; } #main-nav.hidden { display: none; } #main-nav.visible { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } #main-nav.visible backdrop { opacity: 0.25; } #main-nav.visible sidebar { right: 0; } #main-nav:not(.visible) { -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); } #main-nav:not(.visible) backdrop { opacity: 0; } #main-nav:not(.visible) sidebar { right: calc(-1 * var(--main-nav-width)); } #main-nav, #main-nav backdrop { position: fixed; top: 0; right: 0; height: 100%; width: 100%; } #main-nav backdrop { transition: opacity var(--stable-duration) linear; background: var(--engine-background-2a); z-index: 0; } #main-nav sidebar { transition: right var(--stable-duration) ease-in-out; position: fixed; top: 0; height: 100%; width: var(--main-nav-width); max-width: calc(100% - 4rem); z-index: 1; background: var(--engine-nav-bg-1); box-shadow: var(--engine-background-2a) 0px 1px 2px 0px, var(--engine-background-2a) 0px 2px 6px 2px; display: flex; flex-direction: column; } #main-nav sidebar > top { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 1.6rem 3.2rem; height: var(--header-min-height); } #main-nav sidebar > top span.dummy { display: block; width: 0; flex: 1 0 auto; opacity: 0; } #main-nav sidebar > top span:not(.dummy) { height: var(--_button-height-top); width: var(--_button-height-top); border-radius: var(--engine-border-radius); background: var(--engine-nav-bg-2); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 2rem; } #main-nav sidebar > top span:not(.dummy) svg { height: 1em; width: 1em; } #main-nav sidebar > top span:not(.dummy) svg { transition-duration: var(--safe-duration); } #main-nav sidebar > top span:not(.dummy):hover, #main-nav sidebar > top span:not(.dummy):focus { background: var(--engine-button-hover); } #main-nav sidebar > top span:not(.dummy):active:not(.active) { fill: var(--engine-accent-color); color: var(--engine-accent-color); } #main-nav sidebar > top span:not(.dummy):active:not(.active) svg { transform: scale(0.8); } #main-nav sidebar > top span:not(.dummy).active { fill: var(--engine-background-1); color: var(--engine-background-1); background: var(--engine-accent-color); } #main-nav sidebar > top span:not(.dummy).close-menu { font-size: 1.4rem; } #main-nav sidebar > top span:not(.dummy).close-menu:active svg { transform: scale(0.78); } #main-nav sidebar > bottom { padding: 0 3.2rem 1.6rem 3.2rem; } #main-nav sidebar > bottom.colors, #main-nav sidebar > bottom.translate { display: none; } #main-nav sidebar > bottom.pages { display: flex; flex-direction: column; gap: 2rem; } #main-nav sidebar > bottom.pages .theme-switch { display: flex; gap: 1rem; } #main-nav sidebar > bottom.pages .theme-switch span { height: var(--_button-height); width: 0; flex: 1 0 auto; border-radius: var(--engine-border-radius); background: var(--engine-nav-bg-2); cursor: pointer; font-size: 2rem; display: flex; align-items: center; justify-content: center; transition: flex var(--stable-duration) ease-in-out; } #main-nav sidebar > bottom.pages .theme-switch span svg { height: 1em; width: 1em; } #main-nav sidebar > bottom.pages .theme-switch span svg { transition-duration: var(--stable-duration); } #main-nav sidebar > bottom.pages .theme-switch span:hover, #main-nav sidebar > bottom.pages .theme-switch span:focus { background: var(--engine-button-hover); } #main-nav sidebar > bottom.pages .theme-switch span:active:not(.active) { fill: var(--engine-accent-color); color: var(--engine-accent-color); } #main-nav sidebar > bottom.pages .theme-switch span:active:not(.active) svg { transform: scale(0.8); } #main-nav sidebar > bottom.pages .theme-switch span.active { flex: 2 0 auto; fill: var(--engine-background-1); color: var(--engine-background-1); background: var(--engine-accent-color); } #main-nav sidebar > bottom.pages .og-pages { display: flex; flex-direction: column; gap: 1rem; } #main-nav sidebar > bottom.pages .og-pages a { height: var(--_button-height); width: 100%; display: flex; align-items: center; gap: calc(var(--_button-height) / 2); padding: 0 calc(var(--_button-height) / 2); background: var(--engine-nav-bg-2); border-radius: var(--engine-border-radius); } #main-nav sidebar > bottom.pages .og-pages a svg { height: 1em; width: 1em; } #main-nav sidebar > bottom.pages .og-pages a, #main-nav sidebar > bottom.pages .og-pages a svg { transition-duration: var(--safe-duration); } #main-nav sidebar > bottom.pages .og-pages a:hover, #main-nav sidebar > bottom.pages .og-pages a:focus { background: var(--engine-button-hover); } #main-nav sidebar > bottom.pages .og-pages a:active:not(.active) { transform: translateY(3px); fill: var(--engine-accent-color); color: var(--engine-accent-color); } #main-nav sidebar > bottom.pages .og-pages a.active { fill: var(--engine-nav-bg-1); color: var(--engine-nav-bg-1); background: var(--engine-accent-color); } html.delay-not #main-nav sidebar > bottom.pages .og-pages a, html.delay-not #main-nav sidebar > bottom.pages .og-pages a svg { transition-duration: 0s; } /* User Content */ .user-content { background: transparent; } /* Search Results */ #browse-script-list a.script-link { color: var(--engine-link-default); fill: var(--engine-link-default); } #browse-script-list a.script-link:visited { color: var(--engine-link-visited); fill: var(--engine-link-visited); } html:not([data-home=true]) > body > .width-constraint > .sidebarred > .sidebarred-main-content .list-current, html:not([data-home=true]) > body > .width-constraint > .sidebarred > .sidebarred-main-content .script-list h2 { font-weight: 400; } html:not([data-home=true]) > body > .width-constraint > .sidebarred > .sidebarred-main-content .list-current a, html:not([data-home=true]) > body > .width-constraint > .sidebarred > .sidebarred-main-content .script-list h2 a { font-size: 2.125rem; line-height: 1; } html:not([data-home=true]) > body > .width-constraint > .sidebarred > .sidebarred-main-content .script-list li:not(.ad-entry) { padding: 0 1.3rem; border: 0; } html:not([data-home=true]) > body > .width-constraint > .sidebarred > .sidebarred-main-content .script-list li:not(.ad-entry) h2 { display: flex; flex-wrap: wrap; } html:not([data-home=true]) > body > .width-constraint > .sidebarred > .sidebarred-main-content .script-list li:not(.ad-entry) h2 .badge-js, html:not([data-home=true]) > body > .width-constraint > .sidebarred > .sidebarred-main-content .script-list li:not(.ad-entry) h2 .badge-css { display: unset; height: -moz-fit-content; height: fit-content; margin: auto 1rem; padding: 0.2rem 0.6rem; border-radius: 3px; } html:not([data-home=true]) > body > .width-constraint > .sidebarred > .sidebarred-main-content .script-list li:not(.ad-entry) h2 .description { width: 100%; } html:not([data-home=true]) > body > .width-constraint > .sidebarred > .sidebar .sidebar-search { display: none; } html:not([data-home=true]) > body > .width-constraint > .sidebarred > .sidebar .list-option-group .list-current { background: transparent; } `; // Remove Bruteforced Styles function removeStyles() { let styleTMP = document.querySelectorAll('head style[data-temp]'); for (let x = 0; x < styleTMP.length; x++) { styleTMP[x].remove(); } } // Regular Styles function themeStyles(temp) { if (document.querySelector('#globalCSS')) {return;} let themeChoice = localStorage.themeChoice || 'system', mediaLight = '', mediaDark = '', typeLight, typeDark; if (themeChoice === 'system') { mediaDark = '(prefers-color-scheme: no-preference), (prefers-color-scheme: dark)'; mediaLight = '(prefers-color-scheme: light)'; typeDark = 'text/css'; typeLight = 'text/css'; } else if (themeChoice === 'light') { typeDark = 'null'; typeLight = 'text/css'; } else if (themeChoice === 'dark') { typeDark = 'text/css'; typeLight = 'null'; } if (!temp) { // document.head.appendChild(elemake("link","",{"key":["rel","href","type","id"],"val":["stylesheet","http://127.0.0.1:10974/global.css","text/css","globalCSS"]})); document.head.appendChild(elemake("style",globalCSS,{"key":["type","id"],"val":["text/css","globalCSS"]})); document.head.appendChild(elemake("style",darkCSS,{"key":["type","id","media"],"val":[typeDark,"darkCSS",mediaDark]})); document.head.appendChild(elemake("style",lightCSS,{"key":["type","id","media"],"val":[typeLight,"lightCSS",mediaLight]})); } else { // document.head.appendChild(elemake("link","",{"key":["rel","href","type","data-temp"],"val":["stylesheet","http://127.0.0.1:10974/global.css","text/css","globalCSS"]})); document.head.appendChild(elemake("style",globalCSS,{"key":["type","data-temp"],"val":["text/css","globalCSS"]})); document.head.appendChild(elemake("style",darkCSS,{"key":["type","data-temp","media"],"val":[typeDark,"darkCSS",mediaDark]})); document.head.appendChild(elemake("style",lightCSS,{"key":["type","data-temp","media"],"val":[typeLight,"lightCSS",mediaLight]})); } } // Know Basics function setBasic() { if (window.location.origin.match(/sleazyfork/)) { window.siteMatch = 'sleazy'; } else { window.siteMatch = 'greasy'; } window.currentLocale = document.documentElement.getAttribute('lang'); let cPath = window.location.pathname.replace(/\//g,''); if (cPath === '' || cPath === window.currentLocale) { window.onHomepage = true; document.documentElement.setAttribute('data-home', 'true'); } else { window.onHomepage = false; document.documentElement.setAttribute('data-home', 'false'); } } // Process Theme function processTheme() { let themeLight = localStorage.themeLight || 'default', themeDark = localStorage.themeDark || 'default', themeAccent = localStorage.themeAccent || 'default', html = document.documentElement; html.setAttribute('data-accent',themeAccent); html.setAttribute('data-light',themeLight); html.setAttribute('data-dark',themeDark); try { let themeChoice = localStorage.themeChoice || 'system', mediaLight = '', mediaDark = '', typeLight, typeDark, lightStyle = document.querySelector('#lightCSS'), darkStyle = document.querySelector('#darkCSS'); if (themeChoice === 'system') { mediaDark = '(prefers-color-scheme: no-preference), (prefers-color-scheme: dark)'; mediaLight = '(prefers-color-scheme: light)'; typeDark = 'text/css'; typeLight = 'text/css'; } else if (themeChoice === 'light') { typeDark = 'null'; typeLight = 'text/css'; } else if (themeChoice === 'dark') { typeDark = 'text/css'; typeLight = 'null'; } lightStyle.setAttribute('type',typeLight); darkStyle.setAttribute('type',typeDark); lightStyle.setAttribute('media',mediaLight); darkStyle.setAttribute('media',mediaDark); } catch(e) {} } // Click primary theme toggle function toggleTheme(key) { document.documentElement.classList.add('no-delay'); document.querySelector('#main-nav section.theme-switch > .active').classList.remove('active'); if (key === 'system') { document.querySelector('#main-nav section.theme-switch > span.system').classList.add('active'); localStorage.themeChoice = 'system'; } else if (key === 'light') { document.querySelector('#main-nav section.theme-switch > span.day').classList.add('active'); localStorage.themeChoice = 'light'; } else { document.querySelector('#main-nav section.theme-switch > span.night').classList.add('active'); localStorage.themeChoice = 'dark'; } processTheme(); setTimeout(() => { document.documentElement.classList.remove('no-delay'); }, 10); } // Calculate loading time. function loadTime() { let loadTime = window.performance.timing.domContentLoadedEventEnd - window.performance.timing.navigationStart; try { document.querySelector('#main-footer .width-constraint > span:nth-of-type(2)').textContent = 'Loaded in ' + (loadTime/1000).toFixed(2) + ' secs'; } catch {} } // Add a simple footer on EVERY page function addFOOTER() { let footerName = 'Greasy Fork'; if (window.siteMatch === 'sleazy') { footerName = 'Sleazy Fork'; } let footer = `