// ==UserScript==
// @name Web3 OKX Color Theme Changer
// @namespace http://tampermonkey.net/
// @version 1.0
// @description Automaticly color changer, Written by ai
// @author ChatGPT
// @match https://dex.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;
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}`;
}
function getTargetColor(hex){
const rgba = hexToRgba(hex);
// kırmızı tonlarını mor ile değiştir, alfa koru
if(rgba.r>100 && rgba.r>rgba.g && rgba.r>rgba.b){
return rgbaToHex({...DOWN_COLOR, a: rgba.a});
}
// yeşil tonlarını mavi/turkuaz ile değiştir, alfa koru
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);
}
['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 şeffaflıkla birlikte override et
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; }
/* Özel class override: yQomFb__dex x32WdF__dex → mor */
.yQomFb__dex.x32WdF__dex {
background-color: #7e57c21a !important;
color: #fff !important;
}
/* Özel class override: yQomFb__dex CvHkVQ__dex → mavi/turkuaz */
.yQomFb__dex.CvHkVQ__dex {
background-color: #14a7ff1a !important;
color: #fff !important;
}
`;
document.head.appendChild(classStyle);
function processAll(){
try{
processStyleSheets();
processStyleTags();
processInlineStyles();
processCSSVariables();
}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.contains('dex-tag-fill-red')) node.style.backgroundColor='#7e57c21a';
if(node.classList.contains('dex-tag-fill-green')) node.style.backgroundColor='#14a7ff1a';
if(node.classList.contains('yQomFb__dex') && node.classList.contains('x32WdF__dex'))
node.style.backgroundColor='#7e57c21a';
if(node.classList.contains('yQomFb__dex') && node.classList.contains('CvHkVQ__dex'))
node.style.backgroundColor='#14a7ff1a';
}
});
});
});
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();
}
})();