Adds an aesthetic color palette to Telegram Web.
Version au
// ==UserScript==
// @name Telegram Web Colors
// @namespace http://tampermonkey.net/
// @version 2.26
// @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 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.title = 'Click to choose a color';
customColorCircle.addEventListener('click', () => {
customColorInput.click(); // Trigger click on the input to open the color picker
});
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 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);
})();