🇬🇧 Adds a button on your screen to toggle the dark theme on and off. | 🇹🇷 Ekrana karanlık temayı açıp kapatabileceğiniz bir buton ekler.
目前為
// ==UserScript==
// @name Popmundo - Dark Theme | Karanlık Tema
// @namespace bheuv.dev / Faun Fangorn
// @version 1.7
// @description 🇬🇧 Adds a button on your screen to toggle the dark theme on and off. | 🇹🇷 Ekrana karanlık temayı açıp kapatabileceğiniz bir buton ekler.
// @run-at document-start
// @match https://*.popmundo.com/*
// @grant GM_addStyle
// @noframes
// ==/UserScript==
const addStyle = function(style) {
const styleEl = document.createElement('style');
styleEl.setAttribute("id", "darkmundo");
styleEl.textContent = style;
document.head.append(styleEl);
}
document.onreadystatechange = function() {
if (document.readyState === "interactive") {
const lightBulb = "/Static/Icons/light-bulb.png"
const darkBulb = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAjZJREFUeNqUU0trE1EUvjOTySQZycMY0iSKgqkm0IValWQpFEoXrly5c9OFoAsX4g8oXbhxqbhx1Y0LoYuCdSFITOwjRCV1StpJTcDStHba5mEyzzvXM2pK0nYCHjjcM3O+77vnnnMvRQhBXRt98hJRFGWF8X/uhbz1owmraJpmGRwVnz045DhQv1ngm4nomauTY9fH4pHQUKOtq2Lt5/ZM5nNOrEkhyC+CH+5KHxEYBvLo88nbj5KxcAJjwh20dVjcgem7E/cuRYI3oJLLvYQ+ASgv8XAiNa7ppmlgU6XhPA6GYtqKoZR3fu3fH0/fAszIIIFAPBK8qOhmxySIyDrWWrKuYpMQzSDacCQUwxif7uU4jghQbQUrtbrStM7Zkg11u66qDpqmeI4BLAE+pgdVsP9xtSKACLO+1Wps7nVkaBfxn2LZsM/lXVqvVEFgz1YAkl9ezGfz0QDr9HlYzudxOsJ+jhvyuTx+nuGevnlfAEzeVgDsx85B8+vU6/m3Vy4Ezp0NuviQl3PHgu7w41ez77akegGmULUVUFUVGYaxkBU2Kgul8hpUwbudDPehuFbKrIjfYfeMruvIVsBKgluNKswtf1vlWMYDzs8trZSgP8v4ryHbKcDu3bCaE8oa3AMaekhywoYGxAo6wfoEzmOpG3bkfHa3uHhtRBRFtDkz9cmZSLf/RwCVwJPJBNI0559vWciexD82hT6TJAk1GruDIMdeY++lmk2l0ncgjMLopu1wvwUYABV2LjHdnHiZAAAAAElFTkSuQmCC"
const addDarkModeButton = function() {
const buttons = document.querySelector('#character-tools-account');
const darkModeButton = document.createElement('a');
const bulbImg = document.createElement("img");
darkModeButton.classList.add("icon");
darkModeButton.append(bulbImg);
bulbImg.classList.add("icon");
bulbImg.setAttribute("id", "dark-mode-toggle");
bulbImg.src = darkBulb;
buttons.prepend(darkModeButton);
}
addDarkModeButton();
const darkModeToggle = document.querySelector('#dark-mode-toggle');
const enableDarkMode = function() {
document.body.classList.add('dark');
document.querySelector("#dark-mode-toggle").setAttribute("title", "Enable Dark Theme")
localStorage.setItem('darkmode', "enabled");
darkModeToggle.src = darkBulb;
}
const disableDarkMode = function() {
document.body.classList.remove('dark');
document.querySelector("#dark-mode-toggle").setAttribute("title", "Disable Dark Theme")
localStorage.setItem('darkmode', "disabled");
darkModeToggle.src = lightBulb;
}
if (localStorage.getItem('darkmode') !== "disabled") {
enableDarkMode();
} else {
disableDarkMode();
}
darkModeToggle.addEventListener('click', function() {
if (localStorage.getItem('darkmode') !== "disabled") {
disableDarkMode();
} else {
enableDarkMode();
}
});
addStyle(`:root {
/* Background Colors */
--bg-body: rgb(40, 42, 46);
--bg-dark: rgb(54, 57, 63);
--bg-darker: rgb(47, 49, 55);
--bg-darkest: rgb(40, 42, 46);
--bg-header: rgb(98, 113, 122);
--bg-table: rgb(33, 35, 38);
--bg-quote: rgb(214, 214, 214);
--bg-spoiler: rgb(36, 47, 61);
--bg-highlight: rgb(96, 96, 67);
--bg-notification: rgb(64, 68, 75);
--bg-input: rgb(66, 76, 82);
--bg-hover: rgb(110, 126, 135);
/* Opacity */
--op-1: rgba(255, 255, 255, 0.02);
--op-2: rgba(255, 255, 255, 0.07);
/* Font Colors */
--fc-primary: rgb(214, 214, 214);
--fc-link: rgb(141, 202, 226);
--fc-link-contrast: rgb(53, 50, 65);
--fc-bar: rgb(33, 35, 38);
/* Progress Bars */
--bar-full: rgb(246, 231, 19);
--bar-high: rgb(66, 215, 83);
--bar-med: rgb(104, 166, 196);
--bar-low: rgb(222, 52, 43);
--bar-progress: rgb(66, 215, 83);
}
::selection {
color: rgb(255, 255, 255);
background: rgb(110, 130, 140);
}
#dark-mode-toggle {
cursor: pointer;
}
body.dark {
background-image: none;
background-color: var(--bg-body);
color: var(--fc-primary);
}
body.dark div.box h2 {
background-image: none;
}
body.dark div.box h2,
body.dark table.data th {
padding: 0.75rem;
}
body.dark div.box h2,
body.dark table.data th {
background-color: var(--bg-darkest);
color: var(--fc-primary);
}
body.dark div.box div.tabs,
body.dark div.its-pop-menu {
background-color: var(--bg-darkest);
border-bottom: none;
}
body.dark div.box div.tabs .active,
body.dark div.its-pop-menu ul li a.active{
background: none;
background-color: var(--op-2);
}
body.dark div#note,
body.dark div#note .noteheader,
body.dark div#note .notebody,
body.dark div#note .notefooter {
color: var(--fc-primary);
background-image: none;
background-color: var(--bg-darker);
}
body.dark div#ppm-main.its-pop div.content h1.article {
color: var(--fc-primary);
}
body.dark div#top-menu-nav ul li a {
color: var(--fc-primary);
}
body.dark div#header,
body.dark div#character-tools,
body.dark div#top-menu {
background-image: none;
background-color: var(--bg-header);
}
body.dark div#top-menu-nav ul li a {
background-image: none;
}
body.dark div#top-menu-nav ul li a.active {
background-image: none;
background-color: var(--op-2);
}
body.dark div.whiteBox {
background-color: var(--bg-dark);
color: var(--fc-primary);
}
body.dark div.entityLogo {
border-bottom: 5px solid var(--bg-dark);
}
body.dark div#ppm-main.its-pop {
background-image: none;
}
body.dark div#ppm-main,
body.dark div#ppm-footer {
background-image: none;
background-color: var(--bg-dark);
}
body.dark div.box {
background-color: var(--bg-darker);
color: var(--fc-primary);
}
body.dark div#notifications {
border-bottom: none;
}
body.dark div#notifications div.notification-loading {
background-color: var(--bg-notification);
}
body.dark table.data tr.even td {
background-color: var(--op-2);
}
body.dark table.data tr.odd td {
background-color: var(--op-1);
}
body.dark table.data tr.selected td {
background-color: rgba(0, 199, 199, 0.1) !important;
}
body.dark table.data td a strong {
color: var(--fc-primary);
text-shadow: 0 0 5px black;
}
body.dark div.plusMinusBar {
color: var(--fc-bar);
}
body.dark div.progressBar,
body.dark div.greenProgressBar {
background: none !important;
background-color: var(--bg-darkest) !important;
border-color: var(--bg-darkest);
color: var(--fc-bar);
}
body.dark div.blueProgressBar {
color: var(--fc-bar);
}
body.dark div.full,
body.dark div.med,
body.dark div.high,
body.dark div.low {
background: none !important;
}
body.dark div.full {
background-color: var(--bar-full) !important;
}
body.dark div.high {
background-color: var(--bar-high) !important;
}
body.dark div.med {
background-color: var(--bar-med) !important;
}
body.dark div.low {
background-color: var(--bar-low) !important;
}
body.dark div.greenProgressBar div.med,
body.dark div.greenProgressBar div.low {
background-color: var(--bar-progress) !important;
}
body.dark table.data th {
background-image: none;
border-bottom-left-radius: 0px !important;
border-bottom-right-radius: 0px !important;
}
body.dark table.data td {
border-radius: 0px !important;
}
body.dark table.data tr td.forumPrio {
background-image: none !important;
}
body.dark thead a {
color: var(--fc-primary);
}
body.dark a,
body.dark div#ppm-sidemenu div.box div.menu a,
body.dark div#ppm-main.its-pop div.content h1 a,
body.dark div#ppm-main.its-pop div.content h2 a {
color: var(--fc-link);
}
body.dark div.tb div.tbcw {
background-color: var(--bg-table);
}
body.dark div.tbslw,
body.dark div.tbfbll,
body.dark div.tbbll.tbsrg,
body.dark div.tbsly,
body.dark div.tbbll.tbsrw {
background: none;
}
body.dark div.box h2 a,
body.dark table.data th a,
body.dark div.box div.tabs a {
color: var(--fc-primary);
}
body.dark h3.menu {
color: var(--fc-primary);
}
body.dark #pdsetlist .pdevent,
body.dark #simplesetlist .event {
background-color: var(--op-2);
}
body.dark #pdsetlist .pdsong,
body.dark #simplesetlist .song {
background-color: var(--op-1);
}
body.dark div.tbcg {
background-color: var(--op-1);
}
body.dark div.tbcy {
background-color: var(--bg-highlight);
}
body.dark input[type="submit"],
body.dark input[type="password"] {
padding: 0.5rem 1rem;
background-color: var(--bg-input);
color: var(--fc-primary);
transition: background-color 0.1s ease-out;
border-color: var(--bg-darkest);
border-radius: 5px !important;
cursor: pointer;
}
body.dark input[type="submit"]:hover,
body.dark input[type="submit"]:focus {
background-color: var(--bg-hover);
}
body.dark input[type="submit"]:disabled,
body.dark input[type="button"]:disabled {
cursor: not-allowed;
background-color: var(--bg-darker);
}
body.dark div.tbcg blockquote.quote,
body.dark div.tbcy blockquote.quote {
background-color: var(--bg-quote);
}
body.dark blockquote.quote a,
body.dark div.tbcg blockquote.quote a,
body.dark div.tbcy blockquote.quote a {
color: var(--fc-link-contrast);
}
body.dark blockquote.spoiler {
background: var(--bg-spoiler);
}
body.dark div.entityLogoNoImg {
border: none;
}
body.dark div.localebox {
background: var(--bg-darker) !important;
color: var(--fc-primary);
}
body.dark textarea,
body.dark input[type="text"],
body.dark input[type="password"],
body.dark select,
body.dark option {
border-color: var(--bg-darkest);
background-color: var(--bg-dark);
color: var(--fc-primary);
}
body.dark div#character-tools select,
body.dark div#character-tools option {
background-color: var(--bg-dark);
}
body.dark div#character-tools-location {
color: var(--fc-primary);
}
body.dark div#character-tools option:active {
background: var(--fc-primary) !important;
}
body.dark div#topcolumn {
background: var(--bg-darker) !important;
}
body.dark div.avatar {
border: none;
}
body.dark div.buttons a {
background-color: rgb(var(--bg-4));
color: var(--fc-primary);
padding: 3px 5px;
border-radius: 3px;
}
body.dark div.buttons a:hover,
body.dark div.buttons a:focus {
background-color: var(--bg-dark);
}
body.dark div#top-menu-notifications-list {
background: var(--bg-darker);
}
body.dark div#top-menu-notifications-list h2 {
background: var(--bg-darkest) url(../../../Images/bgr_shortfade.png) repeat-x !important;
}
body.dark .inner {
background-color: var(--bg-darker);
}
body.dark div.forumMessageHeader,
body.dark div.forumSignature,
body.dark div.forumSignatureFull,
body.dark div.forumEdit {
color: var(--fc-primary);
}
body.dark div.ppmlpreview div {
background-color: var(--bg-dark);
}
body.dark .Achievement,
body.dark .charMainValues img {
filter: brightness(80%);
}`
);
}
}