Replit Better Colors

Making Replit Look Nicer
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name         Replit Better Colors
// @license      YKM
// @namespace    http://tampermonkey.net/
// @version      2.4
// @description  Making Replit Look Nicer
// @author       YouKnowMe
// @match        https://replit.com/*
// @iconURL      https://media.discordapp.net/attachments/763581379597828117/927065483373588510/kingspectre-02.png?width=176&height=176
// @grant        none
// ==/UserScript==

function setCookie(name,value="",days=365) {
    let expires = "";
    if (days) {
        let date = new Date();
        date.setTime(date.getTime() + (days*24*60*60*1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = `${name}=${value}${expires}; path=/`
}
function getCookie(name) {
    const splitRe = new RegExp(`(?:; |^)${name}=`);
    const value = document.cookie.split(splitRe)[1]?.split(/; /)[0];
    return value;
}
function eraseCookie(name) {
    document.cookie = `${name}=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;`;
}

function get(x){return document.getElementById(x);}
function getc(x){return document.getElementsByClassName(x);}

function darkTheme(){
    setCookie("Theme","dark");
    let main = get("box");
    document.body.style = "--accent-pink-stronger: #FF70CF ;--background-root: #000000; --background-default: #0e1014; --background-higher: #000000; --background-highest: #222327; --background-overlay: #000000a0; --foreground-default:#F5F9FC; --foreground-dimmer:#C2C8CC; --foreground-dimmest:#9DA2A6; --outline-dimmest: #72788c; --outline-dimmer:#5F677A; --outline-default: #ffffff;--outline-stronger: #222b44; --outline-strongest:#9195A1; --accent-primary-dimmest:#004182;--accent-primary-dimmer: #205992; --accent-primary-default: #0d1115;--accent-primary-stronger: #3b6b9b; --accent-primary-strongest:#B2D9FF; --accent-positive-dimmest:#044A10; --accent-positive-dimmer:#046113; --accent-positive-default:#009118; --accent-positive-stronger:#6CD97E; --accent-positive-strongest:#BFFFCA; --accent-negative-dimmest:#660000; --accent-negative-dimmer:#A60808; --accent-negative-default:#E52222; --accent-negative-stronger:#FF6666; --accent-negative-strongest:#FFCFCF; --accent-red-dimmest:#660000; --accent-red-dimmer:#A60808; --accent-red-default:#E52222; --accent-red-stronger:#FF6666; --accent-red-strongest:#FFCFCF; --accent-orange-dimmest:#542A00; --accent-orange-dimmer:#703800; --accent-orange-default:#AD5700; --accent-orange-stronger:#D4781C; --accent-orange-strongest:#FFBD7A; --accent-yellow-dimmest:#4D4000; --accent-yellow-dimmer:#635300; --accent-yellow-default:#967D00; --accent-yellow-stronger:#BFA730; --accent-yellow-strongest:#F2E088; --accent-lime-dimmest:#314A00; --accent-lime-dimmer:#3D5C00; --accent-lime-default:#5A8700; --accent-lime-stronger:#87B825; --accent-lime-strongest:#C4E581; --accent-green-dimmest:#044A10; --accent-green-dimmer:#046113; --accent-green-default:#009118; --accent-green-stronger:#6CD97E; --accent-green-strongest:#7AEB8D; --accent-teal-dimmest:#004452; --accent-teal-dimmer:#006073; --accent-teal-default:#0093B0; --accent-teal-stronger:#27B9D6; --accent-teal-strongest:#69D9F0; --accent-blue-dimmest:#004182; --accent-blue-dimmer:#0053A6; --accent-blue-default:#0079F2; --accent-blue-stronger:#57ABFF; --accent-blue-strongest:#B2D9FF; --accent-blurple-dimmest:#39298A; --accent-blurple-dimmer:#5239CC; --accent-blurple-default:#795EFF; --accent-blurple-stronger:#A694FF; --accent-blurple-strongest:#CEC4FF; --accent-purple-dimmest:#582987; --accent-purple-dimmer:#7633B8; --accent-purple-default:#A64DFF; --accent-purple-stronger:#C78FFF; --accent-purple-strongest:#E2C4FF; --accent-magenta-dimmest:#6B1A6B; --accent-magenta-dimmer:#8A218A; --accent-magenta-default:#C73AC7; --accent-magenta-stronger: #3a2b3a; --accent-magenta-strongest:#FFBFFF; --accent-pink-dimmest:#6E1B52; --accent-pink-dimmer:#8F226B; --accent-pink-default: #272727; --accent-pink-stronger:#FF70CF; --accent-pink-strongest:#FFBAE8; --accent-grey-dimmest: #725656; --accent-grey-dimmer:#545454; --accent-grey-default:#808080; --accent-grey-stronger:#A6A6A6; --accent-grey-strongest:#D4D4D4; --accent-brown-dimmest:#594031; --accent-brown-dimmer:#75503B; --accent-brown-default:#A3765C; --accent-brown-stronger:#D49877; --accent-brown-strongest:#FFC8A8; --black: #000000; --white: #ffffff;cursor: auto;"
}
function synthTheme(){
    setCookie("Theme","synth");
    document.body.style = "--background-root: #9238bd; --background-default: #4c187a; --background-higher: #a828a9; --background-highest: #3e2f41; --background-overlay: #8a2121; --foreground-default: #ffffff; --foreground-dimmest: #ff0099; --outline-dimmest: #72788c; --outline-dimmer:#5F677A; --outline-default: #ffffff; --outline-stronger: #222b44; --outline-strongest:#9195A1; --accent-primary-default: #360178; --accent-primary-stronger: #3b6b9b; --accent-primary-strongest:#B2D9FF; --accent-positive-dimmest: #eb4daa; --accent-negative-default:#E52222; --accent-negative-stronger:#FF6666; --accent-negative-strongest:#FFCFCF; --accent-red-dimmest:#660000; --accent-red-dimmer:#A60808; --accent-red-default:#E52222; --accent-red-stronger:#FF6666; --accent-red-strongest:#FFCFCF; --accent-orange-dimmest:#542A00; --accent-orange-dimmer:#703800; --accent-orange-default:#AD5700; --accent-orange-stronger:#D4781C; --accent-orange-strongest: #ffff00; --accent-yellow-dimmest:#4D4000; --accent-yellow-dimmer:#635300; --accent-yellow-default:#967D00; --accent-yellow-stronger:#BFA730; --accent-yellow-strongest:#F2E088; --accent-lime-dimmest:#314A00; --accent-lime-dimmer:#3D5C00; --accent-lime-default:#5A8700; --accent-lime-stronger:#87B825; --accent-lime-strongest:#C4E581; --accent-green-dimmest:#044A10; --accent-green-dimmer:#046113; --accent-green-default: #00ffffbd; --accent-green-stronger:#6CD97E; --accent-blurple-dimmest:#39298A; --accent-blurple-dimmer:#5239CC; --accent-blurple-default:#795EFF; --accent-blurple-stronger:#A694FF; --accent-blurple-strongest:#CEC4FF; --accent-purple-dimmest:#582987; --accent-purple-dimmer:#7633B8; --accent-purple-default:#A64DFF; --accent-purple-stronger:#C78FFF; --accent-purple-strongest:#E2C4FF; --accent-magenta-dimmest:#6B1A6B; --accent-magenta-dimmer:#8A218A; --accent-magenta-default:#C73AC7; --accent-magenta-stronger: #3a2b3a; --accent-magenta-strongest:#FFBFFF; --accent-pink-dimmest:#6E1B52; --accent-pink-default: #272727; --accent-pink-strongest:#FFBAE8; --accent-grey-dimmest: #725656; --accent-grey-dimmer:#545454; --accent-grey-default:#808080; --accent-grey-stronger:#A6A6A6; --accent-grey-strongest:#D4D4D4; --accent-brown-dimmest:#594031; --accent-brown-dimmer:#75503B; --accent-brown-default:#A3765C; --accent-brown-stronger:#D49877; --accent-brown-strongest:#FFC8A8; --black: #000000; --white: #ffffff;cursor: crosshair;"
}
function youtubeTheme(){
    setCookie("Theme","youtube");
    document.body.style = "--background-root: #bf1a1a; --background-default: #7a1818; --background-higher: #d26969; --background-highest: #3e2f41; --background-overlay: #8a2121; --foreground-default: #ffffff; --foreground-dimmest: #ff0000; --outline-dimmest: #ff00a5; --outline-dimmer: #889fd7; --outline-default: #ffffff; --outline-stronger: #222b44; --outline-strongest:#9195A1; --accent-primary-default: #a72424; --accent-primary-stronger: #3b6b9b; --accent-primary-strongest:#B2D9FF; --accent-positive-dimmest: #13a252; --accent-negative-default:#E52222; --accent-negative-stronger:#FF6666; --accent-negative-strongest:#FFCFCF; --accent-red-dimmest:#660000; --accent-red-dimmer:#A60808; --accent-red-default:#E52222; --accent-red-stronger:#FF6666; --accent-red-strongest:#FFCFCF; --accent-orange-dimmest:#542A00; --accent-orange-dimmer:#703800; --accent-orange-default:#AD5700; --accent-orange-stronger: #ffffff; --accent-orange-strongest: #ffff00; --accent-yellow-dimmest:#4D4000; --accent-yellow-dimmer:#635300; --accent-yellow-default:#967D00; --accent-yellow-stronger:#BFA730; --accent-yellow-strongest:#F2E088; --accent-lime-dimmest:#314A00; --accent-lime-dimmer:#3D5C00; --accent-lime-default:#5A8700; --accent-lime-stronger:#87B825; --accent-lime-strongest:#C4E581; --accent-green-dimmest:#044A10; --accent-green-dimmer:#046113; --accent-green-default: #00ff4c; --accent-green-stronger:#6CD97E; --accent-blurple-dimmest:#39298A; --accent-blurple-dimmer:#5239CC; --accent-blurple-default:#795EFF; --accent-blurple-stronger:#A694FF; --accent-blurple-strongest:#CEC4FF; --accent-purple-dimmest:#582987; --accent-purple-dimmer:#7633B8; --accent-purple-default:#A64DFF; --accent-purple-stronger:#C78FFF; --accent-purple-strongest:#E2C4FF; --accent-magenta-dimmest:#6B1A6B; --accent-magenta-dimmer:#8A218A; --accent-magenta-default:#C73AC7; --accent-magenta-stronger: #3a2b3a; --accent-magenta-strongest:#FFBFFF; --accent-pink-dimmest:#6E1B52; --accent-pink-default: #272727; --accent-pink-strongest:#FFBAE8; --accent-grey-dimmest: #725656; --accent-grey-dimmer:#545454; --accent-grey-default:#808080; --accent-grey-stronger:#A6A6A6; --accent-grey-strongest:#D4D4D4; --accent-brown-dimmest:#594031; --accent-brown-dimmer:#75503B; --accent-brown-default:#A3765C; --accent-brown-stronger:#D49877; --accent-brown-strongest:#FFC8A8; --black: #000000; --white: #ffffff;cursor: default;"
}
function vibrantTerminal(){
    setCookie("Theme","terminal");
    document.body.style = "--background-root: #000000; --background-default: #000000; --background-higher: #000000; --background-highest: #222327; --background-overlay: #000000a0; --foreground-default: #04ff22; --foreground-dimmer:#C2C8CC; --foreground-dimmest:#9DA2A6; --outline-dimmest: #72788c; --outline-dimmer:#5F677A; --outline-default: #ffffff; --outline-stronger: #222b44; --outline-strongest:#9195A1; --accent-primary-dimmest:#004182; --accent-primary-dimmer: #205992; --accent-primary-default: #0d1115; --accent-primary-stronger: #3b6b9b; --accent-primary-strongest:#B2D9FF; --accent-positive-dimmest:#044A10; --accent-positive-dimmer:#046113; --accent-positive-default:#009118; --accent-positive-stronger:#6CD97E; --accent-positive-strongest:#BFFFCA; --accent-negative-dimmest:#660000; --accent-negative-dimmer:#A60808; --accent-negative-default:#E52222; --accent-negative-stronger:#FF6666; --accent-negative-strongest:#FFCFCF; --accent-red-dimmest:#660000; --accent-red-dimmer:#A60808; --accent-red-default:#E52222; --accent-red-stronger:#FF6666; --accent-red-strongest:#FFCFCF; --accent-orange-dimmest:#542A00; --accent-orange-dimmer:#703800; --accent-orange-default:#AD5700; --accent-orange-stronger:#D4781C; --accent-orange-strongest: #ffeb00; --accent-yellow-dimmest:#4D4000; --accent-yellow-dimmer:#635300; --accent-yellow-default:#967D00; --accent-yellow-stronger:#BFA730; --accent-yellow-strongest:#F2E088; --accent-lime-dimmest:#314A00; --accent-lime-dimmer:#3D5C00; --accent-lime-default:#5A8700; --accent-lime-stronger:#87B825; --accent-lime-strongest:#C4E581; --accent-green-dimmest:#044A10; --accent-green-dimmer:#046113; --accent-green-default: #707070; --accent-green-stronger:#6CD97E; --accent-green-strongest:#7AEB8D; --accent-teal-dimmest:#004452; --accent-teal-dimmer:#006073; --accent-teal-default:#0093B0; --accent-teal-stronger:#27B9D6; --accent-teal-strongest:#69D9F0; --accent-blue-dimmest:#004182; --accent-blue-dimmer:#0053A6; --accent-blue-default:#0079F2; --accent-blue-stronger: #00f1ff; --accent-blue-strongest: #b300e3; --accent-blurple-dimmest:#39298A; --accent-blurple-dimmer:#5239CC; --accent-blurple-default:#795EFF; --accent-blurple-stronger:#A694FF; --accent-blurple-strongest:#CEC4FF; --accent-purple-dimmest:#582987; --accent-purple-dimmer:#7633B8; --accent-purple-default:#A64DFF; --accent-purple-stronger:#C78FFF; --accent-purple-strongest:#E2C4FF; --accent-magenta-dimmest:#6B1A6B; --accent-magenta-dimmer:#8A218A; --accent-magenta-default:#C73AC7; --accent-magenta-stronger: #3a2b3a; --accent-magenta-strongest:#FFBFFF; --accent-pink-dimmest:#6E1B52; --accent-pink-dimmer:#8F226B; --accent-pink-default: #272727; --accent-pink-stronger: #ff00a9; --accent-pink-strongest:#FFBAE8; --accent-grey-dimmest: #725656; --accent-grey-dimmer:#545454; --accent-grey-default:#808080; --accent-grey-stronger:#A6A6A6; --accent-grey-strongest:#D4D4D4; --accent-brown-dimmest:#594031; --accent-brown-dimmer:#75503B; --accent-brown-default:#A3765C; --accent-brown-stronger:#D49877; --accent-brown-strongest:#FFC8A8; --black: #000000; --white: #ffffff;cursor: auto;"
}
function resetTheme(){
    eraseCookie("Theme");
    document.body.style = "--background-root:#0E1525; --background-default:#1C2333; --background-higher:#2B3245; --background-highest:#3C445C; --background-overlay:#0e1525A0; --foreground-default:#F5F9FC; --foreground-dimmer:#C2C8CC; --foreground-dimmest:#9DA2A6; --outline-dimmest:#4E5569; --outline-dimmer:#5F677A; --outline-default:#70788C; --outline-stronger:#828899; --outline-strongest:#9195A1; --accent-primary-dimmest:#004182; --accent-primary-dimmer:#0053A6; --accent-primary-default:#0079F2; --accent-primary-stronger:#57ABFF; --accent-primary-strongest:#B2D9FF; --accent-positive-dimmest:#044A10; --accent-positive-dimmer:#046113; --accent-positive-default:#009118; --accent-positive-stronger:#6CD97E; --accent-positive-strongest:#BFFFCA; --accent-negative-dimmest:#660000; --accent-negative-dimmer:#A60808; --accent-negative-default:#E52222; --accent-negative-stronger:#FF6666; --accent-negative-strongest:#FFCFCF; --accent-red-dimmest:#660000; --accent-red-dimmer:#A60808; --accent-red-default:#E52222; --accent-red-stronger:#FF6666; --accent-red-strongest:#FFCFCF; --accent-orange-dimmest:#542A00; --accent-orange-dimmer:#703800; --accent-orange-default:#AD5700; --accent-orange-stronger:#D4781C; --accent-orange-strongest:#FFBD7A; --accent-yellow-dimmest:#4D4000; --accent-yellow-dimmer:#635300; --accent-yellow-default:#967D00; --accent-yellow-stronger:#BFA730; --accent-yellow-strongest:#F2E088; --accent-lime-dimmest:#314A00; --accent-lime-dimmer:#3D5C00; --accent-lime-default:#5A8700; --accent-lime-stronger:#87B825; --accent-lime-strongest:#C4E581; --accent-green-dimmest:#044A10; --accent-green-dimmer:#046113; --accent-green-default:#009118; --accent-green-stronger:#6CD97E; --accent-green-strongest:#7AEB8D; --accent-teal-dimmest:#004452; --accent-teal-dimmer:#006073; --accent-teal-default:#0093B0; --accent-teal-stronger:#27B9D6; --accent-teal-strongest:#69D9F0; --accent-blue-dimmest:#004182; --accent-blue-dimmer:#0053A6; --accent-blue-default:#0079F2; --accent-blue-stronger:#57ABFF; --accent-blue-strongest:#B2D9FF; --accent-blurple-dimmest:#39298A; --accent-blurple-dimmer:#5239CC; --accent-blurple-default:#795EFF; --accent-blurple-stronger:#A694FF; --accent-blurple-strongest:#CEC4FF; --accent-purple-dimmest:#582987; --accent-purple-dimmer:#7633B8; --accent-purple-default:#A64DFF; --accent-purple-stronger:#C78FFF; --accent-purple-strongest:#E2C4FF; --accent-magenta-dimmest:#6B1A6B; --accent-magenta-dimmer:#8A218A; --accent-magenta-default:#C73AC7; --accent-magenta-stronger:#F562F5; --accent-magenta-strongest:#FFBFFF; --accent-pink-dimmest:#6E1B52; --accent-pink-dimmer:#8F226B; --accent-pink-default:#D4359F; --accent-pink-stronger:#FF70CF; --accent-pink-strongest:#FFBAE8; --accent-grey-dimmest:#404040; --accent-grey-dimmer:#545454; --accent-grey-default:#808080; --accent-grey-stronger:#A6A6A6; --accent-grey-strongest:#D4D4D4; --accent-brown-dimmest:#594031; --accent-brown-dimmer:#75503B; --accent-brown-default:#A3765C; --accent-brown-stronger:#D49877; --accent-brown-strongest:#FFC8A8; --black:#0E1525; --white:#FCFCFC;"
}
function forceUpdate(){
    console.log("Forced Update");
}
function loadTheme(){
        const theme = getCookie("Theme");
        if(theme==="dark") {
            darkTheme();
        }
        else if(theme==="synth"){
            synthTheme();
        }
        else if(theme==="youtube"){
            youtubeTheme();
        }
        else if(theme==="terminal"){
            vibrantTerminal();
        }
    }
window.addEventListener('load', initTheme);

function initTheme() {
    const UIBGc = getCookie("UIBG");
    const UIBc = getCookie("UIB");
    const Close = getCookie("State");
    const overlayHTML = `
<link href="https://fonts.googleapis.com/css?family=Orbitron:900" rel="stylesheet"/>
<div id="box">
    <div class="boxou" id="box2">
        <p style="color:white;"> Better Replit Colors! \n</p>
        <br>
        <button class="ou" id="Darkmode">Dark ++</button>
        <br>
        <button class="ou" id="SynthWavePurple">Synth Wave Purple</button>
        <br>
        <button class="ou" id="YoutubeRed">Youtube Red</button>
        <br>
        <button class="ou" id="VibrantTerminal">Vibrant Terminal</button>
        <br>
        <section><label>UI Background Color   </label>                          <input id="UIBGcolor"  type="color"    value=${UIBGc}></section>
        <br>
        <section><label>UI Button Color   </label>                          <input id="UIBcolor"  type="color"    value=${UIBc}></section>
        <br>
        <button class="ou" id="Reset">Default</button><button class="ou" id="update">UPDATE<button>
    </div>
    <button class="ou" id="accordian">Show</button>
</div>
<style id="stl">
#box {
    background-color: rgba(250, 100, 250,1);
    z-index: 10;
    position: fixed;
    bottom: 1vh;
    opacity: .9;
    left: 5px;}
#box2 {
    padding: 15px;
    margin-bottom: 5px}
.ou, .boxou {
    letter-spacing: 3px;
    font-weight: bold;
    font-size: 15px;
    font-family: Orbitron;
    color:white;}

button {background-color: rgba(250,200,250,.5);}
p { text-align: center;border-bottom:1px solid white;}
#accordian {
    width: 100%;
    border:1;}
label { font-weight: bold;}
input {
    margin-top: auto;
    margin-bottom: auto;
    transform: scale(1.3);}
input:hover { cursor: pointer;}
input:focus { box-shadow: 0 0 10px #9ecaed;}
input[type=checkbox] { transform: scale(2.2);outline=none;}
input[type=radio] { border-top: auto;}
input[type=color] { width: 50px;}
</style>
`
    // Setting up the html div
    const overlay= document.createElement("div");
    overlay.innerHTML= overlayHTML;
    document.body.appendChild(overlay);

    const acc = get("accordian"),
        dark = get("Darkmode"),
        synth = get("SynthWavePurple"),
        res = get("Reset"),
        youtube= get("YoutubeRed"),
        VT= get("VibrantTerminal"),
        UIBG= get("UIBGcolor"),
        UIB= get("UIBcolor"),
        home = document.body,
        upd = get("update");
    if(Close === "close"){
        get("box2").style.display = "none";
    }
    else{
        get("box2").style.display = "grid";
        acc.innerHTML = "Hide";
    }
    for (const button of [...getc("ou")]) {
            button.style = `background-color: ${UIBc};`
        }
    document.getElementById("box").style = `background-color: ${UIBGc};`

    UIBG.onchange = function(){
        get("box").style = `background-color: ${this.value};`
        setCookie("UIBG",this.value);
    }
    UIB.onchange = function(){
        for (const button of [...getc("ou")]) {
            button.style = `background-color: ${this.value};`
        }
        setCookie("UIB",this.value);
    }
    acc.onclick = function() {
        let panel = get("box2");
        let main = get("box");
        if (panel.style.display == "grid"){
            setCookie("State","close");
            panel.style.display = "none";
            acc.innerHTML = "Show";
        }
        else {
            panel.style.display = "grid";
            eraseCookie("State");
            acc.innerHTML = "Hide";
        }
    }


    upd.onclick = forceUpdate;
    dark.onclick = darkTheme;
    res.onclick = resetTheme;
    synth.onclick = synthTheme;
    youtube.onclick = youtubeTheme;
    VT.onclick = vibrantTerminal;
    //getting theme and cookie managment
    loadTheme();
};


// Select the node that will be observed for mutations
//const targetNode = document.getElementById('__next');
const targetNode = document.body;
// Options for the observer (which mutations to observe)
const config = { attributes: true, childList: true, subtree: true };

let oldHref = window.location.href;
// Callback function to execute when mutations are observed
const callback = (mutationList, observer) => {
    if (oldHref !== window.location.href) {
        oldHref = window.location.href;
        loadTheme();
    }
};

// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode, config);

// Later, you can stop observing
//observer.disconnect();


/*

*/