Customize website font size, background color, and text color
Per
// ==UserScript==
// @name Website Customizer
// @namespace http://tampermonkey.net/
// @version 1
// @description Customize website font size, background color, and text color
// @author Wrldz
// @license MIT
// @match *://*/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
// Create a div element to hold the customization controls
var customizerDiv = document.createElement("div");
customizerDiv.style.position = "fixed";
customizerDiv.style.bottom = "20px";
customizerDiv.style.right = "20px";
customizerDiv.style.padding = "10px";
customizerDiv.style.backgroundColor = "white";
customizerDiv.style.borderRadius = "10px";
customizerDiv.style.boxShadow = "0px 0px 10px rgba(0,0,0,0.5)";
// Create a font size control
var fontSizeLabel = document.createElement("label");
fontSizeLabel.textContent = "Font Size: ";
var fontSizeInput = document.createElement("input");
fontSizeInput.type = "range";
fontSizeInput.min = "12";
fontSizeInput.max = "24";
fontSizeInput.value = "16";
fontSizeInput.style.marginLeft = "5px";
fontSizeInput.style.verticalAlign = "middle";
fontSizeInput.addEventListener("input", function() {
document.body.style.fontSize = fontSizeInput.value + "px";
});
fontSizeLabel.appendChild(fontSizeInput);
customizerDiv.appendChild(fontSizeLabel);
// Create a background color control
var bgColorLabel = document.createElement("label");
bgColorLabel.textContent = "Background Color: ";
var bgColorInput = document.createElement("input");
bgColorInput.type = "color";
bgColorInput.value = "#ffffff";
bgColorInput.style.marginLeft = "5px";
bgColorInput.style.verticalAlign = "middle";
bgColorInput.addEventListener("input", function() {
document.body.style.backgroundColor = bgColorInput.value;
});
bgColorLabel.appendChild(bgColorInput);
customizerDiv.appendChild(bgColorLabel);
// Create a text color control
var textColorLabel = document.createElement("label");
textColorLabel.textContent = "Text Color: ";
var textColorInput = document.createElement("input");
textColorInput.type = "color";
textColorInput.value = "#000000";
textColorInput.style.marginLeft = "5px";
textColorInput.style.verticalAlign = "middle";
textColorInput.addEventListener("input", function() {
document.body.style.color = textColorInput.value;
});
textColorLabel.appendChild(textColorInput);
customizerDiv.appendChild(textColorLabel);
// Add the customizer div to the document
document.body.appendChild(customizerDiv);
})();