☰

Enhanced Pure Black Background with Custom Colors

Apply a pure black background to any website and enhance browsing experience with customizable colors and transparency options

当前为 2024-09-07 提交的版本，查看 最新版本。

// ==UserScript==
// @name         Enhanced Pure Black Background with Custom Colors
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  Apply a pure black background to any website and enhance browsing experience with customizable colors and transparency options
// @author       Your Name
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Load saved preferences
    const savedTextColor = localStorage.getItem('textColor') || '#FFFFFF';
    const savedLinkColor = localStorage.getItem('linkColor') || '#1E90FF';
    const savedVisitedLinkColor = localStorage.getItem('visitedLinkColor') || '#551A8B';
    const savedTransparency = localStorage.getItem('transparency') || '1';
    const disableTransparency = localStorage.getItem('disableTransparency') === 'true';
    const disableColors = localStorage.getItem('disableColors') === 'true';

    // Apply styles
    const applyStyles = () => {
        const textColor = disableColors ? '#FFFFFF' : savedTextColor;
        const linkColor = disableColors ? '#1E90FF' : savedLinkColor;
        const visitedLinkColor = disableColors ? '#551A8B' : savedVisitedLinkColor;
        const transparency = disableTransparency ? '1' : savedTransparency;

        style.innerHTML = `
            html, body, div, span, applet, object, iframe,
            h1, h2, h3, h4, h5, h6, p, blockquote, pre,
            a, abbr, acronym, address, big, cite, code,
            del, dfn, em, img, ins, kbd, q, s, samp,
            small, strike, strong, sub, sup, tt, var,
            b, u, i, center, dl, dt, dd, ol, ul, li,
            fieldset, form, label, legend, table, caption,
            tbody, tfoot, thead, tr, th, td, article,
            aside, canvas, details, embed, figure,
            figcaption, footer, header, hgroup, menu,
            nav, output, ruby, section, summary, time,
            mark, audio, video {
                background-color: rgba(0, 0, 0, ${transparency}) !important;
                color: ${textColor} !important;
            }
            a:link {
                color: ${linkColor} !important;
            }
            a:visited {
                color: ${visitedLinkColor} !important;
            }
            img {
                loading: lazy;
            }
        `;
    };

    // Initial style application
    const style = document.createElement('style');
    style.type = 'text/css';
    document.head.appendChild(style);
    applyStyles();

    // Block ads
    const adSelectors = ['.ad', '.ads', '[id^="ad-"]', '[class*="ad-"]'];
    adSelectors.forEach(selector => {
        document.querySelectorAll(selector).forEach(ad => ad.remove());
    });

    // Create a button to show the customization box
    const showDialogButton = document.createElement('button');
    showDialogButton.textContent = 'Customize';
    showDialogButton.style.position = 'fixed';
    showDialogButton.style.top = '10px';
    showDialogButton.style.right = '10px';
    showDialogButton.style.zIndex = '10000';
    document.body.appendChild(showDialogButton);

    // Create a dialog box for color customization
    const dialog = document.createElement('div');
    dialog.style.position = 'fixed';
    dialog.style.top = '50px';
    dialog.style.right = '10px';
    dialog.style.backgroundColor = '#333';
    dialog.style.color = '#FFF';
    dialog.style.padding = '10px';
    dialog.style.borderRadius = '5px';
    dialog.style.zIndex = '10000';
    dialog.style.display = 'none';

    dialog.innerHTML = `
        <label>Text Color: <input type="color" id="textColor" value="${savedTextColor}"></label><br>
        <label>Link Color: <input type="color" id="linkColor" value="${savedLinkColor}"></label><br>
        <label>Visited Link Color: <input type="color" id="visitedLinkColor" value="${savedVisitedLinkColor}"></label><br>
        <label>Transparency: <input type="range" id="transparency" min="0" max="1" step="0.1" value="${savedTransparency}"></label><br>
        <label><input type="radio" name="disableTransparency" id="disableTransparency" ${disableTransparency ? 'checked' : ''}> Disable Transparency</label><br>
        <label><input type="radio" name="disableColors" id="disableColors" ${disableColors ? 'checked' : ''}> Disable All Colors</label><br>
        <button id="applyColors">Apply</button>
        <button id="saveAndClose">Save & Close</button>
    `;
    document.body.appendChild(dialog);

    showDialogButton.addEventListener('click', () => {
        dialog.style.display = 'block';
    });

    document.getElementById('applyColors').addEventListener('click', () => {
        const textColor = document.getElementById('textColor').value;
        const linkColor = document.getElementById('linkColor').value;
        const visitedLinkColor = document.getElementById('visitedLinkColor').value;
        const transparency = document.getElementById('transparency').value;
        const disableTransparency = document.getElementById('disableTransparency').checked;
        const disableColors = document.getElementById('disableColors').checked;

        localStorage.setItem('textColor', textColor);
        localStorage.setItem('linkColor', linkColor);
        localStorage.setItem('visitedLinkColor', visitedLinkColor);
        localStorage.setItem('transparency', transparency);
        localStorage.setItem('disableTransparency', disableTransparency);
        localStorage.setItem('disableColors', disableColors);

        applyStyles();
    });

    document.getElementById('saveAndClose').addEventListener('click', () => {
        dialog.style.display = 'none';
    });
})();