Telegram Web Colors

Adds an aesthetic color palette to Telegram Web.
目前为 2024-08-18 提交的版本。查看最新版本。
Wrap lines
// ==UserScript==
// @name         Telegram Web Colors
// @namespace    http://tampermonkey.net/
// @version      1.15
// @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';

    let isOpen = 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 = '2px solid #000';
        paletteContainer.style.fontFamily = 'Arial, sans-serif';
        paletteContainer.style.fontSize = '14px';
        paletteContainer.style.transition = 'all 0.3s ease';
        paletteContainer.style.overflow = 'hidden';
        paletteContainer.style.transform = 'translateY(0)';

        const title = document.createElement('h4');
        title.textContent = 'Select Theme Color';
        title.style.margin = '0 0 10px 0';
        title.style.fontWeight = 'bold';
        title.style.fontSize = '18px';
        title.style.color = '#333';
        title.style.transition = 'color 0.3s';
        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 = '14px';
        customColorTitle.style.fontWeight = 'bold';
        customColorTitle.style.color = '#333';

        const customColorInput = document.createElement('input');
        customColorInput.type = 'color';
        customColorInput.style.border = '2px solid #000';
        customColorInput.style.cursor = 'pointer';
        customColorInput.addEventListener('input', (e) => {
            applyThemeColor(e.target.value);
        });

        customColorContainer.appendChild(customColorTitle);
        customColorContainer.appendChild(customColorInput);
        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 closeButton = document.createElement('button');
        closeButton.innerHTML = '✖';
        closeButton.style.border = 'none';
        closeButton.style.backgroundColor = '#ff0000';
        closeButton.style.color = '#fff';
        closeButton.style.borderRadius = '50%';
        closeButton.style.width = '24px';
        closeButton.style.height = '24px';
        closeButton.style.cursor = 'pointer';
        closeButton.style.marginBottom = '5px';
        closeButton.style.fontSize = '14px';
        closeButton.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';
        closeButton.addEventListener('click', () => {
            if (isOpen) {
                paletteContainer.style.transform = 'translateY(100%)';
                isOpen = false;
            } else {
                paletteContainer.style.transform = 'translateY(0)';
                isOpen = true;
            }
        });

        controlsContainer.appendChild(closeButton);

        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镜像
