☰

Website Customizer

Customize website font size, background color, and text color

Fra 22.04.2023. Se den seneste versjonen.

// ==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);
})();