API tools faq
paste
smoothretro82

HUD Color Customizer 2.0

smoothretro82
Dec 6th, 2025 (edited)
65
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.89 KB | None | 0 0
raw download clone embed print report
  1. (function () {
  2.  
  3. const PREFIX = "cp-";
  4. if (document.getElementById(PREFIX + "color-picker-hud")) return;
  5.  
  6. const TARGET_ELEMENTS = {
  7. 'Chatbox Background': { selector: '#chatbox', type: 'rgba', alpha: 0.8 },
  8. 'Chatbox Text': { selector: '#chatbox', type: 'color' },
  9. 'Chat Input Background': { selector: '#chatmsg', type: 'hex' },
  10. 'Chat Input Text': { selector: '#chatmsg', type: 'color' },
  11. 'Send Button Background': { selector: '#sendmsg', type: 'hex' },
  12. 'Send Button Text': { selector: '#sendmsg', type: 'color' },
  13. 'Info Text Background': { selector: '.infotext', type: 'rgba', alpha: 0.8 },
  14. 'Info Text Color': { selector: '.infotext span', type: 'color' },
  15. 'HUD Buttons Background': { selector: '.buttons .infobtn', type: 'hex' },
  16. 'HUD Buttons Text': { selector: '.buttons .infobtn', type: 'color' },
  17. 'Usermenu Background': { selector: '#usermenu', type: 'rgba', alpha: 0.95 },
  18. 'Options Menu Background': { selector: '#optionsmenu', type: 'rgba', alpha: 0.95 },
  19. 'Options Text': { selector: '#optionsmenu, #optionsmenu label, #optionsmenu h1, #optionsmenu span', type: 'color' },
  20. 'Sidebar Background': { selector: '.sidething', type: 'rgba', alpha: 0.95 },
  21. 'Swatches Background': { selector: '#colourlist .colour', type: 'hex' }
  22. };
  23.  
  24. const chatbox = document.getElementById('chatbox');
  25. const checkbox = document.getElementById('darkChat');
  26. const rainbowTagsCheckbox = document.getElementById("rainbowTag");
  27. let darkMode = localStorage.getItem('darkMode') === 'true';
  28. let rainbowTags = localStorage.getItem('rainbowTags') === 'true';
  29. checkbox.checked = darkMode;
  30. rainbowTagsCheckbox.checked = rainbowTags;
  31.  
  32. function storeOriginalColor(el) {
  33. if (!el.dataset.originalColor) {
  34. const style = window.getComputedStyle(el);
  35. el.dataset.originalColor = style.backgroundColor || style.color || '';
  36. }
  37. }
  38.  
  39. function applyMode(el) {
  40. storeOriginalColor(el);
  41. if (!el.dataset.originalColor) return;
  42. const original = el.dataset.originalColor.replace(/\s+/g, '').toLowerCase();
  43. if (original === 'rgb(0,0,0)') el.style.color = darkMode ? '#fff' : '#000';
  44. else if (original === 'rgb(255,255,255)') el.style.color = darkMode ? '#000' : '#fff';
  45. }
  46.  
  47. function updateChatboxColors() {
  48. chatbox.style.backgroundColor = darkMode ? '#000' : '#fff';
  49. chatbox.style.color = darkMode ? '#fff' : '#000';
  50. chatbox.querySelectorAll('*').forEach(applyMode);
  51. chatbox.classList[rainbowTagsCheckbox.checked ? "add" : "remove"]("animatedTags");
  52. }
  53.  
  54. checkbox.addEventListener('change', () => {
  55. darkMode = checkbox.checked;
  56. localStorage.setItem('darkMode', darkMode);
  57. updateChatboxColors();
  58. });
  59.  
  60. rainbowTagsCheckbox.addEventListener('change', () => {
  61. rainbowTags = rainbowTagsCheckbox.checked;
  62. localStorage.setItem('rainbowTags', rainbowTags);
  63. updateChatboxColors();
  64. });
  65.  
  66. const observer = new MutationObserver(mutations => {
  67. mutations.forEach(m => {
  68. m.addedNodes.forEach(node => {
  69. if (node.nodeType === 1) {
  70. node.classList.add('fade-in');
  71. applyMode(node);
  72. node.querySelectorAll('*').forEach(applyMode);
  73. requestAnimationFrame(() => node.classList.add('show'));
  74. }
  75. });
  76. });
  77. });
  78.  
  79. observer.observe(chatbox, { childList: true, subtree: true });
  80. updateChatboxColors();
  81.  
  82. if (!window.iro) {
  83. const script = document.createElement("script");
  84. script.src = "https://cdn.jsdelivr.net/npm/@jaames/iro@5";
  85. script.onload = initHUD;
  86. document.head.appendChild(script);
  87. } else {
  88. initHUD();
  89. }
  90.  
  91. function initHUD() {
  92.  
  93. const hudHTML = `
  94. <div id="${PREFIX}color-picker-hud">
  95. <div id="${PREFIX}hud-header">
  96. 🌈 Color Customizer
  97. <button id="${PREFIX}hud-close">✖</button>
  98. </div>
  99. <div id="${PREFIX}picker"></div>
  100. <input id="${PREFIX}hex-input" type="text" value="#00FF00" placeholder="#RRGGBB" style="margin:0 10px 10px; width:calc(100%-20px); padding:5px; background:black; color:#0f0; border:1px solid #0f0; font-family:monospace;">
  101. <button id="${PREFIX}eyedropperBtn">🎯 Eyedropper</button>
  102. <select id="${PREFIX}target">
  103. ${Object.keys(TARGET_ELEMENTS).map(t => `<option value="${t}">${t}</option>`).join('')}
  104. </select>
  105. <div id="${PREFIX}preview">#00FF00</div>
  106. <button id="${PREFIX}apply-color-btn">Apply Color</button>
  107. <button id="${PREFIX}apply-all-btn">Apply to All Targets</button>
  108. <button id="${PREFIX}reset-btn">Reset All Colors</button>
  109. </div>
  110. `;
  111. document.body.insertAdjacentHTML("beforeend", hudHTML);
  112.  
  113. const style = document.createElement("style");
  114. style.textContent = `
  115. #${PREFIX}color-picker-hud { position: fixed; top:60px; right:20px; width:280px; background:#111; border:2px solid #0f0; border-radius:12px; box-shadow:0 0 20px lime; font-family:monospace; z-index:999999; resize:both; overflow:auto; padding-bottom:10px; }
  116. #${PREFIX}hud-header { background:#030; padding:10px; cursor:move; font-weight:bold; display:flex; justify-content:space-between; color:#0f0; user-select:none; }
  117. #${PREFIX}hud-close { background:none; border:none; color:red; cursor:pointer; }
  118. #${PREFIX}picker { padding:10px; display:flex; justify-content:center; }
  119. #${PREFIX}eyedropperBtn { margin:0 10px 10px; width:calc(100%-20px); padding:6px; background:#222; color:#0f0; border:1px solid #0f0; cursor:pointer; font-weight:bold; }
  120. #${PREFIX}target { margin:0 10px 10px; width:calc(100%-20px); background:black; color:#0f0; border:1px solid #0f0; padding:5px; }
  121. #${PREFIX}preview { margin:0 10px 10px; height:24px; border:1px solid #0f0; text-align:center; line-height:24px; font-weight:bold; }
  122. #${PREFIX}apply-color-btn, #${PREFIX}apply-all-btn { margin:0 10px 10px; width:calc(100%-20px); padding:5px; background:#0f0; color:#000; border:none; font-weight:bold; cursor:pointer; }
  123. #${PREFIX}apply-color-btn:hover, #${PREFIX}apply-all-btn:hover { background:#0c0; }
  124. #${PREFIX}reset-btn { margin:0 10px 10px; width:calc(100%-20px); padding:5px; background:#f00; color:#fff; border:none; font-weight:bold; cursor:pointer; }
  125. #${PREFIX}reset-btn:hover { background:#c00; }
  126. `;
  127. document.head.appendChild(style);
  128.  
  129. const hud = document.getElementById(PREFIX + "color-picker-hud");
  130. const picker = new iro.ColorPicker("#" + PREFIX + "picker", {
  131. width: 200,
  132. color: "#00FF00",
  133. layout: [{ component: iro.ui.Wheel }, { component: iro.ui.Slider, options: { sliderType: "value" }}]
  134. });
  135.  
  136. const targetSelect = document.getElementById(PREFIX + "target");
  137. const preview = document.getElementById(PREFIX + "preview");
  138. const applyBtn = document.getElementById(PREFIX + "apply-color-btn");
  139. const applyAllBtn = document.getElementById(PREFIX + "apply-all-btn");
  140. const eyedropperBtn = document.getElementById(PREFIX + "eyedropperBtn");
  141. const hexInput = document.getElementById(PREFIX + "hex-input");
  142. const resetBtn = document.getElementById(PREFIX + "reset-btn");
  143.  
  144. const activeColors = {};
  145. Object.keys(TARGET_ELEMENTS).forEach(t => activeColors[t] = "#00FF00");
  146.  
  147. let pickedColor = picker.color.hexString;
  148.  
  149. // ------------------------
  150. // Picker → Preview & Input
  151. // ------------------------
  152. picker.on('color:change', color => {
  153. pickedColor = color.hexString;
  154. preview.textContent = pickedColor;
  155. preview.style.backgroundColor = pickedColor;
  156. hexInput.value = pickedColor;
  157. });
  158.  
  159. // ------------------------
  160. // Hex Input → Picker
  161. // ------------------------
  162. hexInput.addEventListener('input', () => {
  163. const val = hexInput.value.trim();
  164. if (/^#([0-9A-Fa-f]{6})$/.test(val)) {
  165. picker.color.set(val);
  166. }
  167. });
  168.  
  169. function applyColorToTarget(targetName) {
  170. const { selector, type, alpha } = TARGET_ELEMENTS[targetName];
  171. document.querySelectorAll(selector).forEach(el => {
  172. storeOriginalColor(el);
  173. if (type === 'hex') el.style.backgroundColor = pickedColor;
  174. else if (type === 'color') el.style.color = pickedColor;
  175. else if (type === 'rgba') {
  176. const rgb = new iro.Color(pickedColor).rgb;
  177. el.style.backgroundColor = `rgba(${rgb.r},${rgb.g},${rgb.b},${alpha})`;
  178. }
  179. });
  180. activeColors[targetName] = pickedColor;
  181. }
  182.  
  183. applyBtn.addEventListener('click', () => applyColorToTarget(targetSelect.value));
  184. applyAllBtn.addEventListener('click', () => Object.keys(TARGET_ELEMENTS).forEach(applyColorToTarget));
  185. targetSelect.addEventListener('change', () => picker.color.set(activeColors[targetSelect.value]));
  186.  
  187. // ------------------------
  188. // Reset All Colors
  189. // ------------------------
  190. function resetAllColors() {
  191. Object.keys(TARGET_ELEMENTS).forEach(targetName => {
  192. const { selector } = TARGET_ELEMENTS[targetName];
  193. document.querySelectorAll(selector).forEach(el => {
  194. if (el.dataset.originalColor) {
  195. if (TARGET_ELEMENTS[targetName].type === 'color') el.style.color = el.dataset.originalColor;
  196. else el.style.backgroundColor = el.dataset.originalColor;
  197. }
  198. });
  199. activeColors[targetName] = "#00FF00";
  200. });
  201. picker.color.set("#00FF00");
  202. hexInput.value = "#00FF00";
  203. preview.textContent = "#00FF00";
  204. preview.style.backgroundColor = "#00FF00";
  205. }
  206. resetBtn.addEventListener('click', resetAllColors);
  207.  
  208. // ------------------------
  209. // Native EyeDropper API
  210. // ------------------------
  211. eyedropperBtn.addEventListener("click", async () => {
  212. if (!window.EyeDropper) {
  213. alert("Your browser does not support the EyeDropper API.");
  214. return;
  215. }
  216. try {
  217. const eyeDropper = new EyeDropper();
  218. const result = await eyeDropper.open();
  219. picker.color.set(result.sRGBHex);
  220. } catch (err) {
  221. console.log("Eyedropper canceled or failed:", err);
  222. }
  223. });
  224.  
  225. // ------------------------
  226. // Close HUD
  227. // ------------------------
  228. document.getElementById(PREFIX + "hud-close").onclick = () => {
  229. hud.remove();
  230. style.remove();
  231. };
  232.  
  233. makeDraggable(hud, document.getElementById(PREFIX + "hud-header"));
  234. }
  235.  
  236. function makeDraggable(elmnt, handle) {
  237. let x = 0, y = 0, dx = 0, dy = 0;
  238. handle.onmousedown = e => {
  239. e.preventDefault();
  240. dx = e.clientX; dy = e.clientY;
  241. document.onmousemove = drag;
  242. document.onmouseup = () => document.onmousemove = null;
  243. };
  244. function drag(e) {
  245. e.preventDefault();
  246. x = dx - e.clientX; y = dy - e.clientY;
  247. dx = e.clientX; dy = e.clientY;
  248. elmnt.style.top = (elmnt.offsetTop - y) + "px";
  249. elmnt.style.left = (elmnt.offsetLeft - x) + "px";
  250. }
  251. }
  252.  
  253. })();
  254.  
Tags: textwall tw.2s4.me
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!