☰

新版图寻主页背景更改&主题色设置插件 Tuxun Main Page Background Image Changer & Theme Color Setting

操作按钮位于窗口右下角！此脚本支持以本地图片或网络图片作为图寻网站背景，支持图寻网站主题色更改。图片转链接可以使用网站：smms.app

目前為 2024-07-12 提交的版本，檢視 最新版本。

// ==UserScript==
// @name         新版图寻主页背景更改&主题色设置插件 Tuxun Main Page Background Image Changer & Theme Color Setting
// @version      1.16
// @description  操作按钮位于窗口右下角！此脚本支持以本地图片或网络图片作为图寻网站背景，支持图寻网站主题色更改。图片转链接可以使用网站：smms.app
// @author       zyhxghy
// @match        https://tuxun.fun/*
// @exclude      https://tuxun.fun/replay-pano?*
// @grant        none
// @namespace https://gf.qytechs.cn/users/1251388
// ==/UserScript==

(function() {
    'use strict';

    var storedImageUrl = localStorage.getItem('customImageUrl');
    var imageUrl = storedImageUrl || 'https://s2.loli.net/2024/01/21/WvsJiRdQTSE7Kxa.jpg';
    var storedBrightness = localStorage.getItem('brightnessValue');
    var storedBrightnessValue = localStorage.getItem('customBrightnessValue');
    var brightnessValue = storedBrightnessValue ? parseFloat(storedBrightnessValue) : 0.95;

    function updateBackgroundImage() {
        var existingStyles = document.querySelectorAll('style[data-source="userscript-background"]');
        existingStyles.forEach(function(style) {
            style.remove();
        });

        var style = document.createElement('style');
        style.setAttribute('data-source', 'userscript-background');
        style.innerHTML = `
            body::before {
                content: '';
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: -1;
                background-image: url(${imageUrl});
                background-size: cover;
                background-position: center;
                filter: brightness(${brightnessValue});
            }
        `;
        document.head.appendChild(style);
    }

    updateBackgroundImage();

    function showModal() {
        var overlay = document.createElement('div');
        overlay.style.position = 'fixed';
        overlay.style.top = '0';
        overlay.style.left = '0';
        overlay.style.width = '100%';
        overlay.style.height = '100%';
        overlay.style.backgroundColor = 'transparent';
        overlay.style.zIndex = '100';
        document.body.appendChild(overlay);

        var modal = document.createElement('div');
        modal.style.position = 'fixed';
        modal.style.top = '50%';
        modal.style.left = '50%';
        modal.style.transform = 'translate(-50%, -50%)';
        modal.style.backgroundColor = 'rgba(255, 255, 255, 0.9)';
        modal.style.padding = '20px';
        modal.style.zIndex = '1001';
        modal.style.borderRadius = '5px';
        modal.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.5)';
        modal.style.display = 'flex';
        modal.style.flexDirection = 'column';
        modal.style.alignItems = 'center';
        modal.style.zIndex = '1001';

        /*图片上传*/

        var fileButton = document.createElement('button');
        fileButton.textContent = '选择本地图片';
        fileButton.style.margin = '10px';
        fileButton.style.color = 'black';
        fileButton.style.width = '120px';
        modal.appendChild(fileButton);

        var hiddenFileInput = document.createElement('input');
        hiddenFileInput.type = 'file';
        hiddenFileInput.style.display = 'none';
        document.body.appendChild(hiddenFileInput);

        fileButton.addEventListener('click', function() {
            hiddenFileInput.click();
        });

        hiddenFileInput.addEventListener('change', handleFileUpload);

        var urlButton = document.createElement('button');
        urlButton.textContent = '上传图片地址';
        urlButton.style.margin = '10px';
        urlButton.style.color = 'black';
        urlButton.style.width = '120px';
        modal.appendChild(urlButton);

        var elementToHide = document.querySelector('.home___kWbfw');
        if (elementToHide) {
            var hideElementCheckboxContainer = document.createElement('div');
            hideElementCheckboxContainer.style.margin = '10px';
            modal.appendChild(hideElementCheckboxContainer);

            var hideElementCheckbox = document.createElement('input');
            hideElementCheckbox.type = 'checkbox';
            hideElementCheckbox.id = 'hideElementCheckbox';
            hideElementCheckbox.checked = false;
            hideElementCheckboxContainer.appendChild(hideElementCheckbox);
            var hideElementLabel = document.createElement('label');
            hideElementLabel.htmlFor = 'hideElementCheckbox';
            hideElementLabel.textContent = '不使用默认背景';
            hideElementLabel.style.marginLeft = '5px';
            hideElementLabel.style.color = 'black';
            hideElementCheckboxContainer.appendChild(hideElementLabel);

            hideElementCheckbox.addEventListener('change', function() {
                var elementToHide = document.querySelector('.home___kWbfw');
                if (hideElementCheckbox.checked) {
                    elementToHide.style.display = 'none';
                } else {
                    elementToHide.style.display = '';
                }
            });
            hideElementCheckbox.addEventListener('change', function() {
                localStorage.setItem('hideElementCheckboxChecked', hideElementCheckbox.checked);
                var elementToHide = document.querySelector('.home___kWbfw');
                if (hideElementCheckbox.checked) {
                    elementToHide.style.display = 'none';
                } else {
                    elementToHide.style.display = '';
                }
            });

            var hideElementCheckboxChecked = localStorage.getItem('hideElementCheckboxChecked');
            if (hideElementCheckboxChecked === 'true') {
                hideElementCheckbox.checked = true;
                elementToHide.style.display = 'none';
            }
        }
        /*按钮颜色更改*/

        var colorContainer = document.createElement('div');
        colorContainer.style.display = 'flex';
        colorContainer.style.alignItems = 'center';
        colorContainer.style.margin = '10px';
        modal.appendChild(colorContainer);

        var colorLabel = document.createElement('div');
        colorLabel.textContent = '按钮颜色：';
        colorLabel.style.marginRight = '10px';
        colorLabel.style.color = 'black';
        colorContainer.appendChild(colorLabel);

        var colorInput = document.createElement('input');
        colorInput.type = 'color';
        colorInput.value = localStorage.getItem('customColor') || '#ffffff';
        colorContainer.appendChild(colorInput);

        colorInput.addEventListener('input', function() {
            colorLabel.textContent = '按钮颜色：';
            localStorage.setItem('customColor', colorInput.value);
            updateCustomStyles();
        });

        /*应用为主题色*/

        var checkboxContainer = document.createElement('div');
        checkboxContainer.style.margin = '10px';
        modal.appendChild(checkboxContainer);

        var customStyleCheckbox = document.createElement('input');
        customStyleCheckbox.type = 'checkbox';
        customStyleCheckbox.id = 'customStyleCheckbox';
        customStyleCheckbox.checked = localStorage.getItem('customStyleApplied') === 'true';
        checkboxContainer.appendChild(customStyleCheckbox);

        var checkboxLabel = document.createElement('label');
        checkboxLabel.htmlFor = 'customStyleCheckbox';
        checkboxLabel.textContent = '应用为主题色（推荐使用彩色）';
        checkboxLabel.style.marginLeft = '5px';
        checkboxLabel.style.color = 'black';
        checkboxContainer.appendChild(checkboxLabel);

        customStyleCheckbox.addEventListener('change', function() {
            localStorage.setItem('customStyleApplied', customStyleCheckbox.checked);
            if (customStyleCheckbox.checked) {
                var style = document.createElement('style');
                style.setAttribute('data-source', 'userscript-custom-style');
                style.textContent = generateCustomStyles();
                document.head.appendChild(style);
            } else {
                var styles = document.querySelectorAll('style[data-source="userscript-custom-style"]');
                styles.forEach(function(style) {
                    style.remove();
                });
            }
        });

        /*透明度更改*/

        var opacityContainer = document.createElement('div');
        opacityContainer.style.display = 'flex';
        opacityContainer.style.alignItems = 'center';
        opacityContainer.style.margin = '10px';
        modal.appendChild(opacityContainer);

        var opacityLabel = document.createElement('div');
        opacityLabel.textContent = '透明度：' + (localStorage.getItem('customOpacity') || '0.15');
        opacityLabel.style.color = 'black';
        opacityLabel.style.marginRight = '10px';
        opacityLabel.style.width = '100px';
        opacityContainer.appendChild(opacityLabel);

        var opacityInput = document.createElement('input');
        opacityInput.type = 'range';
        opacityInput.min = '0';
        opacityInput.max = '1';
        opacityInput.step = '0.01';
        opacityInput.value = localStorage.getItem('customOpacity') || '0.1';
        opacityContainer.appendChild(opacityInput);

        opacityInput.addEventListener('input', function() {
            var opacityValue = parseFloat(opacityInput.value);
            opacityLabel.textContent = '透明度：' + opacityValue;
            localStorage.setItem('customOpacity', opacityValue.toString());
            updateCustomStyles();
        });

        /*图片亮度更改*/

        var brightnessContainer = document.createElement('div');
        brightnessContainer.style.display = 'flex';
        brightnessContainer.style.alignItems = 'center';
        brightnessContainer.style.margin = '10px';
        modal.appendChild(brightnessContainer);

        var brightnessLabel = document.createElement('div');
        brightnessLabel.textContent = '亮度：' + brightnessValue;
        brightnessLabel.style.marginRight = '10px';
        brightnessLabel.style.color = 'black';
        brightnessLabel.style.width = '100px';
        brightnessContainer.appendChild(brightnessLabel);

        var brightnessInput = document.createElement('input');
        brightnessInput.type = 'range';
        brightnessInput.min = '0';
        brightnessInput.max = '1';
        brightnessInput.step = '0.01';
        brightnessInput.value = brightnessValue.toString();
        brightnessContainer.appendChild(brightnessInput);

        brightnessInput.addEventListener('input', function() {
            brightnessValue = parseFloat(brightnessInput.value);
            brightnessLabel.textContent = '亮度：' + brightnessValue;
            localStorage.setItem('customBrightnessValue', brightnessValue.toString());
            updateBackgroundImage();
        });

        /*关闭*/

        var closeButton = document.createElement('button');
        closeButton.textContent = '×';
        closeButton.style.position = 'absolute';
        closeButton.style.top = '5px';
        closeButton.style.right = '5px';
        closeButton.style.color = 'black';

        fileButton.addEventListener('change', handleFileUpload);
        urlButton.addEventListener('click', handleChangeImageUrl);
        closeButton.addEventListener('click', function() {
            modal.remove();
            overlay.remove();
        });

        modal.addEventListener('click', function(event) {
            event.stopPropagation();
        });

        modal.appendChild(closeButton);
        document.body.appendChild(modal);

        var authorCredit = document.createElement('div');
        authorCredit.innerHTML = '<a href="https://tuxun.fun/user/317140" target="_blank"><img src="https://i.chao-fan.com/biz/1712056718961_24a43410d1fb4362b03280478c46d67f_0.png?x-oss-process=image/resize,h_20/quality,q_75"></a>';
        authorCredit.style.position = 'absolute';
        authorCredit.style.bottom = '5px';
        authorCredit.style.right = '5px';
        modal.appendChild(authorCredit);
    }

    function handleFileUpload(event) {
        var file = event.target.files[0];
        var reader = new FileReader();
        reader.onload = function(e) {
            var newImageUrl = e.target.result;
            localStorage.setItem('customImageUrl', newImageUrl);
            imageUrl = newImageUrl;
            updateBackgroundImage();
        };
        reader.readAsDataURL(file);
    }

    function handleChangeImageUrl() {
        var newImageUrl = prompt('图片转链接可以使用网站：smms.app');
        if(newImageUrl) {
            localStorage.setItem('customImageUrl', newImageUrl);
            imageUrl = newImageUrl;
            updateBackgroundImage();
        }
    }

    var mainButton = document.createElement('button');
    mainButton.textContent = '✈️';
    mainButton.style.position = 'fixed';
    mainButton.style.bottom = '10px';
    mainButton.style.right = '10px';
    mainButton.style.zIndex = '1000';
    mainButton.style.opacity = '0.75';
    document.body.appendChild(mainButton);

    mainButton.addEventListener('click', showModal);

    updateBackgroundImage();

    var style = document.createElement('style');
    style.textContent = `
    body {
        background-color: transparent !important;
    }

    .homePage___A0eaw {
        background-color: transparent !important;
    }

    .css-mf7bu6 {
        background: none !important;
    }

    .card___AUSml:hover {
        color: white !important;
        outline: none !important;
    }

    .activity___hL3wd {
        text-decoration: none !important;
    }

    .partyWrapper___TwyLT {
    background-color: transparent !important;
    }
    `;

    /*    .wrapper___cSTyt {
        background-color: transparent !important;
    }*/

    document.head.appendChild(style);

    function rgbaColor(hex, opacity) {
        var r = parseInt(hex.slice(1, 3), 16),
            g = parseInt(hex.slice(3, 5), 16),
            b = parseInt(hex.slice(5, 7), 16);
        return 'rgba(' + r + ', ' + g + ', ' + b + ', ' + opacity + ')';
    }

    function updateCustomStyles() {
        var customColor = localStorage.getItem('customColor') || '#ffffff';
        var customOpacity = localStorage.getItem('customOpacity') || '0.1';
        var existingStyles = document.querySelectorAll('style[data-source="userscript-custom-styles"]');
        existingStyles.forEach(function(style) {
            style.remove();
        });

        var style = document.createElement('style');
        style.setAttribute('data-source', 'userscript-custom-styles');
        style.textContent = `
        .card___AUSml {
            background-color: ${rgbaColor(customColor, customOpacity)} !important;
            backdrop-filter: blur(1.5px) !important;
            transition: background-color 0.3s, backdrop-filter 0.3s !important;
        }

        .card___AUSml:hover {
            backdrop-filter: blur(0px) !important;
            background-color: ${rgbaColor(customColor, customOpacity*0.6)} !important;
        }
    `;
        document.head.appendChild(style);
    }

    function generateCustomStyles() {
        var customColor = localStorage.getItem('customColor') || '#ffffff';
        return `
        .navigate___xl6aN .logo___KYw8m sup {
            background-color: ${rgbaColor(customColor, 1)} !important;
        }
        .css-i874aq.ant-btn-primary{
            background-color: ${rgbaColor(customColor, 1)} !important;
            border-color: transparent !important;
            color: #fff !important;
        }/*按钮*/

        .css-i874aq.ant-btn-primary:hover{
            background-color: #fff !important;
            color: ${rgbaColor(customColor, 1)} !important;
            border-color: ${rgbaColor(customColor, 1)} !important;
        }

        .roundWrapper___eTnOj{
            background-color: ${rgbaColor(customColor, 1)} !important;
        }

        .wrapper___hJxKg .scoreReulst___qqkPH .scoreReulstValue___gFyI2{
            text-shadow: 0 0 2px ${rgbaColor(customColor, 1)},0 0 6px ${rgbaColor(customColor, 1)},0 0 4px ${rgbaColor(customColor, 1)},0 0 10px ${rgbaColor(customColor, 1)},0 0 10px ${rgbaColor(customColor, 1)},0 0 10px ${rgbaColor(customColor, 1)},0 0 15px ${rgbaColor(customColor, 1)},0 0 15px ${rgbaColor(customColor, 1)} !important;
        }

        .wrapper___thM8D .dailyChallengeContainer___udY4u .dailyChallengeTypeContainer___Ye7CG:hover, .wrapper___thM8D .dailyChallengeContainer___udY4u .dailyChallengeTypeContainer___Ye7CG.active___G_ELD{
            outline: 2px solid ${rgbaColor(customColor, 1)} !important;
        }

        .countdownPath___BljUS{
            stroke: ${rgbaColor(customColor, 1)} !important;
        }

        .css-i874aq.ant-btn-default:not(:disabled):not(.ant-btn-disabled):hover{
            color: ${rgbaColor(customColor, 1)} !important;
            border-Color: ${rgbaColor(customColor, 1)} !important;
        }

        .ant-spin-dot-item{
            background-color: ${rgbaColor(customColor, 1)} !important;
        }

        .ant-spin-text{
            color: ${rgbaColor(customColor, 1)} !important;
        }

        .css-i874aq.ant-switch.ant-switch-checked{
            background: ${rgbaColor(customColor, 1)} !important;
        }

        .hudAvatarContainer___MYJpm .avatarContainer___tJ9Gx{
            background: ${rgbaColor(customColor, 1)} !important;
        }

        .hudHealthBarContainer___v1oCm .hudHealthBar___BPbFA{
            background: ${rgbaColor(customColor, 1)} !important;
        }

        .challengeWrap___q0AXk .innerWrapper___XVgZO .roundScore___OWkm_ .roundScoreScore___UMflq .roundScoreValue___YSyQt{
            text-shadow: 0 0 2px ${rgbaColor(customColor, 1)},0 0 6px ${rgbaColor(customColor, 1)},0 0 4px ${rgbaColor(customColor, 1)},0 0 10px ${rgbaColor(customColor, 1)},0 0 10px ${rgbaColor(customColor, 1)},0 0 10px ${rgbaColor(customColor, 1)},0 0 15px ${rgbaColor(customColor, 1)},0 0 15px ${rgbaColor(customColor, 1)} !important;
        }

        .css-i874aq.ant-badge .ant-scroll-number{
            background-color: ${rgbaColor(customColor, 1)} !important;
            color: white !important;
        }

        .css-i874aq.ant-avatar-image{
            border-color: ${rgbaColor(customColor, 1)} !important;
        }

        .status___XaZqs{
            background-color: ${rgbaColor(customColor, 1)} !important;
        }

        .status___XaZqs .statistic___Mky_T .ant-statistic-content .ant-statistic-content-prefix{
            color: white !important;
        }

        .mapBox___wPNE1 .mapWrapper___GgkxF .mapConfirm___Q8fp1 button:disabled{
            background-color: white !important;
            color: ${rgbaColor(customColor, 1)} !important;
            border-color: ${rgbaColor(customColor, 1)} !important;
        }

        .ant-message .ant-message-notice-wrapper .ant-message-warning>.anticon{
            color: ${rgbaColor(customColor, 1)} !important;
        }

        .anticon-spin{
            color: ${rgbaColor(customColor, 1)} !important;
        }

        .wrapper___H8Ysq .scoreReulst___u9Phz .myScore___XfYBe{
            border: 3px solid ${rgbaColor(customColor, 1)} !important;
        }

        .ant-scroll-number .ant-badge-count .ant-badge-multiple-words{
            color: ${rgbaColor(customColor, 1)} !important;
        }

        .ant-flex p {
            color: ${customColor} !important;
        } /* 正在匹配 */

        `;
    }

    function applyInitialCustomStyles() {
        if (localStorage.getItem('customStyleApplied') === 'true') {
            var style = document.createElement('style');
            style.setAttribute('data-source', 'userscript-custom-style');
            style.textContent = generateCustomStyles();
            document.head.appendChild(style);
        }
    };

    function updateHideElementStyle() {
        var style = document.createElement('style');
        if (localStorage.getItem('hideElementCheckboxChecked') === 'true') {
            style.setAttribute('data-source', 'userscript-custom-styles');
            style.textContent = `
            .home___kWbfw {
                display: none !important;
            }
        `;
        } else {
            style.setAttribute('data-source', 'userscript-custom-styles');
            style.textContent = `
                .home___kWbfw {
                    display: block !important;
                }
            `;
        }
        document.head.appendChild(style);
    };

    updateCustomStyles(); // 放最前面

    applyInitialCustomStyles();


    updateHideElementStyle();

})();

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址