Change background color and font of websites
// ==UserScript== // @name BruneThemer // @namespace http://tampermonkey.net/ // @version 0.1 // @description Change background color and font of websites // @author Brune & ChatGPT // @match *://*/* // @grant none // @license BruneThemer © 2024 by BruneGaming // ==/UserScript== (function() { 'use strict'; function addStyle(css) { const style = document.createElement('style'); style.textContent = css; document.head.appendChild(style); } function createButton() { const button = document.createElement('button'); button.id = 'themesButton'; button.textContent = 'THEMES'; document.body.appendChild(button); button.addEventListener('click', toggleThemesMenu); } function createThemesMenu() { const themesMenu = document.createElement('div'); themesMenu.id = 'themesMenu'; themesMenu.style.display = 'none'; const themesContent = document.createElement('div'); themesContent.id = 'themesContent'; themesMenu.appendChild(themesContent); const colors = ['#000000', '#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', 'rainbow']; colors.forEach(color => { const colorCircle = document.createElement('div'); colorCircle.className = 'colorCircle'; if (color === 'rainbow') { colorCircle.style.backgroundImage = 'linear-gradient(to right, violet, indigo, blue, green, yellow, orange, red)'; } else { colorCircle.style.backgroundColor = color; } colorCircle.onclick = () => changeBackgroundColor(color); themesContent.appendChild(colorCircle); }); const closeButton = document.createElement('div'); closeButton.id = 'closeButton'; closeButton.textContent = '[X] Close'; closeButton.onclick = toggleThemesMenu; themesContent.appendChild(closeButton); document.body.appendChild(themesMenu); } function toggleThemesMenu() { const themesMenu = document.getElementById('themesMenu'); const body = document.body; if (themesMenu.style.display === 'none') { themesMenu.style.display = 'block'; body.style.filter = 'blur(5px)'; } else { themesMenu.style.display = 'none'; body.style.filter = 'none'; } } function changeBackgroundColor(color) { document.body.style.backgroundColor = color; // Change font for each color switch (color) { case '#000000': document.body.style.fontFamily = 'Arial, sans-serif'; break; case '#ff0000': document.body.style.fontFamily = 'Comic Sans MS, cursive'; break; case '#00ff00': document.body.style.fontFamily = 'Georgia, serif'; break; case '#0000ff': document.body.style.fontFamily = 'Courier New, monospace'; break; case '#ffff00': document.body.style.fontFamily = 'Impact, fantasy'; break; case '#ff00ff': document.body.style.fontFamily = 'Times New Roman, serif'; break; case 'rainbow': document.body.style.fontFamily = 'Verdana, sans-serif'; break; default: break; } } addStyle(` #themesButton { display: block; position: fixed; top: 10px; right: 10px; cursor: pointer; background-color: #333; color: white; padding: 10px; border: none; border-radius: 5px; z-index: 9999; } #themesMenu { display: none; position: fixed; top: 50px; right: 10px; z-index: 9999; } #themesContent { background-color: rgba(255, 255, 255, 0.8); border-radius: 5px; padding: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } .colorCircle { display: inline-block; width: 30px; height: 30px; border-radius: 50%; margin-right: 5px; cursor: pointer; } #closeButton { display: block; margin-top: 10px; cursor: pointer; color: black; text-align: center; } #closeButton:hover { color: red; } `); createButton(); createThemesMenu(); })();