☰

Perplexity Chat + Code Color Control

Verander zowel chattekstkleur als kleur van codeblokken op Perplexity.ai

// ==UserScript==
// @name         Perplexity Chat + Code Color Control
// @namespace    https://greasyfork.org/users/yourname
// @version      7.0
// @description  Verander zowel chattekstkleur als kleur van codeblokken op Perplexity.ai
// @match        https://www.perplexity.ai/*
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    // Beschikbare normale HTML-kleuren
    const colorList = [
        "black", "gray", "dimgray", "silver", "white",
        "red", "firebrick", "crimson", "tomato", "salmon",
        "orange", "coral", "darkorange", "gold", "goldenrod",
        "yellow", "khaki", "ivory", "beige", "lemonchiffon",
        "green", "lime", "forestgreen", "seagreen", "olive",
        "teal", "aqua", "turquoise", "lightseagreen", "mediumaquamarine",
        "blue", "dodgerblue", "royalblue", "skyblue", "deepskyblue",
        "navy", "indigo", "purple", "violet", "deeppink",
        "plum", "orchid", "magenta", "brown", "sienna",
        "tan", "chocolate", "peru", "burlywood", "rosybrown"
    ];

    // Functie om chat + codekleur te veranderen
    function applyAllTextColor(color) {
        GM_addStyle(`
            /* AI chat-tekst */
            .prose, .text-base, .text-sm, .leading-relaxed, 
            [data-testid*="message"], [class*="flex items-start"] p {
                color: ${color} !important;
                text-shadow: none !important;
                transition: color 0.3s ease;
            }

            /* Codeblokken en binnenin code-tags */
            pre, code, .code, .highlight, .hljs, span[class*="token"] {
                color: ${color} !important;
                text-shadow: none !important;
                background: rgba(25,25,25,0.7) !important;
                border-radius: 6px;
                padding: 3px 6px;
                transition: color 0.3s ease, background 0.3s ease;
            }
        `);
        localStorage.setItem('chatCodeColor', color);
    }

    // Herstel vorige kleur
    const saved = localStorage.getItem('chatCodeColor');
    if (saved) applyAllTextColor(saved);

    // Hoofdknop (🎨)
    const toggleBtn = document.createElement('button');
    toggleBtn.textContent = "🎨";
    Object.assign(toggleBtn.style, {
        position: 'fixed',
        bottom: '18px',
        right: '18px',
        width: '38px',
        height: '38px',
        borderRadius: '50%',
        background: 'rgba(35,35,35,0.85)',
        color: '#fff',
        cursor: 'pointer',
        border: '1px solid #666',
        boxShadow: '0 2px 8px rgba(0,0,0,0.5)',
        fontSize: '18px',
        zIndex: '9999',
        transition: 'transform 0.25s ease'
    });
    toggleBtn.onmouseover = () => toggleBtn.style.transform = 'scale(1.15)';
    toggleBtn.onmouseout  = () => toggleBtn.style.transform = 'scale(1)';
    document.body.appendChild(toggleBtn);

    // Paneel met kleuropties
    const panel = document.createElement('div');
    Object.assign(panel.style, {
        position: 'fixed',
        bottom: '65px',
        right: '20px',
        background: 'rgba(20,20,20,0.9)',
        padding: '6px',
        borderRadius: '8px',
        display: 'none',
        flexWrap: 'wrap',
        gap: '5px',
        width: '180px',
        maxHeight: '220px',
        overflowY: 'auto',
        boxShadow: '0 0 10px rgba(0,0,0,0.6)',
        border: '1px solid #555',
        zIndex: '9999'
    });

    // Voeg knoppen toe
    colorList.forEach(color => {
        const btn = document.createElement('button');
        Object.assign(btn.style, {
            background: color,
            width: '22px',
            height: '22px',
            borderRadius: '4px',
            border: '1px solid #222',
            cursor: 'pointer',
            transition: 'transform 0.2s ease'
        });
        btn.title = color;
        btn.onmouseover = () => btn.style.transform = 'scale(1.25)';
        btn.onmouseout  = () => btn.style.transform = 'scale(1)';
        btn.onclick = () => {
            applyAllTextColor(color);
            panel.style.display = 'none';
        };
        panel.appendChild(btn);
    });
    document.body.appendChild(panel);

    // Toon/verberg het paneel
    toggleBtn.onclick = () => {
        panel.style.display = panel.style.display === 'none' ? 'flex' : 'none';
    };

    // Observeer structuurwijzigingen (bij dynamische chatupdates)
    const observer = new MutationObserver(() => {
        const color = localStorage.getItem('chatCodeColor');
        if (color) applyAllTextColor(color);
    });
    observer.observe(document.body, { childList: true, subtree: true });
})();