Greasy Fork is available in English.
Customize website font size, background color, and text color
// ==UserScript==
// @name Website Customizer
// @namespace http://tampermonkey.net/
// @version 2
// @description Customize website font size, background color, and text color
// @author Wrldz
// @license MIT
// @match *://*/*
// @grant none
// ==/UserScript==
(() => {
'use strict';
// Define the customization controls
const customizer = `
<div style="position: fixed; bottom: 20px; right: 20px; padding: 10px; background-color: white; border-radius: 10px; box-shadow: 0px 0px 10px rgba(0,0,0,0.5);">
<div style="display: flex; justify-content: space-between; align-items: center;">
<h3 style="margin: 0;">Website Customizer</h3>
<button id="closeButton" style="background-color: red; color: white; border: none; border-radius: 50%; width: 25px; height: 25px; cursor: pointer;">X</button>
</div>
<div id="controls" style="display: block;">
<label style="vertical-align: middle;">Font Size: <input type="range" min="12" max="24" value="16" style="margin-left: 5px; vertical-align: middle;" oninput="document.body.style.fontSize = this.value + 'px';"></label>
<label style="vertical-align: middle;">Background Color: <input type="color" value="#ffffff" style="margin-left: 5px; vertical-align: middle;" oninput="document.body.style.backgroundColor = this.value;"></label>
<label style="vertical-align: middle;">Text Color: <input type="color" value="#000000" style="margin-left: 5px; vertical-align: middle;" oninput="document.body.style.color = this.value;"></label>
</div>
<div id="openButtonContainer" style="display: none; margin-top: 10px;">
<button id="openButton" style="background-color: green; color: white; border: none; border-radius: 5px; padding: 5px 10px; cursor: pointer;">Open</button>
</div>
</div>
`;
// Add the customizer to the document body
document.body.insertAdjacentHTML('beforeend', customizer);
// Add event listener to the close button
const closeButton = document.getElementById('closeButton');
closeButton.addEventListener('click', () => {
document.getElementById('controls').style.display = 'none';
document.getElementById('openButtonContainer').style.display = 'block';
});
// Add event listener to the open button
const openButton = document.getElementById('openButton');
openButton.addEventListener('click', () => {
document.getElementById('openButtonContainer').style.display = 'none';
document.getElementById('controls').style.display = 'block';
});
})();