☰

Blacket Full Theme Switcher Movable

Cycle through full page themes including Original, Amoled, Red, Orange, Yellow, Green, Blue, Purple, Pink, and White on Blacket! Movable panel with Titan One font.

  1. // ==UserScript==
  2. // @name         Blacket Full Theme Switcher Movable
  3. // @version      1.5.0
  4. // @description  Cycle through full page themes including Original, Amoled, Red, Orange, Yellow, Green, Blue, Purple, Pink, and White on Blacket! Movable panel with Titan One font.
  5. // @icon         https://blacket.org/content/logo.png
  6. // @author       monkxy#0001
  7. // @namespace    http://monkxy.com
  8. // @match        https://*.blacket.org/*
  9. // @require      https://blacket.org/lib/js/jquery.js
  10. // ==/UserScript==
  11.  
  12. (() => {
  13.   const $ = jQuery;
  14.  
  15.   // Load Titan One font if not present
  16.   if (!$("link[href*='Titan+One']").length) {
  17.     $("head").append('<link href="https://fonts.googleapis.com/css2?family=Titan+One&display=swap" rel="stylesheet">');
  18.   }
  19.  
  20.   // Themes list as before
  21.   const themes = [
  22.      {
  23.       name: "Original",
  24.       css: `
  25.         /* No overrides, original Blacket.org styling */
  26.         /* This resets to the site's default look */
  27.         #blacket-theme-style { display: none !important; }
  28.       `
  29.     },
  30.     {
  31.       name: "Amoled",
  32.       css: `
  33.         /* Amoled theme overrides */
  34.         #blacket-theme-style { display: block !important; }
  35.         .styles__blooketText___1pMBG-camelCase {
  36.             font-size: 40px;
  37.             font-family: Titan One, sans-serif;
  38.             text-decoration: none;
  39.             color: white;
  40.             filter: drop-shadow(0px 0px 5px white);
  41.             margin-bottom: 20px;
  42.             text-align: center;
  43.         }
  44.         .styles__background___2J-JA-camelCase {
  45.             background-color: #000 !important;
  46.         }
  47.         .styles__bazaarItem___Meg69-camelCase {
  48.             background-color: #111111 !important;
  49.             transition: 0.2s ease-in-out;
  50.         }
  51.         .styles__bazaarItem___Meg69-camelCase:hover {
  52.             background-color: #222222 !important;
  53.             transform: scale(1.05);
  54.         }
  55.         .styles__bazaarItems___KmNa2-camelCase,
  56.         .styles__blookGridContainer___AK47P-camelCase,
  57.         .styles__cardContainer___NGmjp-camelCase,
  58.         .styles__chatCurrentRoom___MCaV4-camelCase,
  59.         .styles__chatInputContainer___gkR4A-camelCase,
  60.         .styles__chatRoomsListContainer___Gk4Av-camelCase,
  61.         .styles__chatRoomsTitle___fR4Av-camelCase,
  62.         .styles__chatRooms___o5ASb-camelCase,
  63.         .styles__container___1BPm9-camelCase,
  64.         .styles__container___2VzTy-camelCase,
  65.         .styles__container___3St5B-camelCase,
  66.         .styles__containerHeader___3xghM-camelCase,
  67.         .styles__containerHeaderInside___2omQm-camelCase,
  68.         .styles__containerHeaderRight___3xghM-camelCase,
  69.         .styles__containerHeaderRightFriends___3xghM-camelCase,
  70.         .styles__editHeaderContainer___2G1ji-camelCase,
  71.         .styles__formsForm___MvA35-camelCase,
  72.         .styles__header___22Ne2-camelCase,
  73.         .styles__header___2O21B-camelCase,
  74.         .styles__headerBadgeBg___12ogR-camelCase,
  75.         .styles__headerSide___1r1-b-camelCase,
  76.         .styles__infoContainer___2uI-S-camelCase,
  77.         .styles__input___2XTSp-camelCase,
  78.         .styles__left___9beun-camelCase,
  79.         .styles__myTokenAmount___ANKHA-camelCase,
  80.         .styles__otherTokenAmount___SEGGS-camelCase,
  81.         .styles__postsContainer___39_IQ-camelCase,
  82.         .styles__profileContainer___CSuIE-camelCase,
  83.         .styles__profileDropdownMenu___2jUAA-camelCase,
  84.         .styles__profileDropdownOption___ljZXD-camelCase,
  85.         .styles__rightButtonInside___14imT-camelCase,
  86.         .styles__sidebar___1XqWi-camelCase,
  87.         .styles__signUpButton___3_ch3-camelCase,
  88.         .styles__statContainer___QKuOF-camelCase,
  89.         .styles__statsContainer___QnrRB-camelCase,
  90.         .styles__toastContainer___o4pCa-camelCase,
  91.         .styles__tokenContainer___3yBv--camelCase,
  92.         .styles__tradingContainer___B1ABS-camelCase {
  93.             background-color: #000 !important;
  94.         }
  95.         .styles__chatEmojiButton___8RFa2-camelCase,
  96.         .styles__chatUploadButton___g39Ac-camelCase {
  97.             background-color: #000 !important;
  98.             transition: 0.2s ease-in-out;
  99.         }
  100.         .styles__chatEmojiButton___8RFa2-camelCase:hover,
  101.         .styles__chatUploadButton___g39Ac-camelCase:hover {
  102.             background-color: #111111 !important;
  103.         }
  104.         .styles__button___2hNZo-camelCase,
  105.         .styles__buttonFilled___23Dcn-camelCase {
  106.             background-color: #000 !important;
  107.         }
  108.         .styles__buttonInside___39vdp-camelCase,
  109.         .styles__front___vcvuy-camelCase {
  110.             background-color: #fff !important;
  111.             color: #000 !important;
  112.         }
  113.         .styles__edge___3eWfq-camelCase,
  114.         .styles__horizontalBlookGridLine___4SAvz-camelCase,
  115.         .styles__verticalBlookGridLine___rQWaZ-camelCase,
  116.         hr {
  117.             background-color: #fff !important;
  118.         }
  119.         #searchInput,
  120.         textarea,
  121.         input,
  122.         .toastMessage {
  123.             background-color: #000 !important;
  124.         }
  125.         .styles__loginButton___1e3jI-camelCase {
  126.             background-color: #fff !important;
  127.             color: #000 !important;
  128.         }
  129.         .styles__profileDropdownOption___ljZXD-camelCase:hover {
  130.             background-color: #111111 !important;
  131.         }
  132.       `
  133.     },
  134. {
  135.   name: "Red",
  136.   css: `
  137.     body, #app,
  138.     .styles__background___2J-JA-camelCase,
  139.     .styles__app___bM8h5-camelCase,
  140.     .styles__sidebar___1XqWi-camelCase,
  141.     .styles__header___22Ne2-camelCase,
  142.     .styles__toastContainer___o4pCa-camelCase,
  143.     .styles__chatCurrentRoom___MCaV4-camelCase,
  144.     .styles__chatRoomsListContainer___Gk4Av-camelCase,
  145.     .styles__chatRooms___o5ASb-camelCase,
  146.     .styles__container___1BPm9-camelCase,
  147.     .styles__profileContainer___CSuIE-camelCase,
  148.     .styles__statContainer___QKuOF-camelCase,
  149.     .styles__friendContainer___3wVox-camelCase,
  150.     .styles__bazaarItem___Meg69-camelCase,
  151.     .styles__topStatsContainer___dWfN7-camelCase,
  152.     .styles__statsContainer___1r5je-camelCase,
  153.     .styles__bottomStatsContainer___1O6MJ-camelCase,
  154.     .styles__statsContainer___QnrRB-camelCase {
  155.       background-color: #b31313 !important;
  156.       color: white !important;
  157.     }
  158.  
  159.     .styles__stat___3f0U4-camelCase,
  160.     .styles__friend___3ZgeG-camelCase,
  161.     .styles__containerInner___3aRAZ-camelCase,
  162.     .styles__profileStat___3GvPt-camelCase {
  163.       background-color: #d72e2e !important;
  164.     }
  165.  
  166.     textarea, input, button {
  167.       background-color: #d62b2b !important;
  168.       color: white !important;
  169.       border-color: #a31313 !important;
  170.     }
  171.  
  172.     button:hover,
  173.     .styles__bazaarItem___Meg69-camelCase:hover,
  174.     .styles__profileDropdownOption___ljZXD-camelCase:hover {
  175.       background-color: #8e0d0d !important;
  176.       transform: scale(1.05);
  177.     }
  178.  
  179.     hr, .styles__edge___3eWfq-camelCase {
  180.       background-color: white !important;
  181.     }
  182.   `
  183. },
  184.  
  185.  
  186.  
  187. {
  188.   name: "Orange",
  189.   css: `
  190.     body, #app,
  191.     .styles__background___2J-JA-camelCase,
  192.     .styles__app___bM8h5-camelCase,
  193.     .styles__sidebar___1XqWi-camelCase,
  194.     .styles__header___22Ne2-camelCase,
  195.     .styles__toastContainer___o4pCa-camelCase,
  196.     .styles__chatCurrentRoom___MCaV4-camelCase,
  197.     .styles__chatRoomsListContainer___Gk4Av-camelCase,
  198.     .styles__chatRooms___o5ASb-camelCase,
  199.     .styles__container___1BPm9-camelCase,
  200.     .styles__profileContainer___CSuIE-camelCase,
  201.     .styles__statContainer___QKuOF-camelCase,
  202.     .styles__friendContainer___3wVox-camelCase,
  203.     .styles__bazaarItem___Meg69-camelCase,
  204.     .styles__topStatsContainer___dWfN7-camelCase,
  205.     .styles__statsContainer___1r5je-camelCase,
  206.     .styles__bottomStatsContainer___1O6MJ-camelCase,
  207.     .styles__statsContainer___QnrRB-camelCase {
  208.       background-color: #ff6f00 !important; /* orange */
  209.       color: white !important;
  210.     }
  211.  
  212.     .styles__stat___3f0U4-camelCase,
  213.     .styles__friend___3ZgeG-camelCase,
  214.     .styles__containerInner___3aRAZ-camelCase,
  215.     .styles__profileStat___3GvPt-camelCase {
  216.       background-color: #ff9100 !important; /* lighter orange */
  217.     }
  218.  
  219.     textarea, input, button {
  220.       background-color: #ff8f00 !important;
  221.       color: white !important;
  222.       border-color: #cc5a00 !important; /* darker orange border */
  223.     }
  224.  
  225.     button:hover,
  226.     .styles__bazaarItem___Meg69-camelCase:hover,
  227.     .styles__profileDropdownOption___ljZXD-camelCase:hover {
  228.       background-color: #cc5200 !important; /* darker hover */
  229.       transform: scale(1.05);
  230.     }
  231.  
  232.     hr, .styles__edge___3eWfq-camelCase {
  233.       background-color: white !important;
  234.     }
  235.   `
  236. },
  237. {
  238.   name: "Yellow",
  239.   css: `
  240.     body, #app,
  241.     .styles__background___2J-JA-camelCase,
  242.     .styles__app___bM8h5-camelCase,
  243.     .styles__sidebar___1XqWi-camelCase,
  244.     .styles__header___22Ne2-camelCase,
  245.     .styles__toastContainer___o4pCa-camelCase,
  246.     .styles__chatCurrentRoom___MCaV4-camelCase,
  247.     .styles__chatRoomsListContainer___Gk4Av-camelCase,
  248.     .styles__chatRooms___o5ASb-camelCase,
  249.     .styles__container___1BPm9-camelCase,
  250.     .styles__profileContainer___CSuIE-camelCase,
  251.     .styles__statContainer___QKuOF-camelCase,
  252.     .styles__friendContainer___3wVox-camelCase,
  253.     .styles__bazaarItem___Meg69-camelCase,
  254.     .styles__topStatsContainer___dWfN7-camelCase,
  255.     .styles__statsContainer___1r5je-camelCase,
  256.     .styles__bottomStatsContainer___1O6MJ-camelCase,
  257.     .styles__statsContainer___QnrRB-camelCase {
  258.       background-color: #b38f00 !important;
  259.       color: white !important;
  260.     }
  261.  
  262.     .styles__stat___3f0U4-camelCase,
  263.     .styles__friend___3ZgeG-camelCase,
  264.     .styles__containerInner___3aRAZ-camelCase,
  265.     .styles__profileStat___3GvPt-camelCase {
  266.       background-color: #d7ae00 !important;
  267.     }
  268.  
  269.     textarea, input, button {
  270.       background-color: #d6ab00 !important;
  271.       color: white !important;
  272.       border-color: #a38800 !important;
  273.     }
  274.  
  275.     button:hover,
  276.     .styles__bazaarItem___Meg69-camelCase:hover,
  277.     .styles__profileDropdownOption___ljZXD-camelCase:hover {
  278.       background-color: #8e6f00 !important;
  279.       transform: scale(1.05);
  280.     }
  281.  
  282.     hr, .styles__edge___3eWfq-camelCase {
  283.       background-color: white !important;
  284.     }
  285.   `
  286. },
  287.  
  288.     {
  289.   name: "Green",
  290.   css: `
  291.     body, #app,
  292.     .styles__background___2J-JA-camelCase,
  293.     .styles__app___bM8h5-camelCase,
  294.     .styles__sidebar___1XqWi-camelCase,
  295.     .styles__header___22Ne2-camelCase,
  296.     .styles__toastContainer___o4pCa-camelCase,
  297.     .styles__chatCurrentRoom___MCaV4-camelCase,
  298.     .styles__chatRoomsListContainer___Gk4Av-camelCase,
  299.     .styles__chatRooms___o5ASb-camelCase,
  300.     .styles__container___1BPm9-camelCase,
  301.     .styles__profileContainer___CSuIE-camelCase,
  302.     .styles__statContainer___QKuOF-camelCase,
  303.     .styles__friendContainer___3wVox-camelCase,
  304.     .styles__bazaarItem___Meg69-camelCase,
  305.     .styles__topStatsContainer___dWfN7-camelCase,
  306.     .styles__statsContainer___1r5je-camelCase,
  307.     .styles__bottomStatsContainer___1O6MJ-camelCase,
  308.     .styles__statsContainer___QnrRB-camelCase {
  309.       background-color: #1a6500 !important;
  310.       color: white !important;
  311.     }
  312.  
  313.     .styles__stat___3f0U4-camelCase,
  314.     .styles__friend___3ZgeG-camelCase,
  315.     .styles__containerInner___3aRAZ-camelCase,
  316.     .styles__profileStat___3GvPt-camelCase {
  317.       background-color: #2ab200 !important;
  318.     }
  319.  
  320.     textarea, input, button {
  321.       background-color: #28b000 !important;
  322.       color: white !important;
  323.       border-color: #176600 !important;
  324.     }
  325.  
  326.     button:hover,
  327.     .styles__bazaarItem___Meg69-camelCase:hover,
  328.     .styles__profileDropdownOption___ljZXD-camelCase:hover {
  329.       background-color: #135300 !important;
  330.       transform: scale(1.05);
  331.     }
  332.  
  333.     hr, .styles__edge___3eWfq-camelCase {
  334.       background-color: white !important;
  335.     }
  336.   `
  337. },
  338.     {
  339.   name: "Blue",
  340.   css: `
  341.     body, #app,
  342.     .styles__background___2J-JA-camelCase,
  343.     .styles__app___bM8h5-camelCase,
  344.     .styles__sidebar___1XqWi-camelCase,
  345.     .styles__header___22Ne2-camelCase,
  346.     .styles__toastContainer___o4pCa-camelCase,
  347.     .styles__chatCurrentRoom___MCaV4-camelCase,
  348.     .styles__chatRoomsListContainer___Gk4Av-camelCase,
  349.     .styles__chatRooms___o5ASb-camelCase,
  350.     .styles__container___1BPm9-camelCase,
  351.     .styles__profileContainer___CSuIE-camelCase,
  352.     .styles__statContainer___QKuOF-camelCase,
  353.     .styles__friendContainer___3wVox-camelCase,
  354.     .styles__bazaarItem___Meg69-camelCase,
  355.     .styles__topStatsContainer___dWfN7-camelCase,
  356.     .styles__statsContainer___1r5je-camelCase,
  357.     .styles__bottomStatsContainer___1O6MJ-camelCase,
  358.     .styles__statsContainer___QnrRB-camelCase {
  359.       background-color: #0048b3 !important;
  360.       color: white !important;
  361.     }
  362.  
  363.     .styles__stat___3f0U4-camelCase,
  364.     .styles__friend___3ZgeG-camelCase,
  365.     .styles__containerInner___3aRAZ-camelCase,
  366.     .styles__profileStat___3GvPt-camelCase {
  367.       background-color: #0066ff !important;
  368.     }
  369.  
  370.     textarea, input, button {
  371.       background-color: #0065ff !important;
  372.       color: white !important;
  373.       border-color: #003d80 !important;
  374.     }
  375.  
  376.     button:hover,
  377.     .styles__bazaarItem___Meg69-camelCase:hover,
  378.     .styles__profileDropdownOption___ljZXD-camelCase:hover {
  379.       background-color: #003366 !important;
  380.       transform: scale(1.05);
  381.     }
  382.  
  383.     hr, .styles__edge___3eWfq-camelCase {
  384.       background-color: white !important;
  385.     }
  386.   `
  387. },
  388.     {
  389.   name: "Purple",
  390.   css: `
  391.     body, #app,
  392.     .styles__background___2J-JA-camelCase,
  393.     .styles__app___bM8h5-camelCase,
  394.     .styles__sidebar___1XqWi-camelCase,
  395.     .styles__header___22Ne2-camelCase,
  396.     .styles__toastContainer___o4pCa-camelCase,
  397.     .styles__chatCurrentRoom___MCaV4-camelCase,
  398.     .styles__chatRoomsListContainer___Gk4Av-camelCase,
  399.     .styles__chatRooms___o5ASb-camelCase,
  400.     .styles__container___1BPm9-camelCase,
  401.     .styles__profileContainer___CSuIE-camelCase,
  402.     .styles__statContainer___QKuOF-camelCase,
  403.     .styles__friendContainer___3wVox-camelCase,
  404.     .styles__bazaarItem___Meg69-camelCase,
  405.     .styles__topStatsContainer___dWfN7-camelCase,
  406.     .styles__statsContainer___1r5je-camelCase,
  407.     .styles__bottomStatsContainer___1O6MJ-camelCase,
  408.     .styles__statsContainer___QnrRB-camelCase {
  409.       background-color: #6a00b3 !important;
  410.       color: white !important;
  411.     }
  412.  
  413.     .styles__stat___3f0U4-camelCase,
  414.     .styles__friend___3ZgeG-camelCase,
  415.     .styles__containerInner___3aRAZ-camelCase,
  416.     .styles__profileStat___3GvPt-camelCase {
  417.       background-color: #8600ff !important;
  418.     }
  419.  
  420.     textarea, input, button {
  421.       background-color: #7e00ff !important;
  422.       color: white !important;
  423.       border-color: #4b0080 !important;
  424.     }
  425.  
  426.     button:hover,
  427.     .styles__bazaarItem___Meg69-camelCase:hover,
  428.     .styles__profileDropdownOption___ljZXD-camelCase:hover {
  429.       background-color: #4b0080 !important;
  430.       transform: scale(1.05);
  431.     }
  432.  
  433.     hr, .styles__edge___3eWfq-camelCase {
  434.       background-color: white !important;
  435.     }
  436.   `
  437. },
  438.  
  439.     {
  440.   name: "Pink",
  441.   css: `
  442.     body, #app,
  443.     .styles__background___2J-JA-camelCase,
  444.     .styles__app___bM8h5-camelCase,
  445.     .styles__sidebar___1XqWi-camelCase,
  446.     .styles__header___22Ne2-camelCase,
  447.     .styles__toastContainer___o4pCa-camelCase,
  448.     .styles__chatCurrentRoom___MCaV4-camelCase,
  449.     .styles__chatRoomsListContainer___Gk4Av-camelCase,
  450.     .styles__chatRooms___o5ASb-camelCase,
  451.     .styles__container___1BPm9-camelCase,
  452.     .styles__profileContainer___CSuIE-camelCase,
  453.     .styles__statContainer___QKuOF-camelCase,
  454.     .styles__friendContainer___3wVox-camelCase,
  455.     .styles__bazaarItem___Meg69-camelCase,
  456.     .styles__topStatsContainer___dWfN7-camelCase,
  457.     .styles__statsContainer___1r5je-camelCase,
  458.     .styles__bottomStatsContainer___1O6MJ-camelCase,
  459.     .styles__statsContainer___QnrRB-camelCase {
  460.       background-color: #b30089 !important;
  461.       color: white !important;
  462.     }
  463.  
  464.     .styles__stat___3f0U4-camelCase,
  465.     .styles__friend___3ZgeG-camelCase,
  466.     .styles__containerInner___3aRAZ-camelCase,
  467.     .styles__profileStat___3GvPt-camelCase {
  468.       background-color: #d32eaf !important;
  469.     }
  470.  
  471.     textarea, input, button {
  472.       background-color: #d22da3 !important;
  473.       color: white !important;
  474.       border-color: #8a005a !important;
  475.     }
  476.  
  477.     button:hover,
  478.     .styles__bazaarItem___Meg69-camelCase:hover,
  479.     .styles__profileDropdownOption___ljZXD-camelCase:hover {
  480.       background-color: #720040 !important;
  481.       transform: scale(1.05);
  482.     }
  483.  
  484.     hr, .styles__edge___3eWfq-camelCase {
  485.       background-color: white !important;
  486.     }
  487.   `
  488. },
  489.     {
  490.   name: "White",
  491.   css: `
  492.     body, #app,
  493.     .styles__background___2J-JA-camelCase,
  494.     .styles__app___bM8h5-camelCase,
  495.     .styles__sidebar___1XqWi-camelCase,
  496.     .styles__header___22Ne2-camelCase,
  497.     .styles__toastContainer___o4pCa-camelCase,
  498.     .styles__chatCurrentRoom___MCaV4-camelCase,
  499.     .styles__chatRoomsListContainer___Gk4Av-camelCase,
  500.     .styles__chatRooms___o5ASb-camelCase,
  501.     .styles__container___1BPm9-camelCase,
  502.     .styles__profileContainer___CSuIE-camelCase,
  503.     .styles__statContainer___QKuOF-camelCase,
  504.     .styles__friendContainer___3wVox-camelCase,
  505.     .styles__bazaarItem___Meg69-camelCase,
  506.     .styles__topStatsContainer___dWfN7-camelCase,
  507.     .styles__statsContainer___1r5je-camelCase,
  508.     .styles__bottomStatsContainer___1O6MJ-camelCase,
  509.     .styles__statsContainer___QnrRB-camelCase {
  510.       background-color: #e6e6e6 !important;
  511.       color: black !important;
  512.     }
  513.  
  514.     .styles__stat___3f0U4-camelCase,
  515.     .styles__friend___3ZgeG-camelCase,
  516.     .styles__containerInner___3aRAZ-camelCase,
  517.     .styles__profileStat___3GvPt-camelCase {
  518.       background-color: #f7f7f7 !important;
  519.       color: black !important;
  520.     }
  521.  
  522.     textarea, input, button {
  523.       background-color: #f0f0f0 !important;
  524.       color: black !important;
  525.       border-color: #bfbfbf !important;
  526.     }
  527.  
  528.     button:hover,
  529.     .styles__bazaarItem___Meg69-camelCase:hover,
  530.     .styles__profileDropdownOption___ljZXD-camelCase:hover {
  531.       background-color: #d6d6d6 !important;
  532.       transform: scale(1.05);
  533.     }
  534.  
  535.     hr, .styles__edge___3eWfq-camelCase {
  536.       background-color: black !important;
  537.     }
  538.   `
  539. },
  540. {
  541.   name: "Rainbow",
  542.   css: `
  543.     @keyframes rainbowFade {
  544.       0%   { background-color: #FF0000; } /* Red */
  545.       16%  { background-color: #FF7F00; } /* Orange */
  546.       33%  { background-color: #FFFF00; } /* Yellow */
  547.       50%  { background-color: #00FF00; } /* Green */
  548.       66%  { background-color: #0000FF; } /* Blue */
  549.       83%  { background-color: #4B0082; } /* Indigo */
  550.       100% { background-color: #9400D3; } /* Violet */
  551.     }
  552.  
  553.     body, #app,
  554.     .styles__background___2J-JA-camelCase,
  555.     .styles__app___bM8h5-camelCase,
  556.     .styles__sidebar___1XqWi-camelCase,
  557.     .styles__header___22Ne2-camelCase,
  558.     .styles__toastContainer___o4pCa-camelCase,
  559.     .styles__chatCurrentRoom___MCaV4-camelCase,
  560.     .styles__chatRoomsListContainer___Gk4Av-camelCase,
  561.     .styles__chatRooms___o5ASb-camelCase,
  562.     .styles__container___1BPm9-camelCase,
  563.     .styles__profileContainer___CSuIE-camelCase,
  564.     .styles__statContainer___QKuOF-camelCase,
  565.     .styles__friendContainer___3wVox-camelCase,
  566.     .styles__bazaarItem___Meg69-camelCase,
  567.     .styles__topStatsContainer___dWfN7-camelCase,
  568.     .styles__statsContainer___1r5je-camelCase,
  569.     .styles__bottomStatsContainer___1O6MJ-camelCase,
  570.     .styles__statsContainer___QnrRB-camelCase {
  571.       animation: rainbowFade 15s infinite alternate;
  572.       color: white !important;
  573.     }
  574.  
  575.     .styles__stat___3f0U4-camelCase,
  576.     .styles__friend___3ZgeG-camelCase,
  577.     .styles__containerInner___3aRAZ-camelCase,
  578.     .styles__profileStat___3GvPt-camelCase {
  579.       background-color: rgba(255, 255, 255, 0.2) !important;
  580.       color: white !important;
  581.     }
  582.  
  583.     textarea, input, button {
  584.       background-color: rgba(0, 0, 0, 0.3) !important;
  585.       color: white !important;
  586.       border-color: rgba(255, 255, 255, 0.5) !important;
  587.     }
  588.  
  589.     button:hover,
  590.     .styles__bazaarItem___Meg69-camelCase:hover,
  591.     .styles__profileDropdownOption___ljZXD-camelCase:hover {
  592.       background-color: rgba(0, 0, 0, 0.5) !important;
  593.       transform: scale(1.05);
  594.       color: white !important;
  595.     }
  596.  
  597.     hr, .styles__edge___3eWfq-camelCase {
  598.       background-color: white !important;
  599.     }
  600.   `
  601. }
  602.  
  603.   ];
  604.  
  605.  
  606.   let styleEl = $('#blacket-theme-style');
  607.   if (styleEl.length === 0) {
  608.     styleEl = $('<style id="blacket-theme-style"></style>');
  609.     $('head').append(styleEl);
  610.   }
  611.  
  612.   let currentTheme = parseInt(localStorage.getItem('blacket-theme-index')) || 0;
  613.  
  614.   function applyTheme(idx) {
  615.     if (idx < 0 || idx >= themes.length) idx = 0;
  616.     currentTheme = idx;
  617.     localStorage.setItem('blacket-theme-index', currentTheme);
  618.     if (themes[currentTheme].name === "Original") {
  619.       styleEl.text('');
  620.       styleEl.attr('disabled', 'disabled');
  621.     } else {
  622.       styleEl.removeAttr('disabled');
  623.       styleEl.text(themes[currentTheme].css);
  624.     }
  625.     $('#blacket-theme-switcher-btn-text').text(`Theme: ${themes[currentTheme].name}`);
  626.     console.log(`%c[Blacket Theme] Applied theme: ${themes[currentTheme].name}`, 'color: #0a0; font-weight: bold;');
  627.   }
  628.  
  629.   // Create draggable panel container
  630.   let panel = $('#blacket-theme-switcher-panel');
  631.   if (panel.length === 0) {
  632.     panel = $(`
  633.       <div id="blacket-theme-switcher-panel" style="
  634.         position: fixed;
  635.         bottom: 15px;
  636.         right: 15px;
  637.         width: 160px;
  638.         background-color: #222;
  639.         color: white;
  640.         border-radius: 8px;
  641.         box-shadow: 0 4px 12px rgba(0,0,0,0.6);
  642.         font-family: 'Titan One', cursive, sans-serif;
  643.         user-select: none;
  644.         z-index: 999999;
  645.       ">
  646.         <div id="blacket-theme-switcher-header" style="
  647.           cursor: move;
  648.           padding: 8px 12px;
  649.           font-weight: bold;
  650.           font-size: 16px;
  651.           background: #111;
  652.           border-radius: 8px 8px 0 0;
  653.           text-align: center;
  654.         ">Theme Switcher</div>
  655.         <button id="blacket-theme-switcher-btn" style="
  656.           width: 100%;
  657.           padding: 10px 0;
  658.           border: none;
  659.           background-color: #444;
  660.           color: white;
  661.           font-family: 'Titan One', cursive, sans-serif;
  662.           font-size: 14px;
  663.           border-radius: 0 0 8px 8px;
  664.           cursor: pointer;
  665.           transition: background-color 0.2s ease;
  666.         ">
  667.           <span id="blacket-theme-switcher-btn-text">Theme: Loading...</span>
  668.         </button>
  669.       </div>
  670.     `);
  671.     $('body').append(panel);
  672.   }
  673.  
  674.   // Drag logic
  675.   const header = $('#blacket-theme-switcher-header');
  676.   let isDragging = false;
  677.   let dragStartX, dragStartY;
  678.   let panelStartX, panelStartY;
  679.  
  680.   header.on('mousedown', (e) => {
  681.     isDragging = true;
  682.     dragStartX = e.clientX;
  683.     dragStartY = e.clientY;
  684.     const offset = panel.offset();
  685.     panelStartX = offset.left;
  686.     panelStartY = offset.top;
  687.     e.preventDefault();
  688.   });
  689.  
  690.   $(document).on('mouseup', () => {
  691.     isDragging = false;
  692.   });
  693.  
  694.   $(document).on('mousemove', (e) => {
  695.     if (!isDragging) return;
  696.     let newX = panelStartX + (e.clientX - dragStartX);
  697.     let newY = panelStartY + (e.clientY - dragStartY);
  698.  
  699.     // Keep panel within viewport boundaries
  700.     const windowWidth = $(window).width();
  701.     const windowHeight = $(window).height();
  702.     const panelWidth = panel.outerWidth();
  703.     const panelHeight = panel.outerHeight();
  704.  
  705.     if (newX < 0) newX = 0;
  706.     if (newY < 0) newY = 0;
  707.     if (newX + panelWidth > windowWidth) newX = windowWidth - panelWidth;
  708.     if (newY + panelHeight > windowHeight) newY = windowHeight - panelHeight;
  709.  
  710.     panel.css({ left: newX + 'px', top: newY + 'px', bottom: 'auto', right: 'auto' });
  711.   });
  712.  
  713.   // Button click to cycle themes
  714.   $('#blacket-theme-switcher-btn').off('click').on('click', () => {
  715.     let next = (currentTheme + 1) % themes.length;
  716.     applyTheme(next);
  717.   });
  718.  
  719.   applyTheme(currentTheme);
  720. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

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

加入Q群

QingJ © 2025

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