Telegram Web Colors

Adds an aesthetic color palette to Telegram Web.
换行
// ==UserScript==
// @name         Telegram Web Colors
// @namespace    http://tampermonkey.net/
// @version      3.28
// @description  Adds an aesthetic color palette to Telegram Web.
// @author       Emithby
// @match        https://web.telegram.org/*
// @match        https://web.telegram.org/a/*
// @grant        none
// @run-at       document-end
// ==/UserScript==

(function() {
    'use strict';

    // Retrieve the saved state from localStorage
    let isOpen = localStorage.getItem('paletteOpen') === 'true';

    function addColorPalette() {
        const paletteContainer = document.createElement('div');
        paletteContainer.id = 'colorPaletteContainer';
        paletteContainer.style.position = 'fixed';
        paletteContainer.style.bottom = '20px';
        paletteContainer.style.right = '20px';
        paletteContainer.style.padding = '15px';
        paletteContainer.style.backgroundColor = '#ffffff';
        paletteContainer.style.borderRadius = '10px';
        paletteContainer.style.boxShadow = '0 4px 8px rgba(0,0,0,0.3)';
        paletteContainer.style.zIndex = '9999';
        paletteContainer.style.width = '250px';
        paletteContainer.style.display = 'flex';
        paletteContainer.style.flexDirection = 'column';
        paletteContainer.style.alignItems = 'center';
        paletteContainer.style.border = '4px solid #000';
        paletteContainer.style.fontFamily = 'Arial, sans-serif';
        paletteContainer.style.fontSize = '14px';
        paletteContainer.style.transition = 'transform 0.4s ease-in-out';
        paletteContainer.style.overflow = 'hidden';
        paletteContainer.style.transform = isOpen ? 'translateY(0)' : 'translateY(100%)';

        const title = document.createElement('h4');
        title.textContent = 'Select Theme Color';
        title.style.margin = '0 0 10px 0';
        title.style.fontWeight = 'bold';
        title.style.fontSize = '22px'; // Increased font size
        title.style.color = '#FF5733'; // Bright color for the title
        title.style.textShadow = '1px 1px 2px rgba(0,0,0,0.4)'; // Text shadow for better visibility
        title.style.transition = 'color 0.3s, text-shadow 0.3s'; // Smooth transitions
        paletteContainer.appendChild(title);

        const colors = [
            '#FF5733', '#33FF57', '#3357FF', '#F3FF33', '#FF33A8',
            '#33FFF5', '#FF6F33', '#9B59B6', '#FFC300', '#C70039',
            '#581845', '#FF9F00', '#2ECC71'
        ];

        const buttonContainer = document.createElement('div');
        buttonContainer.style.display = 'flex';
        buttonContainer.style.flexWrap = 'wrap';
        buttonContainer.style.marginBottom = '10px';
        buttonContainer.style.justifyContent = 'center';

        colors.forEach(color => {
            const colorButton = document.createElement('button');
            colorButton.style.backgroundColor = color;
            colorButton.style.width = '40px';
            colorButton.style.height = '40px';
            colorButton.style.border = '2px solid #000';
            colorButton.style.margin = '4px';
            colorButton.style.cursor = 'pointer';
            colorButton.style.borderRadius = '50%';
            colorButton.style.boxShadow = '0 2px 4px rgba(0,0,0,0.2)';
            colorButton.title = color;
            colorButton.addEventListener('click', () => applyThemeColor(color));
            buttonContainer.appendChild(colorButton);
        });

        paletteContainer.appendChild(buttonContainer);

        const customColorContainer = document.createElement('div');
        customColorContainer.style.display = 'flex';
        customColorContainer.style.flexDirection = 'column';
        customColorContainer.style.alignItems = 'center';

        const customColorTitle = document.createElement('span');
        customColorTitle.textContent = 'Custom Color';
        customColorTitle.style.marginBottom = '5px';
        customColorTitle.style.fontSize = '16px'; // Increased font size
        customColorTitle.style.fontWeight = 'bold';
        customColorTitle.style.color = '#FF5733'; // Bright color for custom color title
        customColorTitle.style.textShadow = '1px 1px 2px rgba(0,0,0,0.4)'; // Text shadow for better visibility

        const customColorInputContainer = document.createElement('div');
        customColorInputContainer.style.position = 'relative';
        customColorInputContainer.style.display = 'flex';
        customColorInputContainer.style.alignItems = 'center';

        const customColorInput = document.createElement('input');
        customColorInput.type = 'color';
        customColorInput.style.position = 'absolute';
        customColorInput.style.top = '0';
        customColorInput.style.left = '0';
        customColorInput.style.opacity = '0';
        customColorInput.style.cursor = 'pointer';
        customColorInput.addEventListener('input', (e) => {
            applyThemeColor(e.target.value);
        });

        const customColorCircle = document.createElement('div');
        customColorCircle.style.width = '40px';
        customColorCircle.style.height = '40px';
        customColorCircle.style.borderRadius = '50%';
        customColorCircle.style.background = 'linear-gradient(135deg, red, orange, yellow, green, blue, indigo, violet)';
        customColorCircle.style.margin = '4px';
        customColorCircle.style.cursor = 'pointer';
        customColorCircle.style.border = '2px solid #000';
        customColorCircle.style.boxShadow = '0 2px 4px rgba(0,0,0,0.2)';
        customColorCircle.style.display = 'flex';
        customColorCircle.style.alignItems = 'center';
        customColorCircle.style.justifyContent = 'center';
        customColorCircle.style.fontSize = '20px';
        customColorCircle.style.color = '#fff';
        customColorCircle.style.backgroundColor = '#FFCC00'; // Custom color for visibility
        customColorCircle.title = 'Click to choose a color';
        customColorCircle.addEventListener('click', () => {
            customColorInput.click();
        });
        customColorCircle.textContent = '🎨'; // Emoji in the center

        customColorInputContainer.appendChild(customColorCircle);
        customColorInputContainer.appendChild(customColorInput);
        customColorContainer.appendChild(customColorTitle);
        customColorContainer.appendChild(customColorInputContainer);

        paletteContainer.appendChild(customColorContainer);

        const controlsContainer = document.createElement('div');
        controlsContainer.style.position = 'absolute';
        controlsContainer.style.top = '5px';
        controlsContainer.style.right = '5px';
        controlsContainer.style.display = 'flex';
        controlsContainer.style.flexDirection = 'column';

        const toggleButton = document.createElement('button');
        toggleButton.innerHTML = isOpen ? '▼' : '▲'; // Down arrow when open, up arrow when closed
        toggleButton.style.border = 'none';
        toggleButton.style.backgroundColor = '#007BFF';
        toggleButton.style.color = '#fff';
        toggleButton.style.borderRadius = '50%';
        toggleButton.style.width = '24px';
        toggleButton.style.height = '24px';
        toggleButton.style.cursor = 'pointer';
        toggleButton.style.fontSize = '16px';
        toggleButton.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';
        toggleButton.style.transition = 'transform 0.4s ease-in-out';
        toggleButton.addEventListener('click', () => {
            isOpen = !isOpen;
            localStorage.setItem('paletteOpen', isOpen);
            paletteContainer.style.transform = isOpen ? 'translateY(0)' : 'translateY(100%)';
            toggleButton.innerHTML = isOpen ? '▼' : '▲';
        });

        controlsContainer.appendChild(toggleButton);

        paletteContainer.appendChild(controlsContainer);

        document.body.appendChild(paletteContainer);

        function adjustColors() {
            const isDarkMode = window.getComputedStyle(document.body).getPropertyValue('--theme-background-color').includes('rgb(0, 0, 0)');
            title.style.color = isDarkMode ? '#ddd' : '#333';
            paletteContainer.style.borderColor = isDarkMode ? '#444' : '#000';
        }

        const savedColor = localStorage.getItem('themeColor');
        if (savedColor) {
            applyThemeColor(savedColor);
        }

        const observer = new MutationObserver(adjustColors);
        observer.observe(document.body, { attributes: true, attributeFilter: ['style'] });

        adjustColors();
    }

    function applyThemeColor(color) {
        const style = document.createElement('style');
        style.innerHTML = `
            :root {
                --primary-color: ${color};
                --secondary-color: ${color};
                --accent-color: ${color};
            }
        `;
        document.head.appendChild(style);

        localStorage.setItem('themeColor', color);
    }

    window.addEventListener('load', addColorPalette);
})();
欢迎访问Greasy Fork镜像
