Change websites to pure black background with customization options
目前為
// ==UserScript==
// @name Pure Black Background Enhanced
// @namespace (link unavailable)
// @version 0.05
// @description Change websites to pure black background with customization options
// @match *://*/*
// @grant GM_getValue
// @grant GM_setValue
// @grant GM_registerMenuCommand
// @run-at document-start
// ==/UserScript==
(function() {
'use strict';
// Load settings
const cfg = {
bgColor: GM_getValue("bgColor", "#000000"),
textColor: GM_getValue("textColor", "#8cffb5"),
linkColor: GM_getValue("linkColor", "#ff66ff"),
imgBrightness: GM_getValue("imgBrightness", 0.8),
imgContrast: GM_getValue("imgContrast", 1.2)
};
// CSS styles
const css = `
html, body {
background-color: ${cfg.bgColor} !important;
color: ${cfg.textColor} !important;
}
* {
background-color: rgba(0, 0, 0, 0.5) !important;
border-color: #444444 !important;
}
a {
color: ${cfg.linkColor} !important;
}
img {
filter: brightness(${cfg.imgBrightness}) contrast(${cfg.imgContrast});
}
video, .html5-video-container video {
filter: none !important;
}
`;
// Apply styles
const style = document.createElement('style');
style.type = 'text/css';
style.appendChild(document.createTextNode(css));
document.head.appendChild(style);
// Mutation observer to handle dynamic content
const observer = new MutationObserver(function() {
document.documentElement.style.backgroundColor = cfg.bgColor;
document.body.style.backgroundColor = cfg.bgColor;
});
observer.observe(document, { childList: true, subtree: true });
// Create configuration window
function openConfigWindow() {
const div = document.createElement('div');
div.style.position = 'fixed';
div.style.top = '10%';
div.style.left = '50%';
div.style.transform = 'translateX(-50%)';
div.style.backgroundColor = '#333';
div.style.color = '#fff';
div.style.padding = '20px';
div.style.border = '1px solid #444';
div.style.zIndex = '10000';
div.innerHTML = `
<h2>Customize Dark Theme</h2>
<label>Background Color: <input type="color" id="bgColor" value="${cfg.bgColor}"> <input type="text" id="bgColorHex" value="${cfg.bgColor}" size="7"></label><br>
<label>Text Color: <input type="color" id="textColor" value="${cfg.textColor}"> <input type="text" id="textColorHex" value="${cfg.textColor}" size="7"></label><br>
<label>Link Color: <input type="color" id="linkColor" value="${cfg.linkColor}"> <input type="text" id="linkColorHex" value="${cfg.linkColor}" size="7"></label><br>
<label>Image Brightness: <input type="range" id="imgBrightness" min="0" max="1" step="0.1" value="${cfg.imgBrightness}"></label><br>
<label>Image Contrast: <input type="range" id="imgContrast" min="1" max="2" step="0.1" value="${cfg.imgContrast}"></label><br>
<button id="saveConfig">Save</button>
<button id="closeConfig">Close</button>
`;
document.body.appendChild(div);
// Sync color input and hex input
document.getElementById('bgColor').addEventListener('input', function() {
document.getElementById('bgColorHex').value = this.value;
});
document.getElementById('bgColorHex').addEventListener('input', function() {
document.getElementById('bgColor').value = this.value;
});
document.getElementById('textColor').addEventListener('input', function() {
document.getElementById('textColorHex').value = this.value;
});
document.getElementById('textColorHex').addEventListener('input', function() {
document.getElementById('textColor').value = this.value;
});
document.getElementById('linkColor').addEventListener('input', function() {
document.getElementById('linkColorHex').value = this.value;
});
document.getElementById('linkColorHex').addEventListener('input', function() {
document.getElementById('linkColor').value = this.value;
});
document.getElementById('saveConfig').addEventListener('click', () => {
GM_setValue("bgColor", document.getElementById('bgColor').value);
GM_setValue("textColor", document.getElementById('textColor').value);
GM_setValue("linkColor", document.getElementById('linkColor').value);
GM_setValue("imgBrightness", parseFloat(document.getElementById('imgBrightness').value));
GM_setValue("imgContrast", parseFloat(document.getElementById('imgContrast').value));
location.reload();
});
document.getElementById('closeConfig').addEventListener('click', () => {
div.remove();
});
}
// Menu command to open configuration window
if (typeof GM_registerMenuCommand !== "undefined") {
GM_registerMenuCommand("Customize Dark Theme", openConfigWindow, "C");
}
})();