☰

youtube

Adds theme and gem color switching with modern UI enhancements.

// ==UserScript==
// @name         youtube
// @namespace    http://tampermonkey.net/
// @version      1.22
// @description  Adds theme and gem color switching with modern UI enhancements.
// @match        youtube.com
// @license      You cannot use this, only use this for education 
// @grant        GM_addStyle
// ==/UserScript==

(function() {
  'use strict';
//BERGER


  const themes = [
    { name: "Sky", glow: "#00bfff", bg: "rgba(0, 191, 255, 0.25)", text: "#e0f7ff" },
    { name: "Ocean", glow: "#1e90ff", bg: "rgba(30, 144, 255, 0.25)", text: "#d6f0ff" },
    { name: "Cyan", glow: "#00ffff", bg: "rgba(0, 255, 255, 0.25)", text: "#e0ffff" },
    { name: "Azure", glow: "#007fff", bg: "rgba(0, 127, 255, 0.25)", text: "#e0f0ff" },
    { name: "Aqua", glow: "#7fdbff", bg: "rgba(127, 219, 255, 0.25)", text: "#e0f9ff" },
    { name: "Gold", glow: "#ffd700", bg: "rgba(255, 215, 0, 0.25)", text: "#fff9e0" },
    { name: "Ivory", glow: "#fffff0", bg: "rgba(255, 255, 240, 0.25)", text: "#000" },
    { name: "Mint", glow: "#3eb489", bg: "rgba(62, 180, 137, 0.25)", text: "#e0ffe5" },
    { name: "Forest", glow: "#228b22", bg: "rgba(34, 139, 34, 0.25)", text: "#e0ffe0" },
    { name: "Lime", glow: "#32cd32", bg: "rgba(50, 205, 50, 0.25)", text: "#f0ffe0" },
    { name: "Teal", glow: "#008080", bg: "rgba(0, 128, 128, 0.25)", text: "#e0ffff" },
    { name: "Emerald", glow: "#50c878", bg: "rgba(80, 200, 120, 0.25)", text: "#e0fff0" },
    { name: "Charcoal", glow: "#36454f", bg: "rgba(54, 69, 79, 0.25)", text: "#f0f0f0" },
    { name: "Slate", glow: "#708090", bg: "rgba(112, 128, 144, 0.25)", text: "#f0f0f0" },
    { name: "Copper", glow: "#b87333", bg: "rgba(184, 115, 51, 0.25)", text: "#fff0e0" },
    { name: "Rose Gold", glow: "#b76e79", bg: "rgba(183, 110, 121, 0.25)", text: "#fce8e0" },
    { name: "Walnut", glow: "#8b5a2b", bg: "rgba(139, 90, 43, 0.25)", text: "#f0e0d6" },
    { name: "Chocolate", glow: "#d2691e", bg: "rgba(210, 105, 30, 0.25)", text: "#fff0e0" },
    { name: "Chestnut", glow: "#954535", bg: "rgba(149, 69, 53, 0.25)", text: "#f5e0d0" },
    { name: "Saddle", glow: "#8b4513", bg: "rgba(139, 69, 19, 0.25)", text: "#f5e6d6" },
    { name: "Coffee", glow: "#4b3621", bg: "rgba(75, 54, 33, 0.25)", text: "#f5f0e0" }
  ];


  const coffeeButton = document.createElement('div');
  coffeeButton.classList.add('sbg-btn');
  coffeeButton.innerHTML = '<i style="font-size: 24px;">☕️</i>';
  coffeeButton.style.cursor = 'pointer';
  coffeeButton.addEventListener('click', () => alert('☕️ Coffee button clicked!'));

  const infoElement = document.querySelector('.sbg.sbg-info');
  const gearsElement = document.querySelector('.sbg.sbg-gears');
  if (infoElement && gearsElement && infoElement.parentNode === gearsElement.parentNode) {
    gearsElement.insertAdjacentElement('afterend', coffeeButton);
  }

  // === Gem Color Button ===
  const gemColors = [
    { name: 'Default', color: null },
    { name: 'Ruby Red', color: [1.0, 0.2, 0.2] },
    { name: 'Emerald Green', color: [0.2, 1.0, 0.4] },
    { name: 'Sapphire Blue', color: [0.2, 0.6, 1.0] },
    { name: 'Amethyst Purple', color: [0.6, 0.2, 1.0] },
    { name: 'Gold', color: [1.0, 0.85, 0.25] },
    { name: 'Void Black', color: [0.05, 0.05, 0.05] },
    { name: 'Neon Pink', color: [1.0, 0.1, 0.9] }
  ];

  let gemColorIndex = parseInt(localStorage.getItem('sb_gem_color_index') || '0');

  function applyGemColor(index) {
    const colorVec = gemColors[index].color;
    if (!window.sbar || !window.sbar.GemMesh || typeof PIXI === 'undefined') return;

    if (!colorVec) {
      sbar.GemMesh.prototype.initOverride = null;
      return;
    }

    sbar.GemMesh.prototype.initOverride = function () {
      if (!this.material || !this.material.uniforms) return;
      this.material.uniforms.color = { value: new PIXI.Point(...colorVec) };
    };
  }

  const gemBtn = document.createElement('div');
  gemBtn.classList.add('sbg-btn');
  gemBtn.innerHTML = '<i style="font-size: 20px;">💎</i>';
  gemBtn.style.cursor = 'pointer';
  gemBtn.title = `Gem Color: ${gemColors[gemColorIndex].name}`;
  gemBtn.addEventListener('click', () => {
    gemColorIndex = (gemColorIndex + 1) % gemColors.length;
    localStorage.setItem('sb_gem_color_index', gemColorIndex);
    applyGemColor(gemColorIndex);
    gemBtn.title = `Gem Color: ${gemColors[gemColorIndex].name}`;
  });

  if (gearsElement && coffeeButton) {
    coffeeButton.insertAdjacentElement('afterend', gemBtn);
  }

  const shaderInit = setInterval(() => {
    if (window.sbar && sbar.GemMesh && window.PIXI) {
      applyGemColor(gemColorIndex);
      clearInterval(shaderInit);
    }
  }, 500);

  // === Styling ===
  GM_addStyle(`
    .sbg.sbg-info,
    .sbg.sbg-gears,
    .sbg-btn {
      background: none !important;
    }
    .sbg-btn {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      box-shadow: 0 0 15px 3px #00bfff;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      margin-left: 5px;
    }
    .sbg-btn i {
      color: #fff;
    }
  `);

  // === Original theme system ===
  let currentThemeIndex = parseInt(localStorage.getItem('sb_theme_index') || 1);

  function removePlayBtnGlow() {
    const oldStyles = document.querySelectorAll('[id^="sb_glow_fix_"]');
    oldStyles.forEach(el => el.remove());
  }

  function addGlowForSpecialClasses(theme) {
    removePlayBtnGlow();
    const style = document.createElement("style");
    style.id = `sb_glow_fix_${Date.now()}`;
    style.textContent = `
      .playbtn, .noselect, .PLAY, .play,
      [data-translate="Team Mode"],
      [data-translate="Survival Mode"],
      [data-translate="Invasion"],
      [data-translate="Pro Deathmatch"],
      [data-translate="Create custom game"] {
        color: ${theme.glow} !important;
        text-shadow:
          0 0 5px ${theme.glow},
          0 0 10px ${theme.glow},
          0 0 20px ${theme.glow} !important;
        background: transparent !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        backdrop-filter: none !important;
        transition: color 0.3s ease, text-shadow 0.3s ease !important;
      }
    `;
    document.head.appendChild(style);
  }

  function applyTheme(theme) {
    GM_addStyle(`
      @import url('https://fonts.googleapis.com/css2?family=Exo:wght@400;700&display=swap');
      body, :not(i):not([class*="fa-"]):not([class*="icon-"]):not(.material-icons) {
        font-family: 'Exo', sans-serif !important;
      }
      .changelog-new, .textcentered.community, .sbg-info, .sbg-gears, .developer, .header,
      .modalbody, .option, .big, .modal, .inputwrapper, .gmodes, .play, .playbtn, .noselect,
      .optioncontainer, .settings-content, .optioncontainerwrapper {
        background-color: ${theme.bg} !important;
        border-radius: 12px !important;
        box-shadow: 0 0 15px 3px ${theme.glow} !important;
        backdrop-filter: blur(35px) !important;
        color: ${theme.text} !important;
      }
      .changelog-new *, .textcentered.community *, .sbg-info *, .sbg-gears *, .developer *,
      .header *, .modalbody *, .option *, .big *, .modal *, .inputwrapper *, .gmodes *,
      .play *, .optioncontainer *, .settings-content *, .optioncontainerwrapper * {
        background: none !important;
        color: ${theme.text} !important;
      }
      .fa.fa-caret-right, .fa.fa-caret-left, player {
        color: ${theme.glow} !important;
        text-shadow: 0 0 8px ${theme.glow}, 0 0 16px ${theme.glow}, 0 0 24px ${theme.glow} !important;
      }
      .developer, .header, .option, .big, .modal, .inputwrapper, .gmodes, .play,
      .leaderboard, .elitepass, .modding-space {
        background: none !important;
        border: none !important;
        box-shadow: none !important;
        color: ${theme.glow} !important;
        text-shadow: 0 0 10px ${theme.glow}, 0 0 20px ${theme.glow}, 0 0 30px ${theme.glow} !important;
      }
      .developer *, .header *, .option *, .big *, .modal *, .inputwrapper *,
      .gmodes *, .play *, [data-translate="PLAY"] *, .leaderboard *, .elitepass *, .modding-space * {
        background: none !important;
        border: none !important;
        color: ${theme.glow} !important;
        text-shadow: 0 0 10px ${theme.glow}, 0 0 20px ${theme.glow}, 0 0 30px ${theme.glow} !important;
      }
    `);
    addGlowForSpecialClasses(theme);
  }

  applyTheme(themes[currentThemeIndex]);

  const switchBtn = document.createElement('button');
  switchBtn.textContent = `Theme: ${themes[currentThemeIndex].name}`;
  const savedPos = JSON.parse(localStorage.getItem('sb_theme_btn_pos') || '{}');
  Object.assign(switchBtn.style, {
    position: 'fixed',
    left: savedPos.left || '',
    top: savedPos.top || '',
    bottom: savedPos.bottom || '10px',
    right: savedPos.right || '10px',
    zIndex: '9999',
    padding: '8px 14px',
    background: 'rgba(0,0,0,0.4)',
    border: '1px solid #fff',
    borderRadius: '6px',
    color: '#fff',
    cursor: 'move',
    fontSize: '14px',
    backdropFilter: 'blur(5px)',
    boxShadow: '0 0 10px #000'
  });
  document.body.appendChild(switchBtn);

  switchBtn.addEventListener('click', (e) => {
    e.stopPropagation();
    currentThemeIndex = (currentThemeIndex + 1) % themes.length;
    localStorage.setItem('sb_theme_index', currentThemeIndex);
    applyTheme(themes[currentThemeIndex]);
    switchBtn.textContent = `Theme: ${themes[currentThemeIndex].name}`;
  });

  switchBtn.addEventListener('contextmenu', (e) => {
    e.preventDefault();
    currentThemeIndex = (currentThemeIndex - 1 + themes.length) % themes.length;
    localStorage.setItem('sb_theme_index', currentThemeIndex);
    applyTheme(themes[currentThemeIndex]);
    switchBtn.textContent = `Theme: ${themes[currentThemeIndex].name}`;
  });

  let isDragging = false;
  let offsetX, offsetY;
  switchBtn.addEventListener('mousedown', (e) => {
    isDragging = true;
    offsetX = e.clientX - switchBtn.getBoundingClientRect().left;
    offsetY = e.clientY - switchBtn.getBoundingClientRect().top;
  });
  document.addEventListener('mousemove', (e) => {
    if (isDragging) {
      switchBtn.style.left = `${e.clientX - offsetX}px`;
      switchBtn.style.top = `${e.clientY - offsetY}px`;
      switchBtn.style.bottom = 'auto';
      switchBtn.style.right = 'auto';
    }
  });
  document.addEventListener('mouseup', () => {
    if (isDragging) {
      localStorage.setItem('sb_theme_btn_pos', JSON.stringify({
        left: switchBtn.style.left,
        top: switchBtn.style.top,
        right: 'auto',
        bottom: 'auto'
      }));
      isDragging = false;
    }
  });

  document.querySelectorAll('.Training, .training').forEach(el => el.remove());
  document.querySelectorAll('[data-translate-base="music"], .sbg.sbg-facebook, .sbg.sbg-twitter, .sbg.sbg-fw.sbg-fly-mid').forEach(el => el.remove());
  const bottomMenu = document.querySelector('.sbg-discord')?.parentElement;
  document.querySelectorAll('.developer').forEach(btn => bottomMenu?.appendChild(btn));
  document.querySelectorAll('.sbg-container > div:not([data-translate-base="music"])').forEach(el => {
    if (!el.classList.contains('developer') && bottomMenu && !bottomMenu.contains(el)) {
      bottomMenu.appendChild(el);
    }
  });
})();