Blacket Neon Theme Switcher

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

// ==UserScript==
// @name         Blacket Neon Theme Switcher
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Movable button to cycle through neon color themes on Blacket.org full page styling
// @author       monkxy#0001
// @match        https://blacket.org/*
// @match        https://*.blacket.org/*
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    const neonThemes = [
        {
            name: "Neon Red",
            css: `
              body,
              #app,
              .styles__background___2J-JA-camelCase,
              .styles__app___bM8h5-camelCase,
              .styles__sidebar___1XqWi-camelCase,
              .styles__header___22Ne2-camelCase,
              .styles__toastContainer___o4pCa-camelCase,
              .styles__chatCurrentRoom___MCaV4-camelCase,
              .styles__chatRoomsListContainer___Gk4Av-camelCase,
              .styles__chatRooms___o5ASb-camelCase,
              .styles__container___1BPm9-camelCase,
              .styles__profileContainer___CSuIE-camelCase,
              .styles__statContainer___QKuOF-camelCase,
              .styles__friendContainer___3wVox-camelCase,
              .styles__bazaarItem___Meg69-camelCase,
              .styles__topStatsContainer___dWfN7-camelCase,
              .styles__statsContainer___1r5je-camelCase,
              .styles__bottomStatsContainer___1O6MJ-camelCase,
              .styles__statsContainer___QnrRB-camelCase {
                background-color: #ff073a !important;
                color: white !important;
                box-shadow: 0 0 15px #ff073a, 0 0 30px #ff073a !important;
              }
            `
        },
        {
            name: "Neon Orange",
            css: `
              body,
              #app,
              .styles__background___2J-JA-camelCase,
              .styles__app___bM8h5-camelCase,
              .styles__sidebar___1XqWi-camelCase,
              .styles__header___22Ne2-camelCase,
              .styles__toastContainer___o4pCa-camelCase,
              .styles__chatCurrentRoom___MCaV4-camelCase,
              .styles__chatRoomsListContainer___Gk4Av-camelCase,
              .styles__chatRooms___o5ASb-camelCase,
              .styles__container___1BPm9-camelCase,
              .styles__profileContainer___CSuIE-camelCase,
              .styles__statContainer___QKuOF-camelCase,
              .styles__friendContainer___3wVox-camelCase,
              .styles__bazaarItem___Meg69-camelCase,
              .styles__topStatsContainer___dWfN7-camelCase,
              .styles__statsContainer___1r5je-camelCase,
              .styles__bottomStatsContainer___1O6MJ-camelCase,
              .styles__statsContainer___QnrRB-camelCase {
                background-color: #ff6a00 !important;
                color: white !important;
                box-shadow: 0 0 15px #ff6a00, 0 0 30px #ff6a00 !important;
              }
            `
        },
        {
            name: "Neon Yellow",
            css: `
              body,
              #app,
              .styles__background___2J-JA-camelCase,
              .styles__app___bM8h5-camelCase,
              .styles__sidebar___1XqWi-camelCase,
              .styles__header___22Ne2-camelCase,
              .styles__toastContainer___o4pCa-camelCase,
              .styles__chatCurrentRoom___MCaV4-camelCase,
              .styles__chatRoomsListContainer___Gk4Av-camelCase,
              .styles__chatRooms___o5ASb-camelCase,
              .styles__container___1BPm9-camelCase,
              .styles__profileContainer___CSuIE-camelCase,
              .styles__statContainer___QKuOF-camelCase,
              .styles__friendContainer___3wVox-camelCase,
              .styles__bazaarItem___Meg69-camelCase,
              .styles__topStatsContainer___dWfN7-camelCase,
              .styles__statsContainer___1r5je-camelCase,
              .styles__bottomStatsContainer___1O6MJ-camelCase,
              .styles__statsContainer___QnrRB-camelCase {
                background-color: #fff100 !important;
                color: black !important;
                box-shadow: 0 0 15px #fff100, 0 0 30px #fff100 !important;
              }
            `
        },
        {
            name: "Neon Green",
            css: `
              body,
              #app,
              .styles__background___2J-JA-camelCase,
              .styles__app___bM8h5-camelCase,
              .styles__sidebar___1XqWi-camelCase,
              .styles__header___22Ne2-camelCase,
              .styles__toastContainer___o4pCa-camelCase,
              .styles__chatCurrentRoom___MCaV4-camelCase,
              .styles__chatRoomsListContainer___Gk4Av-camelCase,
              .styles__chatRooms___o5ASb-camelCase,
              .styles__container___1BPm9-camelCase,
              .styles__profileContainer___CSuIE-camelCase,
              .styles__statContainer___QKuOF-camelCase,
              .styles__friendContainer___3wVox-camelCase,
              .styles__bazaarItem___Meg69-camelCase,
              .styles__topStatsContainer___dWfN7-camelCase,
              .styles__statsContainer___1r5je-camelCase,
              .styles__bottomStatsContainer___1O6MJ-camelCase,
              .styles__statsContainer___QnrRB-camelCase {
                background-color: #39ff14 !important;
                color: black !important;
                box-shadow: 0 0 15px #39ff14, 0 0 30px #39ff14 !important;
              }
            `
        },
        {
            name: "Neon Blue",
            css: `
              body,
              #app,
              .styles__background___2J-JA-camelCase,
              .styles__app___bM8h5-camelCase,
              .styles__sidebar___1XqWi-camelCase,
              .styles__header___22Ne2-camelCase,
              .styles__toastContainer___o4pCa-camelCase,
              .styles__chatCurrentRoom___MCaV4-camelCase,
              .styles__chatRoomsListContainer___Gk4Av-camelCase,
              .styles__chatRooms___o5ASb-camelCase,
              .styles__container___1BPm9-camelCase,
              .styles__profileContainer___CSuIE-camelCase,
              .styles__statContainer___QKuOF-camelCase,
              .styles__friendContainer___3wVox-camelCase,
              .styles__bazaarItem___Meg69-camelCase,
              .styles__topStatsContainer___dWfN7-camelCase,
              .styles__statsContainer___1r5je-camelCase,
              .styles__bottomStatsContainer___1O6MJ-camelCase,
              .styles__statsContainer___QnrRB-camelCase {
                background-color: #1f51ff !important;
                color: white !important;
                box-shadow: 0 0 15px #1f51ff, 0 0 30px #1f51ff !important;
              }
            `
        },
        {
            name: "Neon Purple",
            css: `
              body,
              #app,
              .styles__background___2J-JA-camelCase,
              .styles__app___bM8h5-camelCase,
              .styles__sidebar___1XqWi-camelCase,
              .styles__header___22Ne2-camelCase,
              .styles__toastContainer___o4pCa-camelCase,
              .styles__chatCurrentRoom___MCaV4-camelCase,
              .styles__chatRoomsListContainer___Gk4Av-camelCase,
              .styles__chatRooms___o5ASb-camelCase,
              .styles__container___1BPm9-camelCase,
              .styles__profileContainer___CSuIE-camelCase,
              .styles__statContainer___QKuOF-camelCase,
              .styles__friendContainer___3wVox-camelCase,
              .styles__bazaarItem___Meg69-camelCase,
              .styles__topStatsContainer___dWfN7-camelCase,
              .styles__statsContainer___1r5je-camelCase,
              .styles__bottomStatsContainer___1O6MJ-camelCase,
              .styles__statsContainer___QnrRB-camelCase {
                background-color: #b800ff !important;
                color: white !important;
                box-shadow: 0 0 15px #b800ff, 0 0 30px #b800ff !important;
              }
            `
        },
        {
            name: "Neon Pink",
            css: `
              body,
              #app,
              .styles__background___2J-JA-camelCase,
              .styles__app___bM8h5-camelCase,
              .styles__sidebar___1XqWi-camelCase,
              .styles__header___22Ne2-camelCase,
              .styles__toastContainer___o4pCa-camelCase,
              .styles__chatCurrentRoom___MCaV4-camelCase,
              .styles__chatRoomsListContainer___Gk4Av-camelCase,
              .styles__chatRooms___o5ASb-camelCase,
              .styles__container___1BPm9-camelCase,
              .styles__profileContainer___CSuIE-camelCase,
              .styles__statContainer___QKuOF-camelCase,
              .styles__friendContainer___3wVox-camelCase,
              .styles__bazaarItem___Meg69-camelCase,
              .styles__topStatsContainer___dWfN7-camelCase,
              .styles__statsContainer___1r5je-camelCase,
              .styles__bottomStatsContainer___1O6MJ-camelCase,
              .styles__statsContainer___QnrRB-camelCase {
                background-color: #ff00d0 !important;
                color: white !important;
                box-shadow: 0 0 15px #ff00d0, 0 0 30px #ff00d0 !important;
              }
            `
        },
        {
            name: "Neon White",
            css: `
              body,
              #app,
              .styles__background___2J-JA-camelCase,
              .styles__app___bM8h5-camelCase,
              .styles__sidebar___1XqWi-camelCase,
              .styles__header___22Ne2-camelCase,
              .styles__toastContainer___o4pCa-camelCase,
              .styles__chatCurrentRoom___MCaV4-camelCase,
              .styles__chatRoomsListContainer___Gk4Av-camelCase,
              .styles__chatRooms___o5ASb-camelCase,
              .styles__container___1BPm9-camelCase,
              .styles__profileContainer___CSuIE-camelCase,
              .styles__statContainer___QKuOF-camelCase,
              .styles__friendContainer___3wVox-camelCase,
              .styles__bazaarItem___Meg69-camelCase,
              .styles__topStatsContainer___dWfN7-camelCase,
              .styles__statsContainer___1r5je-camelCase,
              .styles__bottomStatsContainer___1O6MJ-camelCase,
              .styles__statsContainer___QnrRB-camelCase {
                background-color: #e6e6e6 !important;
                color: black !important;
                box-shadow: 0 0 15px #ffffff, 0 0 30px #ffffff !important;
              }
            `
        },
    ];

    // Create style element to hold theme CSS
    let styleEl = document.createElement('style');
    document.head.appendChild(styleEl);

    let currentThemeIndex = -1;

    // Create movable button
    const btn = document.createElement('button');
    btn.textContent = 'Change Theme';
    btn.style.position = 'fixed';
    btn.style.top = '20px';
    btn.style.left = '20px';
    btn.style.zIndex = 999999;
    btn.style.padding = '8px 12px';
    btn.style.backgroundColor = '#222';
    btn.style.color = 'white';
    btn.style.border = 'none';
    btn.style.borderRadius = '6px';
    btn.style.cursor = 'pointer';
    btn.style.userSelect = 'none';
    btn.style.boxShadow = '0 0 8px rgba(0,0,0,0.7)';
    btn.style.fontWeight = 'bold';

    document.body.appendChild(btn);

    // Dragging functionality for button
    let isDragging = false;
    let dragOffsetX, dragOffsetY;

    btn.addEventListener('mousedown', e => {
        isDragging = true;
        dragOffsetX = e.clientX - btn.offsetLeft;
        dragOffsetY = e.clientY - btn.offsetTop;
        btn.style.transition = 'none'; // disable transition during drag
    });

    document.addEventListener('mouseup', e => {
        isDragging = false;
        btn.style.transition = ''; // re-enable transition
    });

    document.addEventListener('mousemove', e => {
        if (isDragging) {
            let x = e.clientX - dragOffsetX;
            let y = e.clientY - dragOffsetY;
            // Clamp position inside viewport
            x = Math.min(window.innerWidth - btn.offsetWidth, Math.max(0, x));
            y = Math.min(window.innerHeight - btn.offsetHeight, Math.max(0, y));
            btn.style.left = x + 'px';
            btn.style.top = y + 'px';
        }
    });

    function applyTheme(index) {
        if(index < 0 || index >= neonThemes.length) return;
        styleEl.textContent = neonThemes[index].css;
        btn.textContent = `Theme: ${neonThemes[index].name}`;
    }

    // Cycle themes on button click
    btn.addEventListener('click', () => {
        currentThemeIndex = (currentThemeIndex + 1) % neonThemes.length;
        applyTheme(currentThemeIndex);
    });

    // Optionally apply the first theme on load
    currentThemeIndex = 0;
    applyTheme(currentThemeIndex);

})();

QingJ © 2025

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