Sketchful dark theme improvements
目前為
// ==UserScript==
// @name Dark Mode+
// @match https://sketchful.io/
// @grant none
// @version 1.0
// @description Sketchful dark theme improvements
// @author Bell
// @run-at document-end
// jshint esversion: 6
// @namespace https://greasyfork.org/users/281093
// ==/UserScript==
let grayCanvas = localStorage.grayCanvas
? JSON.parse(localStorage.grayCanvas)
: true;
const pageHTML = document.querySelector("html");
const canvas = document.querySelector("#canvas");
const ctx = canvas.getContext("2d");
const settingsContainer = document.querySelector(
"#menuSettings > div.row.justify-content-center > div"
);
const styleRules = [
"html.dark .table { color: white !important; }",
".table { color: black !important; }",
"html.dark { background-color: #1d1f22 !important; }",
"html.dark .table th, html.dark .table thead, html.dark .table td { border-color: #454d55 !important; }",
".table th, .table thead, .table td { border-color: #dee2e6 !important; }",
"html.dark .table.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255,255,255,.05)!important; }",
".table.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(0,0,0,.05)!important; }",
"html.dark #gameChatList li:not(.chatAdmin) b { color: #BBB }",
"#gameChatList li:not(.chatAdmin) b { color: black }",
"html.dark .gameAvatarRank { color: #148FA2 }",
"html.dark #gameWinners li b { color: white !important }",
"html.dark .gameSticky { color: white !important }",
"#gameSticky font { color: black!important }",
"html.dark #gameSticky font { color: #eee!important }",
];
const sheet =
window.document.styleSheets[window.document.styleSheets.length - 1];
styleRules.forEach((rule) => sheet.insertRule(rule));
let stored = localStorage.dark;
let darkMode = stored
? JSON.parse(stored)
: JSON.parse(localStorage.getItem("settings")).dark;
if (darkMode) pageHTML.classList.add("dark");
else pageHTML.classList.remove("dark");
function darkClassObserver(mutations, observer) {
for (let mutation of mutations) {
if (mutation.attributeName !== "class") return;
darkMode = pageHTML.classList.contains("dark");
localStorage.dark = darkMode;
canvas.style.filter = darkMode
? `brightness(${localStorage.canvasBrightness})` || ""
: "";
fixColors();
document.querySelector("#menuLobbiesRefresh").click();
grayCanvas && toggleCanvasDarkMode();
}
}
const gameObserver = new MutationObserver(darkClassObserver);
gameObserver.observe(pageHTML, { attributes: true });
(function addBrightnessSlider() {
const sliderContainer = document
.querySelector("#menuSettingsVolumeIcon")
.parentNode.cloneNode(true);
sliderContainer.getElementsByTagName("h5")[0].textContent =
"Canvas Brightness";
const icon = sliderContainer.children[0];
icon.onload = () => {
icon.src = "https://faust.s-ul.eu/Sa78AixS";
};
const slider = sliderContainer.querySelector("#menuSettingsVolume");
slider.value = localStorage.canvasBrightness || 1;
slider.onchange = changeBrightness;
const grayCanvasToggle = document.createElement("div");
grayCanvasToggle.setAttribute(
"style",
"display: flex; justify-content: space-between"
);
const label = document.createElement("label");
label.style.fontSize = "20px";
label.textContent = "Gray Canvas";
// AAAAAAAAAAAAAAA
let btnSwitch = document.createElement("label");
btnSwitch.setAttribute("class", "switch");
let input = document.createElement("input");
input.type = "checkbox";
let span = document.createElement("span");
span.setAttribute("class", "slider round");
btnSwitch.append(input, span);
input.checked = grayCanvas;
input.onchange = () => {
console.log(input.checked);
grayCanvas = input.checked;
localStorage.grayCanvas = grayCanvas;
};
grayCanvasToggle.append(label, btnSwitch);
settingsContainer.append(sliderContainer, grayCanvasToggle);
})();
(function toggleButtons() {
const btn = document.querySelector("#saveButton").cloneNode();
btn.style.right = "100px";
btn.style.backgroundImage = "url(https://i.imgur.com/BLfKL8d.png)";
btn.removeAttribute("data-toggle");
btn.onclick = toggleDarkMode;
document.querySelector("#gameInterface").append(btn);
})();
function changeBrightness() {
canvas.style.filter = `brightness(${this.value})`;
localStorage.canvasBrightness = this.value;
}
function toggleDarkMode() {
const themes = document.querySelector("#menuSettingsTheme");
if (!grayCanvas) {
pageHTML.classList.toggle("dark");
} else {
themes[darkMode ? 0 : 1].selected = true;
themes.dispatchEvent(new Event("change"));
}
}
function toggleCanvasDarkMode() {
const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imgData.data;
for (let i = 0; i < data.length; i += 4) {
const [r, g, b] = [data[i], data[i + 1], data[i + 2]];
let color;
if (r === 255 && g === 255 && b === 255 && darkMode) color = 68;
else if (r === 68 && g === 68 && b === 68 && !darkMode) color = 255;
if (!color) return;
data[i] = color;
data[i + 1] = color;
data[i + 2] = color;
}
ctx.putImageData(imgData, 0, 0);
}
function fixColors() {
let names = document.getElementsByClassName("gameAvatarName");
if (!names.length)
names = document.getElementsByClassName("gameSettingsAvatarName");
for (let name of names) {
if (darkMode && name.style.color === "black") {
name.style.color = "#ccc";
} else if (!darkMode && name.style.color === "rgb(204, 204, 204)") {
name.style.color = "black";
}
}
}
const colorObserver = new MutationObserver(() => {
fixColors();
});
colorObserver.observe(document.querySelector("#gamePlayersList"), {
childList: true,
});