☰

Elethor Chameleon

Change colors on Elethor.com

// ==UserScript==
// @name         Elethor Chameleon
// @namespace    http://tampermonkey.net/
// @version      2.1
// @author       Eugene
// @description  Change colors on Elethor.com
// @match        *://elethor.com/*
// @grant        GM_addStyle
// @license      GPL-3.0-or-later
// ==/UserScript==
/*
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program. If not, see <https://www.gnu.org/licenses/>.
 */
(function() {
    'use strict';

    const defaultBackgroundColor = '#202c3c';
    const defaultActionBarColor = '#39444e';
    const defaultTopBarColor = '#505c6c';
    const defaultTextColor = '#ffffff';
    const defaultWarningTextColor = '#7a3c38';
    const defaultSuccessTextColor = '#52b768';
    let isColorUIOpen = false;

    const DEBUG = true;

    function debug(message) {
        if (DEBUG) {
            console.log(`[Elethor Chameleon] ${message}`);
        }
    }

    function setColors() {
        debug("Setting colors");
        const appElement = document.querySelector('#app[data-v-app]');
        if (appElement) {
            const backgroundColor = localStorage.getItem('backgroundColor') || defaultBackgroundColor;
            appElement.style.backgroundColor = backgroundColor;
            backgroundColorInput.value = backgroundColor;
            debug("Background color set");
        } else {
            debug("App element not found");
        }

        const actionBarElement = document.querySelector('#currentAction');
        if (actionBarElement) {
            const actionBarColor = localStorage.getItem('actionBarColor') || defaultActionBarColor;
            actionBarElement.style.backgroundColor = actionBarColor;
            actionBarColorInput.value = actionBarColor;
            debug("Action bar color set");
        } else {
            debug("Action bar element not found");
        }

        const topBarElement = document.querySelector('nav.navbar');
        if (topBarElement) {
            const topBarColor = localStorage.getItem('topBarColor') || defaultTopBarColor;
            topBarElement.style.backgroundColor = topBarColor;
            topBarColorInput.value = topBarColor;
            debug("Top bar color set (navbar)");
        } else {
            debug("Top bar element (navbar) not found");
        }

        const textColor = localStorage.getItem('textColor') || defaultTextColor;
        document.body.style.color = textColor;
        textColorInput.value = textColor;
        applyTextColorToAll(textColor);
        debug("Text color set");

        const warningTextColor = localStorage.getItem('warningTextColor') || defaultWarningTextColor;
        warningTextColorInput.value = warningTextColor;
        applyWarningTextColor(warningTextColor);
        debug("Warning text color set");

        const successTextColor = localStorage.getItem('successTextColor') || defaultSuccessTextColor;
        successTextColorInput.value = successTextColor;
        applySuccessTextColor(successTextColor);
        debug("Success text color set");
    }

    function saveColorsToLocalStorage() {
        debug("Saving colors to localStorage");
        const backgroundColor = backgroundColorInput.value;
        const actionBarColor = actionBarColorInput.value;
        const topBarColor = topBarColorInput.value;
        const textColor = textColorInput.value;
        const warningTextColor = warningTextColorInput.value;
        const successTextColor = successTextColorInput.value;

        localStorage.setItem('backgroundColor', backgroundColor);
        localStorage.setItem('actionBarColor', actionBarColor);
        localStorage.setItem('topBarColor', topBarColor);
        localStorage.setItem('textColor', textColor);
        localStorage.setItem('warningTextColor', warningTextColor);
        localStorage.setItem('successTextColor', successTextColor);

        debug("Colors saved to localStorage");
    }

    function applyTextColorToAll(color) {
        const elementsToColor = [
            'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'span', 'div', 'a', 'button'
        ];
        elementsToColor.forEach(selector => {
            const elements = document.querySelectorAll(selector);
            elements.forEach(el => {

            if (el.closest('tr th') &&
                el.closest('tr')?.querySelector('th:nth-child(3)')?.textContent.includes('Experience')) {
                return;
            }

                if (!el.className ||
                    ((!el.className.includes('text-destructive') || el.className.includes('text-destructive-foreground')) &&
                     (!el.className.includes('text-success') || el.className.includes('text-success-foreground')))) {
                    el.style.color = color;
                }

                if (el.className && (el.className.includes('text-success-foreground') ||
                                     el.className.includes('text-warning-foreground') ||
                                     el.className.includes('text-destructive-foreground'))) {
                    el.style.color = color;
                }
            });
        });
    }

    function applyWarningTextColor(color) {

        const warningElements = document.querySelectorAll('[class*="text-destructive"]:not([class*="text-destructive-foreground"])');
        warningElements.forEach(el => {
            el.style.color = color;
        });
        debug(`Applied warning color ${color} to ${warningElements.length} text elements`);

        const warningBgElements = document.querySelectorAll('[class*="text-destructive-foreground"], [class*="text-warning-foreground"]');
        warningBgElements.forEach(el => {
            if (el.classList.contains('bg-destructive') || el.classList.contains('bg-warning')) {
                el.style.backgroundColor = color;
            }
        });
        debug(`Applied warning color ${color} as background to ${warningBgElements.length} elements`);
    }

    function applySuccessTextColor(color) {

        const successElements = document.querySelectorAll('[class*="text-success"]:not([class*="text-success-foreground"])');
        successElements.forEach(el => {
            el.style.color = color;
        });
        debug(`Applied success color ${color} to ${successElements.length} text elements`);

        const successBgElements = document.querySelectorAll('[class*="text-success-foreground"]');
        successBgElements.forEach(el => {
            if (el.classList.contains('bg-success')) {
                el.style.backgroundColor = color;
            }
        });
        debug(`Applied success color ${color} as background to ${successBgElements.length} elements`);
    }

    function waitForElements() {
        debug("Waiting for elements");
        const interval = setInterval(() => {
            const appElement = document.querySelector('#app[data-v-app]');
            const actionBarElement = document.querySelector('#currentAction');
            const topBarElement = document.querySelector('nav.navbar');
            const navbar = document.querySelector('.navbar');

            if (appElement) {
                debug("App element found");
            }
            if (actionBarElement) {
                debug("Action bar element found");
            }
            if (topBarElement) {
                debug("Top bar element (navbar) found");
            }
            if (navbar) {
                debug("Navbar found");
            }

            if ((appElement && actionBarElement && topBarElement) || navbar) {
                debug("Essential elements found or navbar present");
                clearInterval(interval);
                setColors();
                addOpenButton();
                positionUI();

                observePageChanges();
            }
        }, 1000);
    }

    function addOpenButton() {
        debug("Adding open button");

        let navbarItem = document.querySelector('a[href="/corporation"].navbar-item.is-skewed');

        if (!navbarItem) {
            debug("Corporation link not found, trying alternate methods");
            const allNavbarItems = document.querySelectorAll('.navbar-item');

            if (allNavbarItems.length > 0) {
                navbarItem = allNavbarItems[allNavbarItems.length - 1];
                debug("Using last navbar item as anchor");
            } else {

                const navbar = document.querySelector('.navbar');
                if (navbar) {

                    debug("No navbar items found, adding to navbar directly");

                    const openButton = createOpenButton();

                    openButton.style.position = 'relative';
                    openButton.style.marginLeft = '10px';
                    navbar.appendChild(openButton);
                    return;
                } else {
                    debug("No navbar found, creating floating button");

                    const openButton = createOpenButton();
                    openButton.style.position = 'fixed';
                    openButton.style.top = '10px';
                    openButton.style.right = '10px';
                    openButton.style.zIndex = '10001';
                    document.body.appendChild(openButton);
                    return;
                }
            }
        }

        if (navbarItem) {
            debug("Adding button next to navbar item");
            const openButton = createOpenButton();
            navbarItem.parentNode.insertBefore(openButton, navbarItem.nextSibling);
        } else {
            debug("Failed to find any suitable location for button");
        }
    }

    function createOpenButton() {
        const openButton = document.createElement('button');
        openButton.id = 'colorChangerOpenButton';
        openButton.innerHTML = '🎨';
        openButton.style.marginLeft = '10px';

        const topBarElement = document.querySelector('nav.navbar');
        const topBarColor = topBarElement ? topBarElement.style.backgroundColor : '#2596be';
        openButton.style.backgroundColor = topBarColor;
        openButton.style.color = '#fff';
        openButton.style.border = 'none';
        openButton.style.padding = '5px';
        openButton.style.borderRadius = '3px';
        openButton.style.cursor = 'pointer';

        openButton.addEventListener('click', () => {
            debug("Open button clicked");
            uiContainer.style.display = uiContainer.style.display === 'none' ? 'flex' : 'none';
            isColorUIOpen = uiContainer.style.display === 'flex';
            positionUI();
        });

        return openButton;
    }

    function positionUI() {
        debug("Positioning UI");
        const topBarElement = document.querySelector('nav.navbar');
        if (topBarElement) {
            const { height } = topBarElement.getBoundingClientRect();
            uiContainer.style.top = `${height + 5}px`;
            debug(`UI positioned at ${height + 5}px from top`);
        } else {

            uiContainer.style.top = '50px';
            debug("Using fallback UI position");
        }
    }

    const uiContainer = document.createElement('div');
    uiContainer.id = 'colorChangerUI';
    uiContainer.style.position = 'fixed';
    uiContainer.style.padding = '10px';
    uiContainer.style.backgroundColor = '#505c6c';
    uiContainer.style.border = '1px solid #ccc';
    uiContainer.style.zIndex = '10000';
    uiContainer.style.display = 'none';
    uiContainer.style.flexDirection = 'row';
    uiContainer.style.alignItems = 'center';
    uiContainer.style.whiteSpace = 'nowrap';
    uiContainer.style.color = '#ffffff';
    uiContainer.style.fontSize = '12px';
    uiContainer.style.right = '10px';
    uiContainer.style.borderRadius = '5px';
    uiContainer.style.boxShadow = '0 2px 5px rgba(0,0,0,0.2)';
    uiContainer.style.flexWrap = 'wrap';
    uiContainer.style.maxWidth = '800px';

    const backgroundColorLabel = document.createElement('label');
    backgroundColorLabel.textContent = 'Background Color: ';
    uiContainer.appendChild(backgroundColorLabel);

    const backgroundColorInput = document.createElement('input');
    backgroundColorInput.type = 'color';
    uiContainer.appendChild(backgroundColorInput);

    const actionBarColorLabel = document.createElement('label');
    actionBarColorLabel.textContent = 'Action Bar Color: ';
    actionBarColorLabel.style.marginLeft = '10px';
    uiContainer.appendChild(actionBarColorLabel);

    const actionBarColorInput = document.createElement('input');
    actionBarColorInput.type = 'color';
    uiContainer.appendChild(actionBarColorInput);

    const topBarColorLabel = document.createElement('label');
    topBarColorLabel.textContent = 'Top Bar Color: ';
    topBarColorLabel.style.marginLeft = '10px';
    uiContainer.appendChild(topBarColorLabel);

    const topBarColorInput = document.createElement('input');
    topBarColorInput.type = 'color';
    uiContainer.appendChild(topBarColorInput);

    const textColorLabel = document.createElement('label');
    textColorLabel.textContent = 'Text Color: ';
    textColorLabel.style.marginLeft = '10px';
    uiContainer.appendChild(textColorLabel);

    const textColorInput = document.createElement('input');
    textColorInput.type = 'color';
    uiContainer.appendChild(textColorInput);

    const warningTextColorLabel = document.createElement('label');
    warningTextColorLabel.textContent = 'Warning Text: ';
    warningTextColorLabel.style.marginLeft = '10px';
    uiContainer.appendChild(warningTextColorLabel);

    const warningTextColorInput = document.createElement('input');
    warningTextColorInput.type = 'color';
    warningTextColorInput.value = defaultWarningTextColor;
    uiContainer.appendChild(warningTextColorInput);

    const successTextColorLabel = document.createElement('label');
    successTextColorLabel.textContent = 'Success Text: ';
    successTextColorLabel.style.marginLeft = '10px';
    uiContainer.appendChild(successTextColorLabel);

    const successTextColorInput = document.createElement('input');
    successTextColorInput.type = 'color';
    successTextColorInput.value = defaultSuccessTextColor;
    uiContainer.appendChild(successTextColorInput);

    const buttonContainer = document.createElement('div');
    buttonContainer.style.display = 'flex';
    buttonContainer.style.marginTop = '8px';
    buttonContainer.style.width = '100%';
    buttonContainer.style.justifyContent = 'flex-end';
    uiContainer.appendChild(buttonContainer);

    const saveButton = document.createElement('button');
    saveButton.textContent = 'Save';
    saveButton.style.marginLeft = '10px';
    saveButton.id = 'saveButton';
    buttonContainer.appendChild(saveButton);

    const resetButton = document.createElement('button');
    resetButton.textContent = 'Reset';
    resetButton.style.marginLeft = '5px';
    resetButton.id = 'resetButton';
    buttonContainer.appendChild(resetButton);

    const exportButton = document.createElement('button');
    exportButton.textContent = 'Export';
    exportButton.style.marginLeft = '5px';
    exportButton.style.backgroundColor = '#2596be';
    exportButton.id = 'exportButton';
    buttonContainer.appendChild(exportButton);

    const importButton = document.createElement('button');
    importButton.textContent = 'Import';
    importButton.style.marginLeft = '5px';
    importButton.style.backgroundColor = '#2596be';
    importButton.id = 'importButton';
    buttonContainer.appendChild(importButton);

    exportButton.addEventListener('click', () => {
        const colorScheme = {
            backgroundColor: backgroundColorInput.value,
            actionBarColor: actionBarColorInput.value,
            topBarColor: topBarColorInput.value,
            textColor: textColorInput.value,
            warningTextColor: warningTextColorInput.value,
            successTextColor: successTextColorInput.value
        };

        const colorSchemeString = JSON.stringify(colorScheme);

        navigator.clipboard.writeText(colorSchemeString)
            .then(() => {
                debug('Color scheme exported to clipboard successfully');

                exportButton.textContent = '✓ Copied!';
                setTimeout(() => {
                    exportButton.textContent = 'Export';
                }, 2000);
            })
            .catch(err => {
                debug('Failed to copy: ' + err);

                exportButton.textContent = '✗ Failed';
                setTimeout(() => {
                    exportButton.textContent = 'Export';
                }, 2000);
            });
    });

    importButton.addEventListener('click', async () => {
        try {
            const text = await navigator.clipboard.readText();
            const colorScheme = JSON.parse(text);
            debug('Importing color scheme: ' + text);

            backgroundColorInput.value = colorScheme.backgroundColor || defaultBackgroundColor;
            actionBarColorInput.value = colorScheme.actionBarColor || defaultActionBarColor;
            topBarColorInput.value = colorScheme.topBarColor || defaultTopBarColor;
            textColorInput.value = colorScheme.textColor || defaultTextColor;
            warningTextColorInput.value = colorScheme.warningTextColor || defaultWarningTextColor;
            successTextColorInput.value = colorScheme.successTextColor || defaultSuccessTextColor;

            const appElement = document.querySelector('#app[data-v-app]');
            if (appElement) {
                appElement.style.backgroundColor = backgroundColorInput.value;
            }

            const actionBarElement = document.querySelector('#currentAction');
            if (actionBarElement) {
                actionBarElement.style.backgroundColor = actionBarColorInput.value;
            }

            const topBarElement = document.querySelector('nav.navbar');
            if (topBarElement) {
                topBarElement.style.backgroundColor = topBarColorInput.value;
            }

            document.body.style.color = textColorInput.value;
            applyTextColorToAll(textColorInput.value);
            applyWarningTextColor(warningTextColorInput.value);
            applySuccessTextColor(successTextColorInput.value);

            saveColorsToLocalStorage();

            importButton.textContent = '✓ Imported & Saved!';
            setTimeout(() => {
                importButton.textContent = 'Import';
            }, 2000);

        } catch (error) {
            debug('Import error: ' + error);
            alert('Failed to import color scheme. Please ensure the clipboard has a valid format.');

            importButton.textContent = '✗ Failed';
            setTimeout(() => {
                importButton.textContent = 'Import';
            }, 2000);
        }
    });

    document.body.appendChild(uiContainer);

    backgroundColorInput.addEventListener('input', () => {
        const appElement = document.querySelector('#app[data-v-app]');
        if (appElement) {
            appElement.style.backgroundColor = backgroundColorInput.value;
        }
    });

    actionBarColorInput.addEventListener('input', () => {
        const actionBarElement = document.querySelector('#currentAction');
        if (actionBarElement) {
            actionBarElement.style.backgroundColor = actionBarColorInput.value;
        }
    });

    topBarColorInput.addEventListener('input', () => {
        const topBarElement = document.querySelector('nav.navbar');
        if (topBarElement) {
            topBarElement.style.backgroundColor = topBarColorInput.value;
        }
    });

    textColorInput.addEventListener('input', () => {
        document.body.style.color = textColorInput.value;
        applyTextColorToAll(textColorInput.value);
    });

    warningTextColorInput.addEventListener('input', () => {
        applyWarningTextColor(warningTextColorInput.value);
    });

    successTextColorInput.addEventListener('input', () => {
        applySuccessTextColor(successTextColorInput.value);
    });

    saveButton.addEventListener('click', () => {
        saveColorsToLocalStorage();

        setColors();

        saveButton.textContent = '✓ Saved!';
        setTimeout(() => {
            saveButton.textContent = 'Save';
        }, 2000);
    });

    resetButton.addEventListener('click', () => {
        localStorage.removeItem('backgroundColor');
        localStorage.removeItem('actionBarColor');
        localStorage.removeItem('topBarColor');
        localStorage.removeItem('textColor');
        localStorage.removeItem('warningTextColor');
        localStorage.removeItem('successTextColor');
        setColors();

        resetButton.textContent = '✓ Reset!';
        setTimeout(() => {
            resetButton.textContent = 'Reset';
        }, 2000);
    });

    GM_addStyle(`
        #colorChangerUI input[type="color"] {
            cursor: pointer;
            margin-left: 5px;
            border: none;
            height: 20px;
            width: 20px;
            padding: 0;
            background: none;
        }
        #colorChangerUI button {
            cursor: pointer;
            color: #fff;
            border: none;
            padding: 5px 10px;
            border-radius: 3px;
            font-size: 12px;
            transition: all 0.2s ease;
        }
        #colorChangerUI button:hover {
            opacity: 0.8;
            transform: translateY(-1px);
        }
        #colorChangerUI button:active {
            transform: translateY(1px);
        }
        #saveButton {
            background-color: #4CAF50 !important;
        }
        #resetButton {
            background-color: #f44336 !important;
        }
        #exportButton, #importButton {
            background-color: #2196F3 !important;
        }
        #colorChangerOpenButton {
            transition: transform 0.2s ease !important;
        }
        #colorChangerOpenButton:hover {
            transform: scale(1.1) !important;
        }
        #colorChangerUI label {
            margin-left: 10px;
        }
        #colorChangerUI label:first-child {
            margin-left: 0;
        }
    `);

    function observePageChanges() {
        debug("Starting page observer");
        const observer = new MutationObserver((mutations) => {
            let needsUpdate = false;
            let hasDestructiveText = false;
            let hasSuccessText = false;
            let hasForegroundClasses = false;

            mutations.forEach((mutation) => {
                if (mutation.addedNodes.length) {

                    mutation.addedNodes.forEach(node => {
                        if (node.nodeType === 1) {
                            if (node.className && node.className.includes) {
                                if (node.className.includes('text-destructive')) {
                                    hasDestructiveText = true;
                                }
                                if (node.className.includes('text-success')) {
                                    hasSuccessText = true;
                                }
                                if (node.className.includes('text-success-foreground') ||
                                    node.className.includes('text-warning-foreground') ||
                                    node.className.includes('text-destructive-foreground')) {
                                    hasForegroundClasses = true;
                                }
                            }

                            const destructiveElements = node.querySelectorAll('[class*="text-destructive"]');
                            if (destructiveElements.length > 0) {
                                hasDestructiveText = true;
                            }

                            const successElements = node.querySelectorAll('[class*="text-success"]');
                            if (successElements.length > 0) {
                                hasSuccessText = true;
                            }

                            const foregroundElements = node.querySelectorAll(
                                '[class*="text-success-foreground"], [class*="text-warning-foreground"], [class*="text-destructive-foreground"]'
                            );
                            if (foregroundElements.length > 0) {
                                hasForegroundClasses = true;
                            }
                        }
                    });

                    if (hasDestructiveText || hasForegroundClasses) {
                        debug("Found new text-destructive or foreground elements, applying warning color");
                        applyWarningTextColor(warningTextColorInput.value);
                    }

                    if (hasSuccessText || hasForegroundClasses) {
                        debug("Found new text-success or foreground elements, applying success color");
                        applySuccessTextColor(successTextColorInput.value);
                    }

                    if (hasForegroundClasses) {
                        debug("Found new foreground elements, applying text color");
                        applyTextColorToAll(textColorInput.value);
                    }

                    needsUpdate = true;
                }
            });

            if (needsUpdate) {
                debug("Page changed, reapplying colors");

    if (!isColorUIOpen) {
        setColors();
    } else {

        debug("UI is open - skipping setColors() to prevent overriding user selections");
    }

                if (!document.querySelector('#colorChangerOpenButton')) {
                    debug("Button disappeared, adding again");
                    addOpenButton();
                }
            }
        });

        observer.observe(document.body, { childList: true, subtree: true });
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', waitForElements);
    } else {
        waitForElements();
    }
})();