☰

PlexSpace: A KoGaMa Theme

A cosy yet boring dark mode theme with orange hues.

// ==UserScript==
// @name         PlexSpace: A KoGaMa Theme
// @namespace    discord.gg/C2ZJCZXKTu
// @version      2
// @description  A cosy yet boring dark mode theme with orange hues.
// @author       ⛧ simmy
// @match        *://*.kogama.com/*
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    GM_addStyle(`
/* GLOBAL ROOT */
:root {
    --transition-delay: 0.4s;
    --font-family-main: 'IBMPlexSerif', serif;
    --font-spacing: 0.7em;
    --font-spacing-hover: 0.1em;
    --color-subtext: #666;
    --color-soft-subtext: #858484;
    --color-dark-subtext: #202020;
    --color-bg-dark: #171717;
    --color-bg-react: #1e1e1e;
    --color-bg-nav: #222222;
    --color-header-text: #ffb650;
    --color-react-clickable: #ffffff;
    --color-react-clickable2: #d78d25;
    --color-react-clickable2-hover: #bb781b;
    --color-react-clickable3-hover: #ffb650;
}

/* WEBSITE SURFACE FONT */
@font-face {
    font-family: 'IBMPlexSerif';
    src: url('https://cdn.jsdelivr.net/gh/IBM/plex@master/packages/plex-serif/fonts/complete/woff2/IBMPlexSerif-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

body,
p,
h1,
h2,
h3,
h4,
h5,
h6,
a,
span,
div,
input,
button,
textarea {
    font-family: var(--font-family-main) !important;
    font-weight: 500 !important;
}

body * {
    font-family: var(--font-family-main) !important;
    font-weight: 500 !important;
}

/* WEBPAGE */
body#root-page-mobile.spring,
body#root-page-mobile.summer,
body#root-page-mobile.autumn,
body#root-page-mobile.winter {
    background-image: none !important;
    background-color: var(--color-bg-dark) !important;
}
body#root-page-mobile {
    background-image: none !important;
    background-color: var(--color-bg-dark) !important;
}
.MuiPaper-root {
    background-color: var(--color-bg-react) !important;
}

._33DXe {
    background-image: none !important;
}
.zUJzi {
    background-color: var(--color-bg-react);
    color: var(--color-soft-subtext);
    border: none !important;
}
.uwn5j ._3DYYr ._28mON header {
    color: var(--color-react-clickable2) !important;
}
._375XK .F3PyX ._2XzvN {
    color: var(--color-react-clickable2) !important;
}
.uwn5j ._3DYYr ._1j2Cd {
    color: var(--color-soft-subtext);
    text-transform: uppercase !important;
}
._375XK textarea {
    background-color: var(--color-bg-react);
    color: var(--color-soft-subtext);
    border: none !important;
}
._375XK ._2XaOw ._1j2Cd p {
    background-color: var(--color-bg-nav);
    color: var(--color-subtext);
    transition: all 0.4s ease-in-out;
}
._375XK ._2XaOw ._1j2Cd p:hover {
    letter-spacing: var(--font-spacing) !important;
}
._375XK ._2XaOw ._1j2Cd._1Xzzq p {
    background-color: var(--color-bg-nav);
    color: var(--color-soft-subtext) !important;
    transition: all 0.4s ease-in-out;
}
._375XK ._2XaOw ._1j2Cd._1Xzzq p:hover {
    letter-spacing: var(--font-spacing) !important;
}
.MuiTypography-colorPrimary,
._13UrL ._23KvS ._25Vmr ._2IqY6 h1,
._13UrL ._23KvS ._25Vmr ._2IqY6 h1 a {
    color: var(--color-header-text) !important;
}

.MuiButton-containedPrimary {
    background-color: var(--color-react-clickable2) !important;
    letter-spacing: var(--font-spacing) !important;
    text-transform: uppercase !important;
    transition: all 0.4s ease-in-out !important;
}

.MuiButton-containedPrimary:hover {
    background-color: var(--color-react-clickable2-hover) !important;
    letter-spacing: var(--font-spacing-hover) !important;
}
.MuiTypography-colorTextSecondary {
    color: var(--color-react-clickable) !important;
}
.MuiTypography-colorTextSecondary:hover {
    color: var(--color-react-clickable2-hover) !important;
    text-decoration: none !important;
}
.MuiLink-underlineHover:hover {
    text-decoration: none !important;
}
.MuiButton-label {
    color: var(--color-react-clickable) !important;
    text-transform: uppercase !important;
    letter-spacing: var(--font-spacing) !important;
    transition: all 0.4s ease-in-out !important;
}
.MuiButton-label:hover {
    color: var(--color-react-clickable) !important;
    letter-spacing: var(--font-spacing-hover) !important;
}
a {
    transition: all 0.4s ease-in-out !important;
}
a:hover {
    color: var(--color-react-clickable2-hover) !important;
}
a.MuiButton-root:hover {
    color: var(--color-react-clickable2-hover) !important;
}
.MuiButton-root:hover {
    color: var(--color-react-clickable2-hover) !important;
}

.MuiButton-contained {
    background-color: var(--color-react-clickable2) !important;
    color: var(--color-dark-subtext) !important;
    transition: all 0.4s ease-in-out !important;
}

.MuiChip-root {
    background-color: var(--color-react-clickable) !important;
    text-transform: uppercase !important;
    color: var(--color-dark-subtext) !important;
    transition: all 0.4s ease-in-out !important;
}
.MuiChip-root:hover {
    background-color: var(--color-react-clickable2-hover) !important;
    color: var(--color-dark-subtext) !important;
}
body#root-page-mobile header#pageheader .pageheader-inner {
    background-color: var(--color-bg-nav) !important;
    text-transform: uppercase !important;
}
._13UrL ._23KvS ._1jTCU ._20K92 {
    font-size: 0.65em !important;
    text-transform: uppercase !important;
    color: var(--color-subtext) !important;
}
._13UrL ._23KvS ._1z4jM {
    display: none !important;
}
.MuiPaper-root h2 {
    position: relative;
    font-size: 0;
}
.icon-cancel:before {
    color: var(--color-react-clickable2-hover) !important;
}
.MuiPaper-root h2::before {
    position: absolute;
    left: 0;
    top: 0;
    content: "about";
    font-size: 1.5rem;
    text-transform: uppercase !important;
    text-align: center;
    color: var(--color-subtext) !important;
    width: 100%;
}
._13UrL .kR267 ._9smi2 ._1rJI8 ._1aUa_ {
    text-transform: uppercase !important;
    color: var(--color-soft-subtext) !important;
}
footer.authenticated {
    display: none !important;
}
.MuiSnackbar-anchorOriginBottomRight {
    display: none !important;
}
body#root-page-mobile header#pageheader nav.menu > ol > li a {
    color: var(--color-subtext) !important;
    transition: all 0.4s ease-in-out !important;
    height: 50px;
    overflow: hidden;
}

body#root-page-mobile header#pageheader nav.menu > ol > li a:hover {
    border-bottom: 4px solid hsla(0, 0%, 100%, 0.13);
    height: 48px;
}
._2E1AL {
    display: none !important;
}
.MuiDrawer-paperAnchorRight {
    text-transform: uppercase !important;
}
.xp-bar .xp-text {
    color: var(--color-dark-subtext) !important;
}
.xp-bar .progress {
    background-color: var(--color-react-clickable2) !important;
}
.xp-bar .progress .progression-bar {
    background-color: var(--color-react-clickable3-hover) !important;
}
body#root-page-mobile header#pageheader .logo .logo-image {
    background-image: url('https://i.imgur.com/oEaseOY.jpeg') !important;
}
._1q4mD ._1sUGu ._1u05O {
background-color: transparent !important;
}

    `);

    function replaceImageAndTooltip() {
        const targetElement = document.querySelector('div._2Jlgl a');

        if (targetElement) {
            const newImageUrl = 'https://i.imgur.com/oEaseOY.jpeg';
            const imgElement = targetElement.querySelector('img');
            if (imgElement) {
                imgElement.src = newImageUrl;
                imgElement.srcset = newImageUrl + ' 2x';
            }
            const newTooltipText = 'PlexSpace Theme by Simon';
            targetElement.setAttribute('title', newTooltipText);
        }
    }
    window.addEventListener('load', replaceImageAndTooltip);

    function changePlaceholderText() {
        const relaxarea = document.querySelector('._375XK textarea');
        if (relaxarea) {
            relaxarea.placeholder = 'Make them smile ❤';
        }
        const relaxarea2 = document.querySelector('.zUJzi ._2BvOT ._375XK textarea');
        if (relaxarea2) {
            relaxarea2.placeholder = 'Make them smile ❤';
        }
    }
    window.addEventListener('load', changePlaceholderText);
})();