Warning: fopen(/www/sites/update.greasyfork.icu/index/store/temp/aedb16d87fe1f8e87ff8097d0a1571a7.js): failed to open stream: No space left on device in /www/sites/update.greasyfork.icu/index/scriptControl.php on line 65
// ==UserScript== // @name Darkmode // @namespace http://tampermonkey.net/ // @version prerelease-3.0 // @description Adds a button to enable/disable darkmode // @author guildedbird // @match https://pixelplace.io/* // @grant GM_addStyle // @license MIT // @downloadURL https://update.greasyfork.icu/scripts/530651/Darkmode.user.js // @updateURL https://update.greasyfork.icu/scripts/530651/Darkmode.meta.js // ==/UserScript== (function() { 'use strict'; const disableOceanColor = false; const darkOceanColor = "rgba(20, 20, 20, 1)"; const defaultOceanColor = "rgba(204, 204, 204, 0)"; const style = "cover"; function updateDarkMode() { const isDarkModeEnabled = localStorage.getItem('darkModeEnabled') === 'true' ? true : false; if (isDarkModeEnabled) { darkModeElement.classList.add('selected'); document.body.classList.add('darkmode'); if (!disableOceanColor) { changeOceanColor(darkOceanColor); } } else { darkModeElement.classList.remove('selected'); document.body.classList.remove('darkmode'); if (!disableOceanColor) { changeOceanColor(defaultOceanColor); } } } function changeOceanColor(color) { if (disableOceanColor) return; const painting = document.querySelector('#painting'); if (painting) { painting.style.backgroundColor = color; } } function darkModeOcean() { const canvas = document.getElementById("canvas"); if (!canvas) return; const ctx = canvas.getContext("2d"); const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); const data = imageData.data; for (let i = 0; i < data.length; i += 4) { if (data[i] === 204 && data[i + 1] === 204 && data[i + 2] === 204) { data[i + 3] = 0; } } ctx.putImageData(imageData, 0, 0); } function canvasWait() { if (!document.getElementById("canvas")) { setTimeout(canvasWait, 100); } else { darkModeOcean(); } } canvasWait(); const css = ` #painting { position: absolute; display: flex; align-items: center; justify-content: center; top: 0; left: 0; cursor: move; background-size: ${style}; background-position: center; background-repeat: no-repeat; margin: 0; height: 100vh; overflow: hidden; } .darkmode #chat .messages .row a:hover[style="color:#000000"] { text-shadow: 1px 1px 1px #00000025; filter: brightness(0) saturate(100%) invert(97%) sepia(85%) saturate(12%) hue-rotate(184deg) brightness(103%) contrast(103%); } .darkmode #chat .messages .row a:hover[style="color:#222222"] { text-shadow: 1px 1px 1px #00000025; filter: brightness(0) saturate(100%) invert(97%) sepia(85%) saturate(12%) hue-rotate(184deg) brightness(103%) contrast(103%);`; const styleElement = document.createElement("style"); styleElement.type = "text/css"; styleElement.appendChild(document.createTextNode(css)); document.head.appendChild(styleElement); const modalContent = document.querySelector('#modals .box[data-id="main"] .box-content[data-id="tools"] div form'); const darkModeElement = document.createElement('a'); darkModeElement.href = '#'; darkModeElement.classList.add('input-checkbox'); darkModeElement.setAttribute('data-name', 'tools-enable-darkmode'); darkModeElement.innerHTML = `
Enable darkmode
Changes the menu theme to darkmode
`; const formChildren = modalContent.children; if (formChildren.length >= 10) { modalContent.insertBefore(darkModeElement, formChildren[9]); } else { modalContent.appendChild(darkModeElement); } updateDarkMode(); darkModeElement.addEventListener('click', function() { darkModeElement.classList.toggle('selected'); const isDarkModeNowEnabled = darkModeElement.classList.contains('selected'); localStorage.setItem('darkModeEnabled', isDarkModeNowEnabled.toString()); updateDarkMode(); setTimeout(() => { const notifications = document.querySelector('#notification'); if (!notifications) return; const existingNotification = notifications.querySelector('.box'); if (existingNotification) existingNotification.remove(); const notification = document.createElement('div'); notification.className = isDarkModeNowEnabled ? 'box success' : 'box warning'; notification.innerHTML = `
Tools
Darkmode ${isDarkModeNowEnabled ? 'enabled' : 'disabled'}
`; notifications.appendChild(notification); setTimeout(() => { notification.style.transition = 'opacity 1s'; notification.style.opacity = '0'; setTimeout(() => notification.remove(), 1000); }, 6000); }); }); document.querySelector('#container #copyright').innerHTML = "www.pixelplace.io"; GM_addStyle(` .darkmode #loader, .darkmode #loader-canvas{ background: url('https://i.imgur.com/v9kRnaf.png') no-repeat right bottom, linear-gradient(to bottom, rgba(50,50,50,1), rgba(20,20,20,1)); background-size: 5%; } .darkmode #modals .box[data-id=main], .darkmode #social, .darkmode #modals .box, body { background-color: #161616 !important; background-image: linear-gradient(to bottom, rgba(30,30,30,1), rgba(20,20,20,1)); border: 1px solid #4b4949; } .darkmode .box-x { background-color: #161616 !important; background-image: linear-gradient(to bottom, rgba(30,30,30,1), rgba(20,20,20,1)); border: 1px solid #4b4949; } wrapper * { background-color: #161616 !important; background-image: linear-gradient(to bottom, rgba(30,30,30,1), rgba(20,20,20,1)); border: 1px solid #4b4949; } .darkmode .box-x > .box-content-x { color: #ffffff !important; } .darkmode #modals .box[data-id=main] a { color: #ffffff; } .darkmode .btn, .darkmode button, .darkmode .prem-item .gift-item, .darkmode #menu-buttons-right-bottom > a, .darkmode #menu-buttons-right-bottom > a > .notification-bubble.green, .darkmode #modals .box .close, .darkmode #chat .buttons a, .darkmode #profile .box-x .close, .modx .box-x .close, .darkmode #guild .box-x .close, .darkmode #onlineUsers .box-x .close, .darkmode #item .box-x .close, .darkmode #checkout-method .box-x .close, .darkmode #coin-island .box-x .close, .darkmode #gold-rush .box-x .close, .darkmode #pixel-lottery .box-x .close, .darkmode #daily-reward .box-x .close{ background-color: #3b3b3b; } .darkmode #painting-grid { background-image: linear-gradient(to right, #3b3b3b 1px,transparent 1px),linear-gradient(to bottom, #3b3b3b 1px,transparent 1px) !important; } .darkmode .btn:hover, .darkmode button:hover, .darkmode .prem-item .darkmode .gift-item:hover, .darkmode #menu-buttons-right-bottom > a:hover, .darkmode #modals .box .close:hover, .darkmode #chat .buttons a:hover, .darkmode #more-colors-below:hover, .darkmode #more-colors-above:hover{ background-color: #4b4b4b; } .darkmode #menu-buttons > a:hover, .darkmode #menu-buttons-right-top > a:hover, .darkmode .favorite-btn.active:hover, .darkmode .favorite-btn.filled:hover, .darkmode .more-content-below:hover, .darkmode #menu-buttons-bottom > a:hover, .darkmode #menu-buttons-right-bottom > a:hover, .darkmode #more-colors-below:hover, .darkmode #more-colors-above:hover { background-color: #3b3b3b !important; } .darkmode .painting a, .darkmode .bold.text-center .followers, .darkmode .profile-name a, .darkmode #profile .box-x .box-content-x .user-avatar .edit-user-avatar a, #guild .edit-guild-emblem, .darkmode #guild .open-profile{ color: #8b8b8b; } .darkmode .painting a:hover, .darkmode .bold.text-center .followers:hover, .darkmode .darkmode .profile-name a:hover, .darkmode #profile .box-x .box-content-x .user-avatar .edit-user-avatar a:hover{ color: #9b9b9b; } .darkmode .c-loader-inner { background-color: #6b6b6b; } .darkmode #guild .box-x .box-content-x div form button{ background-color: #8b8b8b !important; } .darkmode #profile .edit-user-avatar, .darkmode #profile .text-center .display-block{ color: #8b8b8b !important; } .darkmode #tools, .darkmode #warTimer .box, .darkmode #menu-buttons-right-top > a, .darkmode #menu-buttons > a, .darkmode .favorite-btn.active, .darkmode .favorite-btn.filled, .darkmode .more-content-below, .darkmode #menu-buttons-bottom > a, .darkmode #menu-buttons-right-bottom > a, .darkmode #more-colors-below, .darkmode #more-colors-above{ background-color: #2b2b2b !important; } .darkmode #modals .box-content[data-id=top] div form#painting-list { background-color: transparent !important; } .darkmode .box-sub-menu li.selected a, .darkmode .box-sub-menu li.selected a { background-color: transparent !important; color: #9c9c9c !important; } .darkmode #modals a:hover{ color: #3b3b3b !important; } .darkmode #chat .messages .row .user:unstyled:hover{ border-bottom: 1px solid #757575 !important; } .darkmode #social .tabs-list a.active { border-bottom: 1px solid #757575 !important; } .darkmode #modals .box > .box-menu li.selected a { color: #9c9c9c !important; background-color: #282828 !important; } .darkmode .prem-coins:hover .buy-item, .darkmode .prem-item:hover .buy-item { filter: brightness(1.25) !important; } .darkmode #modals .box > .box-sub-menu li a:hover{ border-bottom: 1px solid #757575 !important; } .darkmode #modals .box > .box-menu{ background-color: #000000 !important; border-top: 1px solid #4b4949 !important; } .darkmode #modals .box > .box-menu li a { background-color: #00000000 !important; } .darkmode #modals .box > .box-content h1, .darkmode .prem-box .left > div, .darkmode .prem-box .right > div, .darkmode #blog .article .category, .darkmode #social .tabs-list a, .darkmode #social .list table td a, .darkmode #modals .box > .box-header, .darkmode #modals .box > .box-menu li a{ color: #ffffff; } .darkmode #loader .text, .darkmode #loader-canvas .text{ color: #ffffff; !important; } .darkmode .c-loader{ border: 4px solid #ffffff; } .darkmode #modals .box > .box-content, .darkmode #social .list{ scrollbar-color: #8f8f8f #00000000 !important; } #modals .box > .box-content .inline-checkbox input[type="checkbox"]:checked:before { background-color: #3b3b3b; border: 1px solid #3b3b3b; } .darkmode #chat .tabs > a:hover{ color: #ffffff !important; } #timemachine { background-color: rgb(0 0 0 / 75%); border-bottom: 2px dashed rgba(255, 255, 255, 0.75) } #timemachine > div b, #timemachine > div .inf, #timemachine > div .timestamp, #timemachine .check, .request-row .username{ color: white } `); const makeDraggable = (element, handle) => { let offsetX = 0, offsetY = 0, isDragging = false; const mouseMoveHandler = (e) => { if (!isDragging) return; element.style.position = 'absolute'; element.style.left = `${e.clientX - offsetX}px`; element.style.top = `${e.clientY - offsetY}px`; handle.style.cursor = 'grabbing'; }; const mouseUpHandler = () => { isDragging = false; handle.style.cursor = 'grab'; document.body.style.userSelect = ''; sessionStorage.setItem('toolsLeft', element.style.left); sessionStorage.setItem('toolsTop', element.style.top); document.removeEventListener('mousemove', mouseMoveHandler); document.removeEventListener('mouseup', mouseUpHandler); }; const mouseDownHandler = (e) => { sessionStorage.removeItem('toolsLeft'); sessionStorage.removeItem('toolsTop'); isDragging = true; offsetX = e.clientX - element.getBoundingClientRect().left; offsetY = e.clientY - element.getBoundingClientRect().top; document.addEventListener('mousemove', mouseMoveHandler); document.addEventListener('mouseup', mouseUpHandler); document.body.style.userSelect = 'none'; }; handle.style.cursor = 'grab'; handle.addEventListener('mousedown', mouseDownHandler); }; const waitForElement = (selector, callback) => { const interval = setInterval(() => { const element = document.querySelector(selector); if (element) { clearInterval(interval); callback(element); } }, 100); }; sessionStorage.removeItem('toolsLeft'); sessionStorage.removeItem('toolsTop'); waitForElement('#tools', (tools) => { const handle = document.createElement('div'); handle.style.position = 'absolute'; handle.style.top = '40px'; handle.style.right = '-35px'; handle.style.width = '20px'; handle.style.height = '20px'; handle.style.padding = '12px'; handle.style.background = '#2b2b2b'; handle.style.border = '2px solid #fff'; handle.style.borderRadius = '15px'; handle.style.cursor = 'grab'; handle.style.display = 'flex'; handle.style.alignItems = 'center'; handle.style.justifyContent = 'center'; handle.style.zIndex = '1000'; handle.style.boxShadow = '0px 0px 5px 0px rgba(0, 0, 0, 0.75)'; handle.title = 'Drag Me!'; const img = document.createElement('img'); img.src = 'https://i.imgur.com/DDjMbDW.png'; img.alt = 'Drag Icon'; img.style.width = '18px'; img.style.height = '18px'; img.style.pointerEvents = 'none'; handle.appendChild(img); const closeHandle = handle.cloneNode(true); closeHandle.style.top = '6px'; closeHandle.style.right = '-35px'; closeHandle.style.background = '#2b2b2b'; closeHandle.title = 'Close UI'; const closeImg = document.createElement('img'); closeImg.src = 'https://pixelplace.io/img/icons/x-modal.svg'; closeImg.alt = 'Close Icon'; closeImg.style.width = '16px'; closeImg.style.height = '16px'; closeImg.style.pointerEvents = 'none'; closeHandle.innerHTML = ''; closeHandle.appendChild(closeImg); closeHandle.addEventListener('click', () => { const paintingOwnerToolsLink = document.querySelector('a[title="Painting Owner Tools"]'); if (paintingOwnerToolsLink) { paintingOwnerToolsLink.click(); } }); const savedLeft = sessionStorage.getItem('toolsLeft'); const savedTop = sessionStorage.getItem('toolsTop'); tools.style.position = 'absolute'; if (savedLeft && savedTop) { tools.style.left = savedLeft; tools.style.top = savedTop; } tools.style.position = 'absolute'; tools.appendChild(closeHandle); tools.appendChild(handle); makeDraggable(tools, handle); const observer = new MutationObserver(() => { const display = getComputedStyle(tools).display; if (display !== 'none') { const newLeft = sessionStorage.getItem('toolsLeft'); const newTop = sessionStorage.getItem('toolsTop'); if (newLeft && newTop) { tools.style.left = newLeft; tools.style.top = newTop; } } }); observer.observe(tools, { attributes: true, attributeFilter: ['style'] }); }); })();