☰

Dark Mode+

Sketchful dark theme improvements

/* eslint-disable no-undef */
// ==UserScript==
// @name        Dark Mode+
// @match       https://sketchful.io/
// @grant       none
// @version     1.3.1
// @description Sketchful dark theme improvements
// @author      bebell
// @run-at      body-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 themes = document.querySelector('#menuSettingsTheme');
const brightnessLayer = document.createElement('div');
const settingsContainer = document.querySelector(
	'#menuSettings > div.row.justify-content-center > div'
);

wrap(canvas, brightnessLayer);

const styleRules = [
	'.dark .table { color: white !important; }',
	'.table { color: black !important; }',
	'.dark { background-color: #1d1f22 !important; }',
	'.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; }',
	'.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; }',
	'.dark #gameChatList li:not(.chatAdmin) b { color: #BBB }',
	'#gameChatList li:not(.chatAdmin) b { color: black }',
	'.dark .gameAvatarRank { color: #148FA2 }',
	'.dark #gameWinners li b { color: white !important }',
	'.dark .gameSticky { color: white !important }',
	'#gameSticky font { color: black!important }',
	'.dark #gameSticky font { color: #eee!important }'
];

const sheet = window.document.styleSheets[window.document.styleSheets.length - 1];
styleRules.forEach((rule) => sheet.insertRule(rule));

let btn;
const 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');

brightnessLayer.style.filter = darkMode
	? `brightness(${localStorage.canvasBrightness})` || ''
	: '';

themes.onchange = (e) => {
	if (e.target.value === 'Dark' && !grayCanvas) {
		pageHTML.classList.add('dark');
		e.stopImmediatePropagation();
	}
};

document.querySelector('#menu > div.menuNav > ul > li:nth-child(5) > a').onclick = () => {
	themes.value = darkMode ? 'Dark' : 'Light';
};

function wrap(toWrap, wrapper) {
	toWrap.parentNode.appendChild(wrapper);
	wrapper.appendChild(toWrap);
	return wrapper;
}

function darkClassObserver(mutations) {
	for (const mutation of mutations) {
		if (mutation.attributeName !== 'class') return;
		darkMode = pageHTML.classList.contains('dark');
		localStorage.dark = darkMode;
		brightnessLayer.style.filter = darkMode
			? `brightness(${localStorage.canvasBrightness})` || ''
			: '';
		fixColors();
		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.firstChild;
	icon.remove();
	const newIcon = document.createElement('img');
	newIcon.setAttribute('style', 'width: 64px; height: 64px');
	newIcon.setAttribute('class', 'mr-3 lazy');
	newIcon.src = 'https://i.imgur.com/GkVJWun.gif';
	const slider = sliderContainer.querySelector('#menuSettingsVolume');
	slider.value = localStorage.canvasBrightness || 1;
	slider.onchange = changeBrightness;
	sliderContainer.insertBefore(newIcon, sliderContainer.firstChild);

	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';

	const btnSwitch = document.createElement('label');
	const input = document.createElement('input');
	const span = document.createElement('span');
	span.setAttribute('class', 'slider round');
	input.type = 'checkbox';
	input.checked = grayCanvas;
	input.onchange = () => {
		grayCanvas = input.checked;
		localStorage.grayCanvas = grayCanvas;
		if (!grayCanvas && darkMode) {
			themes[0].selected = true;
			themes.dispatchEvent(new Event('change'));
			pageHTML.classList.add('dark');
			themes.value = darkMode ? 'Dark' : 'Light';
		}
	};
	btnSwitch.setAttribute('class', 'switch');
	btnSwitch.append(input, span);
	grayCanvasToggle.append(label, btnSwitch);
	settingsContainer.append(sliderContainer, grayCanvasToggle);
})();

(function toggleButtons() {
	btn = document.querySelector('#saveButton').cloneNode();
	btn.style.right = '100px';
	btn.setAttribute('data-original-title', 'Toggle Theme');
	btn.title = 'Toggle Theme';
	updateToggleStyle();
	btn.onclick = toggleDarkMode;

	document.querySelector('#gameInterface').append(btn);
})();

function changeBrightness() {
	brightnessLayer.style.filter = `brightness(${this.value})`;
	localStorage.canvasBrightness = this.value;
}

function updateToggleStyle() {
	btn.style.backgroundImage = darkMode ? 'url(https://i.imgur.com/imL02Mq.gif)' :
		'url(https://i.imgur.com/2ZdZ9oh.gif)';
}

function toggleDarkMode() {
	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]];

		if (r === 255 && g === 255 && b === 255 && darkMode) {
			const color = 68;
			data[i] = color;
			data[i + 1] = color;
			data[i + 2] = color;
		}
		else if (r === 68 && g === 68 && b === 68 && !darkMode) {
			const color = 255;
			data[i] = color;
			data[i + 1] = color;
			data[i + 2] = color;
		}
	}

	ctx.putImageData(imgData, 0, 0);
}

function fixColors() {
	let names = document.getElementsByClassName('gameAvatarName');
	updateToggleStyle();
	if (!names.length) {names = document.getElementsByClassName('gameSettingsAvatarName');}
	for (const 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
});