☰

Custom Scratch Blocks & Themes

Customize Scratch blocks and apply themes with a modern UI

  1. // ==UserScript==
  2. // @name         Custom Scratch Blocks & Themes
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.0
  5. // @description  Customize Scratch blocks and apply themes with a modern UI
  6. // @author       YourName
  7. // @match        https://scratch.mit.edu/projects/*
  8. // @grant        GM_addStyle
  9. // ==/UserScript==
  10.  
  11. (function() {
  12.     'use strict';
  13.  
  14.     // Create GUI elements
  15.     const guiOverlay = document.createElement('div');
  16.     const openButton = document.createElement('button');
  17.     const themeChooser = document.createElement('select');
  18.  
  19.     // Set up the GUI overlay (initially hidden)
  20.     guiOverlay.style.position = 'fixed';
  21.     guiOverlay.style.top = '50px';
  22.     guiOverlay.style.right = '50px';
  23.     guiOverlay.style.padding = '20px';
  24.     guiOverlay.style.backgroundColor = '#f8f8f8';
  25.     guiOverlay.style.border = '2px solid #333';
  26.     guiOverlay.style.borderRadius = '10px';
  27.     guiOverlay.style.zIndex = '9999';
  28.     guiOverlay.style.display = 'none';
  29.     guiOverlay.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.1)';
  30.     guiOverlay.style.cursor = 'move';
  31.     guiOverlay.innerHTML = `
  32.         <div style="text-align: right;"><button id="closeGui" style="background: #e74c3c; color: white; border: none; border-radius: 50%; width: 30px; height: 30px; cursor: pointer;">X</button></div>
  33.         <h3 style="font-family: Arial, sans-serif; margin-top: 0;">Custom Scratch Blocks</h3>
  34.         <label for="blockColor" style="font-family: Arial, sans-serif;">Choose Block Color:</label>
  35.         <input type="color" id="blockColor" name="blockColor" value="#ff0000" style="margin-bottom: 10px;">
  36.         <br>
  37.         <button id="applyChanges" style="font-family: Arial, sans-serif; padding: 5px 10px; background-color: #3498db; color: white; border: none; border-radius: 5px; cursor: pointer;">Apply Changes</button>
  38.         <br><br>
  39.         <label for="themeChooser" style="font-family: Arial, sans-serif;">Choose Theme:</label>
  40.         <select id="themeChooser" style="font-family: Arial, sans-serif; padding: 5px; margin-top: 5px;">
  41.             <option value="default">Default</option>
  42.             <option value="cupcake">Cupcake Theme</option>
  43.             <option value="dark">Dark Theme</option>
  44.             <option value="moon">Moon Theme</option>
  45.             <option value="sun">Sun Theme</option>
  46.         </select>
  47.     `;
  48.  
  49.     // Set up the open button
  50.     openButton.textContent = 'Open Customizer';
  51.     openButton.style.position = 'fixed';
  52.     openButton.style.bottom = '20px';
  53.     openButton.style.right = '20px';
  54.     openButton.style.padding = '10px 20px';
  55.     openButton.style.backgroundColor = '#3498db';
  56.     openButton.style.color = 'white';
  57.     openButton.style.border = 'none';
  58.     openButton.style.borderRadius = '10px';
  59.     openButton.style.cursor = 'pointer';
  60.     openButton.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.1)';
  61.     openButton.style.fontFamily = 'Arial, sans-serif';
  62.  
  63.     document.body.appendChild(guiOverlay);
  64.     document.body.appendChild(openButton);
  65.  
  66.     // Make the GUI draggable
  67.     let isDragging = false;
  68.     let offsetX, offsetY;
  69.  
  70.     guiOverlay.addEventListener('mousedown', function(e) {
  71.         isDragging = true;
  72.         offsetX = e.clientX - guiOverlay.getBoundingClientRect().left;
  73.         offsetY = e.clientY - guiOverlay.getBoundingClientRect().top;
  74.     });
  75.  
  76.     document.addEventListener('mousemove', function(e) {
  77.         if (isDragging) {
  78.             guiOverlay.style.left = (e.clientX - offsetX) + 'px';
  79.             guiOverlay.style.top = (e.clientY - offsetY) + 'px';
  80.         }
  81.     });
  82.  
  83.     document.addEventListener('mouseup', function() {
  84.         isDragging = false;
  85.     });
  86.  
  87.     // Toggle GUI visibility
  88.     document.getElementById('closeGui').addEventListener('click', function() {
  89.         guiOverlay.style.display = 'none';
  90.         openButton.style.display = 'block';
  91.     });
  92.  
  93.     openButton.addEventListener('click', function() {
  94.         guiOverlay.style.display = 'block';
  95.         openButton.style.display = 'none';
  96.     });
  97.  
  98.     // Function to change block colors
  99.     function changeBlockColors(color) {
  100.         const blocks = document.querySelectorAll('.blocklyBlockBackground');
  101.         blocks.forEach(block => {
  102.             block.setAttribute('fill', color);
  103.         });
  104.     }
  105.  
  106.     // Apply changes when button is clicked
  107.     document.getElementById('applyChanges').addEventListener('click', function() {
  108.         const selectedColor = document.getElementById('blockColor').value;
  109.         changeBlockColors(selectedColor);
  110.     });
  111.  
  112.     // Theme chooser functionality
  113.     document.getElementById('themeChooser').addEventListener('change', function() {
  114.         const selectedTheme = this.value;
  115.         applyTheme(selectedTheme);
  116.     });
  117.  
  118.     // Function to apply themes
  119.     function applyTheme(theme) {
  120.         switch (theme) {
  121.             case 'cupcake':
  122.                 document.body.style.backgroundColor = '#fbd7e1';
  123.                 break;
  124.             case 'dark':
  125.                 document.body.style.backgroundColor = '#2c3e50';
  126.                 document.body.style.color = '#ecf0f1';
  127.                 break;
  128.             case 'moon':
  129.                 document.body.style.backgroundColor = '#3a3d5a';
  130.                 document.body.style.color = '#f0e5d8';
  131.                 break;
  132.             case 'sun':
  133.                 document.body.style.backgroundColor = '#f1c40f';
  134.                 document.body.style.color = '#2c3e50';
  135.                 break;
  136.             default:
  137.                 document.body.style.backgroundColor = '';
  138.                 document.body.style.color = '';
  139.                 break;
  140.         }
  141.     }
  142.  
  143. })();