// ==UserScript==
// @name Web3 OKX Color Theme Changer
// @namespace http://tampermonkey.net/
// @version 1.1
// @description Automaticly color changer, Written by ai
// @author ChatGPT
// @match https://*.okx.com/*
// @grant none
// @license MIT
// ==/UserScript==
(function(){
'use strict';
const UP_COLOR = {r:20,g:167,b:255}; // Turkuaz/mavi
const DOWN_COLOR = {r:126,g:87,b:194}; // Mor
const hexRegex = /#([0-9a-fA-F]{6}|[0-9a-fA-F]{8})\b/g;
const TARGET_OLD_BG = '#BCFF2F26';
const TARGET_NEW_BG = '#268BFF26';
function hexToRgba(hex){
if(!hex) return {r:0,g:0,b:0,a:1};
if(hex[0]==='#') hex=hex.substr(1);
let r,g,b,a=1;
if(hex.length===6){
r=parseInt(hex.substr(0,2),16);
g=parseInt(hex.substr(2,2),16);
b=parseInt(hex.substr(4,2),16);
} else if(hex.length===8){
r=parseInt(hex.substr(0,2),16);
g=parseInt(hex.substr(2,2),16);
b=parseInt(hex.substr(4,2),16);
a=parseInt(hex.substr(6,2),16)/255;
}
return {r,g,b,a};
}
function rgbaToHex({r,g,b,a}){
const alpha=Math.round(a*255).toString(16).padStart(2,'0');
return `#${r.toString(16).padStart(2,'0')}${g.toString(16).padStart(2,'0')}${b.toString(16).padStart(2,'0')}${alpha}`.toUpperCase();
}
function getTargetColor(hex){
const rgba = hexToRgba(hex);
if(rgbaToHex(rgba) === TARGET_OLD_BG) return TARGET_NEW_BG;
if(rgba.r>100 && rgba.r>rgba.g && rgba.r>rgba.b){
return rgbaToHex({...DOWN_COLOR, a: rgba.a});
}
if(rgba.g>100 && rgba.g>rgba.r && rgba.g>rgba.b){
return rgbaToHex({...UP_COLOR, a: rgba.a});
}
return hex;
}
function replaceHexes(text){
return text.replace(hexRegex, m => getTargetColor(m));
}
function processStyleSheets(){
for(const sheet of document.styleSheets){
try{
if(!sheet.cssRules) continue;
for(const rule of sheet.cssRules){
try{
if(rule.type===CSSRule.STYLE_RULE && rule.style && rule.style.cssText){
const newCss = replaceHexes(rule.style.cssText);
if(newCss!==rule.style.cssText) rule.style.cssText=newCss;
}
}catch(e){continue;}
}
}catch(e){continue;}
}
}
function processInlineStyles(root=document){
const elems = root.querySelectorAll('[style],[fill],[stroke]');
elems.forEach(el=>{
if(el.hasAttribute('style')){
const old = el.getAttribute('style');
const neu = replaceHexes(old);
if(neu!==old) el.setAttribute('style',neu);
// BCFF2F26 → mavi
if(el.style.backgroundColor && (el.style.backgroundColor.toUpperCase() === TARGET_OLD_BG || el.style.backgroundColor === 'rgba(188,255,242,0.15)')){
el.style.backgroundColor = TARGET_NEW_BG;
}
}
['fill','stroke'].forEach(attr=>{
if(el.hasAttribute(attr)){
const old = el.getAttribute(attr);
const neu = (typeof old==='string')?replaceHexes(old):old;
if(neu!==old) el.setAttribute(attr,neu);
}
});
});
}
function processStyleTags(){
document.querySelectorAll('style').forEach(tag=>{
const old = tag.textContent;
const neu = replaceHexes(old);
if(neu!==old) tag.textContent = neu;
});
}
function processCSSVariables(){
const rootStyles = getComputedStyle(document.documentElement);
for(const prop of rootStyles){
if(prop.startsWith('--')){
const val = rootStyles.getPropertyValue(prop).trim();
if(val.match(hexRegex)){
const newVal = replaceHexes(val);
document.documentElement.style.setProperty(prop,newVal);
}
}
}
}
function patchCanvas(ctx){
const origFill = ctx.fill;
ctx.fill = function(){
if(arguments[0] && typeof arguments[0] === 'string'){
arguments[0] = getTargetColor(arguments[0]);
}
return origFill.apply(this, arguments);
};
const origStroke = ctx.stroke;
ctx.stroke = function(){
if(arguments[0] && typeof arguments[0] === 'string'){
arguments[0] = getTargetColor(arguments[0]);
}
return origStroke.apply(this, arguments);
};
}
const origGetContext = HTMLCanvasElement.prototype.getContext;
HTMLCanvasElement.prototype.getContext = function(type,...args){
const ctx = origGetContext.apply(this,[type,...args]);
if(type==='2d') patchCanvas(ctx);
return ctx;
};
// Class tabanlı renkleri override et + Boost ikon için CSS fallback
const classStyle = document.createElement('style');
classStyle.textContent = `
.dex-tag-fill-red { background-color: #7e57c21a !important; color: #fff !important; }
.dex-tag-fill-green { background-color: #14a7ff1a !important; color: #fff !important; }
.yQomFb__dex.x32WdF__dex {
background-color: #7e57c21a !important;
color: #fff !important;
}
.yQomFb__dex.CvHkVQ__dex {
background-color: #14a7ff1a !important;
color: #fff !important;
}
.nav-boost-drop {
background-color: #14a7ff1a !important;
}
.nav-boost-drop .box-item:hover {
background-color: #14a7ff33 !important;
}
.nav-boost-icon {
filter: hue-rotate(90deg) saturate(1.4) brightness(1) contrast(1) !important;
transition: filter 160ms ease !important;
}
`;
document.head.appendChild(classStyle);
function applyBoostBlue() {
const boostBtn = document.querySelector('.nav-item.nav-boost.icon');
if (boostBtn) {
boostBtn.style.backgroundColor = '#268BFF26';
boostBtn.style.borderRadius = '6px';
}
}
function applyBoostIconBlue(angle = 90) {
document.querySelectorAll('.nav-boost-icon').forEach(icon => {
icon.style.filter = `hue-rotate(${angle}deg) saturate(1.4) brightness(1) contrast(1)`;
icon.style.transition = 'filter 160ms ease';
});
}
function processAll(){
try{
processStyleSheets();
processStyleTags();
processInlineStyles();
processCSSVariables();
applyBoostBlue();
applyBoostIconBlue(90);
}catch(e){console.error(e);}
}
const observer = new MutationObserver((mutations)=>{
processAll();
mutations.forEach(m=>{
m.addedNodes.forEach(node=>{
if(node.nodeType===1){
if(node.classList && node.classList.contains('dex-tag-fill-red')) node.style.backgroundColor='#7e57c21a';
if(node.classList && node.classList.contains('dex-tag-fill-green')) node.style.backgroundColor='#14a7ff1a';
if(node.classList && node.classList.contains('yQomFb__dex') && node.classList.contains('x32WdF__dex'))
node.style.backgroundColor='#7e57c21a';
if(node.classList && node.classList.contains('yQomFb__dex') && node.classList.contains('CvHkVQ__dex'))
node.style.backgroundColor='#14a7ff1a';
if(node.classList && node.classList.contains('nav-boost-drop'))
node.style.backgroundColor='#14a7ff1a';
if(node.classList && node.classList.contains('nav-item') && node.classList.contains('nav-boost'))
applyBoostBlue();
if(node.classList && node.classList.contains('nav-boost-icon'))
applyBoostIconBlue(90);
// BCFF2F26 → mavi
if(node.style && node.style.backgroundColor && (node.style.backgroundColor.toUpperCase() === TARGET_OLD_BG)){
node.style.backgroundColor = TARGET_NEW_BG;
}
}
});
});
});
observer.observe(document.body,{childList:true,subtree:true,attributes:true,attributeFilter:['style','fill','stroke']});
window.addEventListener('load',()=>{ processAll(); setTimeout(processAll,1500); setTimeout(processAll,4000); });
if(document.readyState==='interactive'||document.readyState==='complete'){ processAll(); }
})();