☰

Blacket Neon Theme Switcher

Movable button to cycle through neon color themes on Blacket.org full page styling

  1. // ==UserScript==
  2. // @name         Blacket Neon Theme Switcher
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.0
  5. // @description  Movable button to cycle through neon color themes on Blacket.org full page styling
  6. // @author       monkxy#0001
  7. // @match        https://blacket.org/*
  8. // @match        https://*.blacket.org/*
  9. // @grant        GM_addStyle
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     const neonThemes = [
  16.         {
  17.             name: "Neon Red",
  18.             css: `
  19.               body,
  20.               #app,
  21.               .styles__background___2J-JA-camelCase,
  22.               .styles__app___bM8h5-camelCase,
  23.               .styles__sidebar___1XqWi-camelCase,
  24.               .styles__header___22Ne2-camelCase,
  25.               .styles__toastContainer___o4pCa-camelCase,
  26.               .styles__chatCurrentRoom___MCaV4-camelCase,
  27.               .styles__chatRoomsListContainer___Gk4Av-camelCase,
  28.               .styles__chatRooms___o5ASb-camelCase,
  29.               .styles__container___1BPm9-camelCase,
  30.               .styles__profileContainer___CSuIE-camelCase,
  31.               .styles__statContainer___QKuOF-camelCase,
  32.               .styles__friendContainer___3wVox-camelCase,
  33.               .styles__bazaarItem___Meg69-camelCase,
  34.               .styles__topStatsContainer___dWfN7-camelCase,
  35.               .styles__statsContainer___1r5je-camelCase,
  36.               .styles__bottomStatsContainer___1O6MJ-camelCase,
  37.               .styles__statsContainer___QnrRB-camelCase {
  38.                 background-color: #ff073a !important;
  39.                 color: white !important;
  40.                 box-shadow: 0 0 15px #ff073a, 0 0 30px #ff073a !important;
  41.               }
  42.             `
  43.         },
  44.         {
  45.             name: "Neon Orange",
  46.             css: `
  47.               body,
  48.               #app,
  49.               .styles__background___2J-JA-camelCase,
  50.               .styles__app___bM8h5-camelCase,
  51.               .styles__sidebar___1XqWi-camelCase,
  52.               .styles__header___22Ne2-camelCase,
  53.               .styles__toastContainer___o4pCa-camelCase,
  54.               .styles__chatCurrentRoom___MCaV4-camelCase,
  55.               .styles__chatRoomsListContainer___Gk4Av-camelCase,
  56.               .styles__chatRooms___o5ASb-camelCase,
  57.               .styles__container___1BPm9-camelCase,
  58.               .styles__profileContainer___CSuIE-camelCase,
  59.               .styles__statContainer___QKuOF-camelCase,
  60.               .styles__friendContainer___3wVox-camelCase,
  61.               .styles__bazaarItem___Meg69-camelCase,
  62.               .styles__topStatsContainer___dWfN7-camelCase,
  63.               .styles__statsContainer___1r5je-camelCase,
  64.               .styles__bottomStatsContainer___1O6MJ-camelCase,
  65.               .styles__statsContainer___QnrRB-camelCase {
  66.                 background-color: #ff6a00 !important;
  67.                 color: white !important;
  68.                 box-shadow: 0 0 15px #ff6a00, 0 0 30px #ff6a00 !important;
  69.               }
  70.             `
  71.         },
  72.         {
  73.             name: "Neon Yellow",
  74.             css: `
  75.               body,
  76.               #app,
  77.               .styles__background___2J-JA-camelCase,
  78.               .styles__app___bM8h5-camelCase,
  79.               .styles__sidebar___1XqWi-camelCase,
  80.               .styles__header___22Ne2-camelCase,
  81.               .styles__toastContainer___o4pCa-camelCase,
  82.               .styles__chatCurrentRoom___MCaV4-camelCase,
  83.               .styles__chatRoomsListContainer___Gk4Av-camelCase,
  84.               .styles__chatRooms___o5ASb-camelCase,
  85.               .styles__container___1BPm9-camelCase,
  86.               .styles__profileContainer___CSuIE-camelCase,
  87.               .styles__statContainer___QKuOF-camelCase,
  88.               .styles__friendContainer___3wVox-camelCase,
  89.               .styles__bazaarItem___Meg69-camelCase,
  90.               .styles__topStatsContainer___dWfN7-camelCase,
  91.               .styles__statsContainer___1r5je-camelCase,
  92.               .styles__bottomStatsContainer___1O6MJ-camelCase,
  93.               .styles__statsContainer___QnrRB-camelCase {
  94.                 background-color: #fff100 !important;
  95.                 color: black !important;
  96.                 box-shadow: 0 0 15px #fff100, 0 0 30px #fff100 !important;
  97.               }
  98.             `
  99.         },
  100.         {
  101.             name: "Neon Green",
  102.             css: `
  103.               body,
  104.               #app,
  105.               .styles__background___2J-JA-camelCase,
  106.               .styles__app___bM8h5-camelCase,
  107.               .styles__sidebar___1XqWi-camelCase,
  108.               .styles__header___22Ne2-camelCase,
  109.               .styles__toastContainer___o4pCa-camelCase,
  110.               .styles__chatCurrentRoom___MCaV4-camelCase,
  111.               .styles__chatRoomsListContainer___Gk4Av-camelCase,
  112.               .styles__chatRooms___o5ASb-camelCase,
  113.               .styles__container___1BPm9-camelCase,
  114.               .styles__profileContainer___CSuIE-camelCase,
  115.               .styles__statContainer___QKuOF-camelCase,
  116.               .styles__friendContainer___3wVox-camelCase,
  117.               .styles__bazaarItem___Meg69-camelCase,
  118.               .styles__topStatsContainer___dWfN7-camelCase,
  119.               .styles__statsContainer___1r5je-camelCase,
  120.               .styles__bottomStatsContainer___1O6MJ-camelCase,
  121.               .styles__statsContainer___QnrRB-camelCase {
  122.                 background-color: #39ff14 !important;
  123.                 color: black !important;
  124.                 box-shadow: 0 0 15px #39ff14, 0 0 30px #39ff14 !important;
  125.               }
  126.             `
  127.         },
  128.         {
  129.             name: "Neon Blue",
  130.             css: `
  131.               body,
  132.               #app,
  133.               .styles__background___2J-JA-camelCase,
  134.               .styles__app___bM8h5-camelCase,
  135.               .styles__sidebar___1XqWi-camelCase,
  136.               .styles__header___22Ne2-camelCase,
  137.               .styles__toastContainer___o4pCa-camelCase,
  138.               .styles__chatCurrentRoom___MCaV4-camelCase,
  139.               .styles__chatRoomsListContainer___Gk4Av-camelCase,
  140.               .styles__chatRooms___o5ASb-camelCase,
  141.               .styles__container___1BPm9-camelCase,
  142.               .styles__profileContainer___CSuIE-camelCase,
  143.               .styles__statContainer___QKuOF-camelCase,
  144.               .styles__friendContainer___3wVox-camelCase,
  145.               .styles__bazaarItem___Meg69-camelCase,
  146.               .styles__topStatsContainer___dWfN7-camelCase,
  147.               .styles__statsContainer___1r5je-camelCase,
  148.               .styles__bottomStatsContainer___1O6MJ-camelCase,
  149.               .styles__statsContainer___QnrRB-camelCase {
  150.                 background-color: #1f51ff !important;
  151.                 color: white !important;
  152.                 box-shadow: 0 0 15px #1f51ff, 0 0 30px #1f51ff !important;
  153.               }
  154.             `
  155.         },
  156.         {
  157.             name: "Neon Purple",
  158.             css: `
  159.               body,
  160.               #app,
  161.               .styles__background___2J-JA-camelCase,
  162.               .styles__app___bM8h5-camelCase,
  163.               .styles__sidebar___1XqWi-camelCase,
  164.               .styles__header___22Ne2-camelCase,
  165.               .styles__toastContainer___o4pCa-camelCase,
  166.               .styles__chatCurrentRoom___MCaV4-camelCase,
  167.               .styles__chatRoomsListContainer___Gk4Av-camelCase,
  168.               .styles__chatRooms___o5ASb-camelCase,
  169.               .styles__container___1BPm9-camelCase,
  170.               .styles__profileContainer___CSuIE-camelCase,
  171.               .styles__statContainer___QKuOF-camelCase,
  172.               .styles__friendContainer___3wVox-camelCase,
  173.               .styles__bazaarItem___Meg69-camelCase,
  174.               .styles__topStatsContainer___dWfN7-camelCase,
  175.               .styles__statsContainer___1r5je-camelCase,
  176.               .styles__bottomStatsContainer___1O6MJ-camelCase,
  177.               .styles__statsContainer___QnrRB-camelCase {
  178.                 background-color: #b800ff !important;
  179.                 color: white !important;
  180.                 box-shadow: 0 0 15px #b800ff, 0 0 30px #b800ff !important;
  181.               }
  182.             `
  183.         },
  184.         {
  185.             name: "Neon Pink",
  186.             css: `
  187.               body,
  188.               #app,
  189.               .styles__background___2J-JA-camelCase,
  190.               .styles__app___bM8h5-camelCase,
  191.               .styles__sidebar___1XqWi-camelCase,
  192.               .styles__header___22Ne2-camelCase,
  193.               .styles__toastContainer___o4pCa-camelCase,
  194.               .styles__chatCurrentRoom___MCaV4-camelCase,
  195.               .styles__chatRoomsListContainer___Gk4Av-camelCase,
  196.               .styles__chatRooms___o5ASb-camelCase,
  197.               .styles__container___1BPm9-camelCase,
  198.               .styles__profileContainer___CSuIE-camelCase,
  199.               .styles__statContainer___QKuOF-camelCase,
  200.               .styles__friendContainer___3wVox-camelCase,
  201.               .styles__bazaarItem___Meg69-camelCase,
  202.               .styles__topStatsContainer___dWfN7-camelCase,
  203.               .styles__statsContainer___1r5je-camelCase,
  204.               .styles__bottomStatsContainer___1O6MJ-camelCase,
  205.               .styles__statsContainer___QnrRB-camelCase {
  206.                 background-color: #ff00d0 !important;
  207.                 color: white !important;
  208.                 box-shadow: 0 0 15px #ff00d0, 0 0 30px #ff00d0 !important;
  209.               }
  210.             `
  211.         },
  212.         {
  213.             name: "Neon White",
  214.             css: `
  215.               body,
  216.               #app,
  217.               .styles__background___2J-JA-camelCase,
  218.               .styles__app___bM8h5-camelCase,
  219.               .styles__sidebar___1XqWi-camelCase,
  220.               .styles__header___22Ne2-camelCase,
  221.               .styles__toastContainer___o4pCa-camelCase,
  222.               .styles__chatCurrentRoom___MCaV4-camelCase,
  223.               .styles__chatRoomsListContainer___Gk4Av-camelCase,
  224.               .styles__chatRooms___o5ASb-camelCase,
  225.               .styles__container___1BPm9-camelCase,
  226.               .styles__profileContainer___CSuIE-camelCase,
  227.               .styles__statContainer___QKuOF-camelCase,
  228.               .styles__friendContainer___3wVox-camelCase,
  229.               .styles__bazaarItem___Meg69-camelCase,
  230.               .styles__topStatsContainer___dWfN7-camelCase,
  231.               .styles__statsContainer___1r5je-camelCase,
  232.               .styles__bottomStatsContainer___1O6MJ-camelCase,
  233.               .styles__statsContainer___QnrRB-camelCase {
  234.                 background-color: #e6e6e6 !important;
  235.                 color: black !important;
  236.                 box-shadow: 0 0 15px #ffffff, 0 0 30px #ffffff !important;
  237.               }
  238.             `
  239.         },
  240.     ];
  241.  
  242.     // Create style element to hold theme CSS
  243.     let styleEl = document.createElement('style');
  244.     document.head.appendChild(styleEl);
  245.  
  246.     let currentThemeIndex = -1;
  247.  
  248.     // Create movable button
  249.     const btn = document.createElement('button');
  250.     btn.textContent = 'Change Theme';
  251.     btn.style.position = 'fixed';
  252.     btn.style.top = '20px';
  253.     btn.style.left = '20px';
  254.     btn.style.zIndex = 999999;
  255.     btn.style.padding = '8px 12px';
  256.     btn.style.backgroundColor = '#222';
  257.     btn.style.color = 'white';
  258.     btn.style.border = 'none';
  259.     btn.style.borderRadius = '6px';
  260.     btn.style.cursor = 'pointer';
  261.     btn.style.userSelect = 'none';
  262.     btn.style.boxShadow = '0 0 8px rgba(0,0,0,0.7)';
  263.     btn.style.fontWeight = 'bold';
  264.  
  265.     document.body.appendChild(btn);
  266.  
  267.     // Dragging functionality for button
  268.     let isDragging = false;
  269.     let dragOffsetX, dragOffsetY;
  270.  
  271.     btn.addEventListener('mousedown', e => {
  272.         isDragging = true;
  273.         dragOffsetX = e.clientX - btn.offsetLeft;
  274.         dragOffsetY = e.clientY - btn.offsetTop;
  275.         btn.style.transition = 'none'; // disable transition during drag
  276.     });
  277.  
  278.     document.addEventListener('mouseup', e => {
  279.         isDragging = false;
  280.         btn.style.transition = ''; // re-enable transition
  281.     });
  282.  
  283.     document.addEventListener('mousemove', e => {
  284.         if (isDragging) {
  285.             let x = e.clientX - dragOffsetX;
  286.             let y = e.clientY - dragOffsetY;
  287.             // Clamp position inside viewport
  288.             x = Math.min(window.innerWidth - btn.offsetWidth, Math.max(0, x));
  289.             y = Math.min(window.innerHeight - btn.offsetHeight, Math.max(0, y));
  290.             btn.style.left = x + 'px';
  291.             btn.style.top = y + 'px';
  292.         }
  293.     });
  294.  
  295.     function applyTheme(index) {
  296.         if(index < 0 || index >= neonThemes.length) return;
  297.         styleEl.textContent = neonThemes[index].css;
  298.         btn.textContent = `Theme: ${neonThemes[index].name}`;
  299.     }
  300.  
  301.     // Cycle themes on button click
  302.     btn.addEventListener('click', () => {
  303.         currentThemeIndex = (currentThemeIndex + 1) % neonThemes.length;
  304.         applyTheme(currentThemeIndex);
  305.     });
  306.  
  307.     // Optionally apply the first theme on load
  308.     currentThemeIndex = 0;
  309.     applyTheme(currentThemeIndex);
  310.  
  311. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

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