☰

Greasy Fork is available in English.

Website UI Switcher

Switch UI styles (modern/retro/material) for YouTube, Google, Roblox, Yahoo!, and Amazon.

  1. // ==UserScript==
  2. // @name         Website UI Switcher
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.1
  5. // @description  Switch UI styles (modern/retro/material) for YouTube, Google, Roblox, Yahoo!, and Amazon.
  6. // @author       Your Name
  7. // @match        *://*.youtube.com/*
  8. // @match        *://*.google.com/*
  9. // @match        *://*.roblox.com/*
  10. // @match        *://*.yahoo.com/*
  11. // @match        *://*.amazon.com/*
  12. // @grant        GM_addStyle
  13. // @grant        GM_registerMenuCommand
  14. // ==/UserScript==
  15.  
  16. // Default settings
  17. let settings = {
  18.     style: "modern",  // "modern", "retro", or "material"
  19.     roundedCorners: true,  // true or false
  20. };
  21.  
  22. // Load settings from localStorage
  23. if (localStorage.getItem("uiSwitcherSettings")) {
  24.     settings = JSON.parse(localStorage.getItem("uiSwitcherSettings"));
  25. }
  26.  
  27. // Apply styles based on settings
  28. function applyStyles() {
  29.     if (settings.style === "modern") {
  30.         GM_addStyle(`
  31.             /* General Modern Rounded Styles */
  32.             * {
  33.                 border-radius: ${settings.roundedCorners ? '10px' : '0px'} !important;
  34.                 box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
  35.                 transition: all 0.3s ease;
  36.             }
  37.             
  38.             /* Modern Font */
  39.             body, button, input {
  40.                 font-family: 'Arial', sans-serif !important;
  41.             }
  42.         `);
  43.     } else if (settings.style === "retro") {
  44.         GM_addStyle(`
  45.             /* Retro Styles */
  46.             * {
  47.                 border-radius: ${settings.roundedCorners ? '10px' : '0px'} !important;
  48.                 box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  49.                 background-color: #282c34 !important;
  50.                 color: #61dafb !important;
  51.                 transition: all 0.3s ease;
  52.             }
  53.             
  54.             /* Retro Font */
  55.             body, button, input {
  56.                 font-family: 'Press Start 2P', cursive !important;
  57.             }
  58.         `);
  59.     } else if (settings.style === "material") {
  60.         GM_addStyle(`
  61.             /* Material Design Lite Styles */
  62.             @import url('https://fonts.googleapis.com/icon?family=Material+Icons');
  63.             @import url('https://code.getmdl.io/1.3.0/material.indigo-pink.min.css');
  64.             
  65.             * {
  66.                 border-radius: ${settings.roundedCorners ? '4px' : '0px'} !important;
  67.                 box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2) !important;
  68.                 transition: all 0.3s ease;
  69.             }
  70.  
  71.             body {
  72.                 font-family: 'Roboto', sans-serif !important;
  73.             }
  74.  
  75.             .mdl-button {
  76.                 border-radius: 4px !important;
  77.             }
  78.         `);
  79.     }
  80. }
  81.  
  82. // Save settings
  83. function saveSettings() {
  84.     localStorage.setItem("uiSwitcherSettings", JSON.stringify(settings));
  85.     applyStyles();
  86. }
  87.  
  88. // Settings page UI
  89. function createSettingsPage() {
  90.     const settingsContainer = document.createElement("div");
  91.     settingsContainer.id = "uiSwitcherSettingsContainer";
  92.     settingsContainer.className = "mdl-card mdl-shadow--4dp";
  93.     settingsContainer.style.position = "fixed";
  94.     settingsContainer.style.top = "10%";
  95.     settingsContainer.style.left = "50%";
  96.     settingsContainer.style.transform = "translateX(-50%)";
  97.     settingsContainer.style.zIndex = "9999";
  98.     settingsContainer.style.width = "300px";
  99.  
  100.     settingsContainer.innerHTML = `
  101.         <div class="mdl-card__title mdl-card--expand">
  102.             <h2 class="mdl-card__title-text">UI Switcher Settings</h2>
  103.         </div>
  104.         <div class="mdl-card__supporting-text">
  105.             <label for="uiStyleSelector">
  106.                 Style:
  107.                 <select id="uiStyleSelector" class="mdl-selectfield__select">
  108.                     <option value="modern" ${settings.style === 'modern' ? 'selected' : ''}>Modern</option>
  109.                     <option value="retro" ${settings.style === 'retro' ? 'selected' : ''}>Retro</option>
  110.                     <option value="material" ${settings.style === 'material' ? 'selected' : ''}>Material</option>
  111.                 </select>
  112.             </label><br><br>
  113.             <label for="roundedCornersCheckbox">
  114.                 Rounded Corners:
  115.                 <input type="checkbox" id="roundedCornersCheckbox" ${settings.roundedCorners ? 'checked' : ''}>
  116.             </label><br><br>
  117.         </div>
  118.         <div class="mdl-card__actions mdl-card--border">
  119.             <button id="saveSettingsButton" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
  120.                 Save
  121.             </button>
  122.             <button id="resetSettingsButton" class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent">
  123.                 Reset to Default
  124.             </button>
  125.             <button id="closeSettingsButton" class="mdl-button mdl-js-button mdl-button--raised">
  126.                 Close
  127.             </button>
  128.         </div>
  129.     `;
  130.  
  131.     document.body.appendChild(settingsContainer);
  132.  
  133.     // Initialize MDL components
  134.     componentHandler.upgradeDom();
  135.  
  136.     // Add event listeners for controls
  137.     document.getElementById("saveSettingsButton").addEventListener("click", () => {
  138.         settings.style = document.getElementById("uiStyleSelector").value;
  139.         settings.roundedCorners = document.getElementById("roundedCornersCheckbox").checked;
  140.         saveSettings();
  141.         alert("Settings saved!");
  142.     });
  143.  
  144.     document.getElementById("resetSettingsButton").addEventListener("click", () => {
  145.         localStorage.removeItem("uiSwitcherSettings");
  146.         settings = {
  147.             style: "modern",
  148.             roundedCorners: true
  149.         };
  150.         document.getElementById("uiStyleSelector").value = 'modern';
  151.         document.getElementById("roundedCornersCheckbox").checked = true;
  152.         saveSettings();
  153.         alert("Settings reset to default!");
  154.     });
  155.  
  156.     document.getElementById("closeSettingsButton").addEventListener("click", () => {
  157.         settingsContainer.remove();
  158.     });
  159. }
  160.  
  161. // Register menu command to open settings page
  162. GM_registerMenuCommand("UI Switcher Settings", createSettingsPage);
  163.  
  164. // Apply styles on page load
  165. applyStyles();