☰

Website UI Switcher

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

As of 2024-09-09. See the latest version.

  1. // ==UserScript==
  2. // @name         Website UI Switcher
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.0
  5. // @description  Switch UI styles (modern/eras) 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" or "classical"
  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 {
  44.         GM_addStyle(`
  45.             /* Classical Styles with Square Corners */
  46.             * {
  47.                 border-radius: 0px !important;
  48.                 box-shadow: none !important;
  49.                 transition: none;
  50.             }
  51.             
  52.             /* Classical Font */
  53.             body, button, input {
  54.                 font-family: 'Times New Roman', serif !important;
  55.             }
  56.         `);
  57.     }
  58. }
  59.  
  60. // Save settings
  61. function saveSettings() {
  62.     localStorage.setItem("uiSwitcherSettings", JSON.stringify(settings));
  63.     applyStyles();
  64. }
  65.  
  66. // Settings page UI
  67. function createSettingsPage() {
  68.     const settingsContainer = document.createElement("div");
  69.     settingsContainer.id = "uiSwitcherSettingsContainer";
  70.     settingsContainer.style.position = "fixed";
  71.     settingsContainer.style.top = "10%";
  72.     settingsContainer.style.left = "50%";
  73.     settingsContainer.style.transform = "translateX(-50%)";
  74.     settingsContainer.style.backgroundColor = "#fff";
  75.     settingsContainer.style.padding = "20px";
  76.     settingsContainer.style.boxShadow = "0px 0px 10px rgba(0, 0, 0, 0.2)";
  77.     settingsContainer.style.zIndex = "9999";
  78.  
  79.     settingsContainer.innerHTML = `
  80.         <h2>UI Switcher Settings</h2>
  81.         <label>
  82.             Style:
  83.             <select id="uiStyleSelector">
  84.                 <option value="modern" ${settings.style === 'modern' ? 'selected' : ''}>Modern</option>
  85.                 <option value="classical" ${settings.style === 'classical' ? 'selected' : ''}>Classical</option>
  86.             </select>
  87.         </label><br><br>
  88.         <label>
  89.             Rounded Corners:
  90.             <input type="checkbox" id="roundedCornersCheckbox" ${settings.roundedCorners ? 'checked' : ''}>
  91.         </label><br><br>
  92.         <button id="saveSettingsButton">Save</button>
  93.         <button id="closeSettingsButton">Close</button>
  94.     `;
  95.  
  96.     document.body.appendChild(settingsContainer);
  97.  
  98.     // Add event listeners for controls
  99.     document.getElementById("saveSettingsButton").addEventListener("click", () => {
  100.         settings.style = document.getElementById("uiStyleSelector").value;
  101.         settings.roundedCorners = document.getElementById("roundedCornersCheckbox").checked;
  102.         saveSettings();
  103.         alert("Settings saved!");
  104.     });
  105.  
  106.     document.getElementById("closeSettingsButton").addEventListener("click", () => {
  107.         settingsContainer.remove();
  108.     });
  109. }
  110.  
  111. // Register menu command to open settings page
  112. GM_registerMenuCommand("UI Switcher Settings", createSettingsPage);
  113.  
  114. // Apply styles on page load
  115. applyStyles();