☰

Telegram Web Colors

Adds an aesthetic color palette to Telegram Web.

目前為 2024-08-18 提交的版本，檢視 最新版本。

  1. // ==UserScript==
  2. // @name         Telegram Web Colors
  3. // @namespace    http://tampermonkey.net/
  4. // @version      3.25
  5. // @description  Adds an aesthetic color palette to Telegram Web.
  6. // @author       Emithby
  7. // @match        https://web.telegram.org/*
  8. // @match        https://web.telegram.org/a/*
  9. // @grant        none
  10. // @run-at       document-end
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.  
  16.     // Retrieve the saved state from localStorage
  17.     let isOpen = localStorage.getItem('paletteOpen') === 'true';
  18.  
  19.     function addColorPalette() {
  20.         const paletteContainer = document.createElement('div');
  21.         paletteContainer.id = 'colorPaletteContainer';
  22.         paletteContainer.style.position = 'fixed';
  23.         paletteContainer.style.bottom = '20px';
  24.         paletteContainer.style.right = '20px';
  25.         paletteContainer.style.padding = '15px';
  26.         paletteContainer.style.backgroundColor = '#ffffff';
  27.         paletteContainer.style.borderRadius = '10px';
  28.         paletteContainer.style.boxShadow = '0 4px 8px rgba(0,0,0,0.3)';
  29.         paletteContainer.style.zIndex = '9999';
  30.         paletteContainer.style.width = '250px';
  31.         paletteContainer.style.display = 'flex';
  32.         paletteContainer.style.flexDirection = 'column';
  33.         paletteContainer.style.alignItems = 'center';
  34.         paletteContainer.style.border = '4px solid #000'; // Increased border thickness
  35.         paletteContainer.style.fontFamily = 'Arial, sans-serif';
  36.         paletteContainer.style.fontSize = '14px';
  37.         paletteContainer.style.transition = 'all 0.3s ease';
  38.         paletteContainer.style.overflow = 'hidden';
  39.         // Adjust initial position based on the saved state
  40.         paletteContainer.style.transform = isOpen ? 'translateY(0)' : 'translateY(100%)';
  41.  
  42.         const title = document.createElement('h4');
  43.         title.textContent = 'Select Theme Color';
  44.         title.style.margin = '0 0 10px 0';
  45.         title.style.fontWeight = 'bold';
  46.         title.style.fontSize = '18px';
  47.         title.style.color = '#333';
  48.         title.style.transition = 'color 0.3s';
  49.         paletteContainer.appendChild(title);
  50.  
  51.         const colors = [
  52.             '#FF5733', '#33FF57', '#3357FF', '#F3FF33', '#FF33A8',
  53.             '#33FFF5', '#FF6F33', '#9B59B6', '#FFC300', '#C70039',
  54.             '#581845', '#FF9F00', '#2ECC71'
  55.         ];
  56.  
  57.         const buttonContainer = document.createElement('div');
  58.         buttonContainer.style.display = 'flex';
  59.         buttonContainer.style.flexWrap = 'wrap';
  60.         buttonContainer.style.marginBottom = '10px';
  61.         buttonContainer.style.justifyContent = 'center';
  62.  
  63.         colors.forEach(color => {
  64.             const colorButton = document.createElement('button');
  65.             colorButton.style.backgroundColor = color;
  66.             colorButton.style.width = '40px';
  67.             colorButton.style.height = '40px';
  68.             colorButton.style.border = '2px solid #000';
  69.             colorButton.style.margin = '4px';
  70.             colorButton.style.cursor = 'pointer';
  71.             colorButton.style.borderRadius = '50%';
  72.             colorButton.style.boxShadow = '0 2px 4px rgba(0,0,0,0.2)';
  73.             colorButton.title = color;
  74.             colorButton.addEventListener('click', () => applyThemeColor(color));
  75.             buttonContainer.appendChild(colorButton);
  76.         });
  77.  
  78.         paletteContainer.appendChild(buttonContainer);
  79.  
  80.         const customColorContainer = document.createElement('div');
  81.         customColorContainer.style.display = 'flex';
  82.         customColorContainer.style.flexDirection = 'column';
  83.         customColorContainer.style.alignItems = 'center';
  84.  
  85.         const customColorTitle = document.createElement('span');
  86.         customColorTitle.textContent = 'Custom Color';
  87.         customColorTitle.style.marginBottom = '5px';
  88.         customColorTitle.style.fontSize = '14px';
  89.         customColorTitle.style.fontWeight = 'bold';
  90.         customColorTitle.style.color = '#333';
  91.  
  92.         const customColorInputContainer = document.createElement('div');
  93.         customColorInputContainer.style.position = 'relative';
  94.         customColorInputContainer.style.display = 'flex';
  95.         customColorInputContainer.style.alignItems = 'center';
  96.  
  97.         const customColorInput = document.createElement('input');
  98.         customColorInput.type = 'color';
  99.         customColorInput.style.position = 'absolute';
  100.         customColorInput.style.top = '0';
  101.         customColorInput.style.left = '0';
  102.         customColorInput.style.opacity = '0';
  103.         customColorInput.style.cursor = 'pointer';
  104.         customColorInput.addEventListener('input', (e) => {
  105.             applyThemeColor(e.target.value);
  106.         });
  107.  
  108.         const customColorCircle = document.createElement('div');
  109.         customColorCircle.style.width = '40px';
  110.         customColorCircle.style.height = '40px';
  111.         customColorCircle.style.borderRadius = '50%';
  112.         customColorCircle.style.background = 'linear-gradient(135deg, red, orange, yellow, green, blue, indigo, violet)';
  113.         customColorCircle.style.margin = '4px';
  114.         customColorCircle.style.cursor = 'pointer';
  115.         customColorCircle.style.border = '2px solid #000';
  116.         customColorCircle.style.boxShadow = '0 2px 4px rgba(0,0,0,0.2)';
  117.         customColorCircle.title = 'Click to choose a color';
  118.         customColorCircle.addEventListener('click', () => {
  119.             customColorInput.click(); // Trigger click on the input to open the color picker
  120.         });
  121.  
  122.         customColorInputContainer.appendChild(customColorCircle);
  123.         customColorInputContainer.appendChild(customColorInput);
  124.         customColorContainer.appendChild(customColorTitle);
  125.         customColorContainer.appendChild(customColorInputContainer);
  126.  
  127.         paletteContainer.appendChild(customColorContainer);
  128.  
  129.         const controlsContainer = document.createElement('div');
  130.         controlsContainer.style.position = 'absolute';
  131.         controlsContainer.style.top = '5px';
  132.         controlsContainer.style.right = '5px';
  133.         controlsContainer.style.display = 'flex';
  134.         controlsContainer.style.flexDirection = 'column';
  135.  
  136.         const closeButton = document.createElement('button');
  137.         closeButton.innerHTML = '✖';
  138.         closeButton.style.border = 'none';
  139.         closeButton.style.backgroundColor = '#ff0000';
  140.         closeButton.style.color = '#fff';
  141.         closeButton.style.borderRadius = '50%';
  142.         closeButton.style.width = '24px';
  143.         closeButton.style.height = '24px';
  144.         closeButton.style.cursor = 'pointer';
  145.         closeButton.style.marginBottom = '5px';
  146.         closeButton.style.fontSize = '14px';
  147.         closeButton.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';
  148.         closeButton.addEventListener('click', () => {
  149.             isOpen = !isOpen;
  150.             localStorage.setItem('paletteOpen', isOpen); // Save the current state
  151.             paletteContainer.style.transform = isOpen ? 'translateY(0)' : 'translateY(100%)'; // Control visibility
  152.         });
  153.  
  154.         controlsContainer.appendChild(closeButton);
  155.  
  156.         paletteContainer.appendChild(controlsContainer);
  157.  
  158.         document.body.appendChild(paletteContainer);
  159.  
  160.         function adjustColors() {
  161.             const isDarkMode = window.getComputedStyle(document.body).getPropertyValue('--theme-background-color').includes('rgb(0, 0, 0)');
  162.             title.style.color = isDarkMode ? '#ddd' : '#333';
  163.             paletteContainer.style.borderColor = isDarkMode ? '#444' : '#000';
  164.         }
  165.  
  166.         const savedColor = localStorage.getItem('themeColor');
  167.         if (savedColor) {
  168.             applyThemeColor(savedColor);
  169.         }
  170.  
  171.         const observer = new MutationObserver(adjustColors);
  172.         observer.observe(document.body, { attributes: true, attributeFilter: ['style'] });
  173.  
  174.         adjustColors();
  175.     }
  176.  
  177.     function applyThemeColor(color) {
  178.         const style = document.createElement('style');
  179.         style.innerHTML = `
  180.             :root {
  181.                 --primary-color: ${color};
  182.                 --secondary-color: ${color};
  183.                 --accent-color: ${color};
  184.             }
  185.         `;
  186.         document.head.appendChild(style);
  187.  
  188.         localStorage.setItem('themeColor', color);
  189.     }
  190.  
  191.     window.addEventListener('load', addColorPalette);
  192. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

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

加入Q群

QingJ © 2025

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