按钮在右下角！支持选择本地图片，支持主题色更改。此脚本会在客户端根据您的设置存储少量信息。
当前为
// ==UserScript==
// @name 新版图寻主页背景更改&主题色设置插件 Tuxun Main Page Background Image Changer & Theme Color Setting
// @version 1.16
// @description 按钮在右下角！支持选择本地图片，支持主题色更改。此脚本会在客户端根据您的设置存储少量信息。
// @author zyhxghy
// @match https://tuxun.fun/*
// @exclude https://tuxun.fun/replay-pano?*
// @grant none
// @namespace https://greasyfork.org/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('Please enter a new background image URL:');
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();
})();