☰

Popmundo - Dark Theme | Karanlık Tema

🇬🇧 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.

当前为 2021-08-11 提交的版本，查看 最新版本。

// ==UserScript==
// @name         Popmundo - Dark Theme | Karanlık Tema
// @namespace    bheuv.dev / Faun Fangorn
// @version      1.9
// @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", "Disable Dark Theme")
			localStorage.setItem('darkmode', "enabled");
			darkModeToggle.src = darkBulb;
		}
		const disableDarkMode = function() {
			document.body.classList.remove('dark');
            document.querySelector("#dark-mode-toggle").setAttribute("title", "Enable 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 blockquote.quote,
body.dark blockquote.quote {
  background-color: var(--bg-quote);
}

body.dark blockquote.quote blockquote.spoiler {
color: var(--fc-primary);
}

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 blockquote.quote blockquote.spoiler a {
 color: var(--fc-link);
 }

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%);
}`
		);
	}
}

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址