Adds a button to enable/disable darkmode
目前为
// ==UserScript==
// @name Darkmode
// @namespace http://tampermonkey.net/
// @version prerelease-2.0
// @description Adds a button to enable/disable darkmode
// @author guildedbird
// @match https://pixelplace.io/*
// @grant GM_addStyle
// @license MIT
// ==/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 =
`<div>
<div class="input">
<div></div>
</div>
</div>
<div>
<div class="header">Enable darkmode</div>
<div class="content">
Changes the menu theme to darkmode
</div>
</div>`;
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 =
`<div class="icon"></div>
<div class="content">
<div class="title">Tools</div>
<div class="description">Darkmode ${isDarkModeNowEnabled ? 'enabled' : 'disabled'}</div>
</div>`;
notifications.appendChild(notification);
setTimeout(() => {
notification.style.transition = 'opacity 1s';
notification.style.opacity = '0';
setTimeout(() => notification.remove(), 1000);
}, 6000);
});
});
document.querySelector('#container #copyright').innerHTML = "<span title='Click to read Terms, Copyright & more (script made by @guildedbird)'>www.pixelplace.io</span>";
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 #profile .box-x > .box-content-x, .darkmode #social, .darkmode #modals .box, .darkmode #guild .box-x, .darkmode #gold-rush .box-x,
.darkmode #coin-island .box-x, .darkmode #artist-island .box-x, #onlineUsers .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, .darkmode #more-colors-below, .darkmode #more-colors-above{
background-color: #3b3b3b;
}
.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:hover, .darkmode #more-colors-below:hover, .darkmode #more-colors-above:hover{
background-color: #4b4b4b;
}
.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 #menu-buttons > a, .darkmode .favorite-btn.active, .darkmode .favorite-btn.filled, .darkmode .more-content-below{
background-color: #1f2728 !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: #4b4b4b !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;
}
`);
})();