☰

PlexSpace: A KoGaMa Theme

A cosy yet boring dark mode theme with orange hues.

  1. // ==UserScript==
  2. // @name         PlexSpace: A KoGaMa Theme
  3. // @namespace    discord.gg/C2ZJCZXKTu
  4. // @version      2
  5. // @description  A cosy yet boring dark mode theme with orange hues.
  6. // @author       ⛧ simmy
  7. // @match        *://*.kogama.com/*
  8. // @grant        GM_addStyle
  9. // ==/UserScript==
  10.  
  11. (function() {
  12.     'use strict';
  13.  
  14.     GM_addStyle(`
  15. /* GLOBAL ROOT */
  16. :root {
  17.     --transition-delay: 0.4s;
  18.     --font-family-main: 'IBMPlexSerif', serif;
  19.     --font-spacing: 0.7em;
  20.     --font-spacing-hover: 0.1em;
  21.     --color-subtext: #666;
  22.     --color-soft-subtext: #858484;
  23.     --color-dark-subtext: #202020;
  24.     --color-bg-dark: #171717;
  25.     --color-bg-react: #1e1e1e;
  26.     --color-bg-nav: #222222;
  27.     --color-header-text: #ffb650;
  28.     --color-react-clickable: #ffffff;
  29.     --color-react-clickable2: #d78d25;
  30.     --color-react-clickable2-hover: #bb781b;
  31.     --color-react-clickable3-hover: #ffb650;
  32. }
  33.  
  34. /* WEBSITE SURFACE FONT */
  35. @font-face {
  36.     font-family: 'IBMPlexSerif';
  37.     src: url('https://cdn.jsdelivr.net/gh/IBM/plex@master/packages/plex-serif/fonts/complete/woff2/IBMPlexSerif-Medium.woff2') format('woff2');
  38.     font-weight: 500;
  39.     font-style: normal;
  40.     font-display: swap;
  41. }
  42.  
  43. body,
  44. p,
  45. h1,
  46. h2,
  47. h3,
  48. h4,
  49. h5,
  50. h6,
  51. a,
  52. span,
  53. div,
  54. input,
  55. button,
  56. textarea {
  57.     font-family: var(--font-family-main) !important;
  58.     font-weight: 500 !important;
  59. }
  60.  
  61. body * {
  62.     font-family: var(--font-family-main) !important;
  63.     font-weight: 500 !important;
  64. }
  65.  
  66. /* WEBPAGE */
  67. body#root-page-mobile.spring,
  68. body#root-page-mobile.summer,
  69. body#root-page-mobile.autumn,
  70. body#root-page-mobile.winter {
  71.     background-image: none !important;
  72.     background-color: var(--color-bg-dark) !important;
  73. }
  74. body#root-page-mobile {
  75.     background-image: none !important;
  76.     background-color: var(--color-bg-dark) !important;
  77. }
  78. .MuiPaper-root {
  79.     background-color: var(--color-bg-react) !important;
  80. }
  81.  
  82. ._33DXe {
  83.     background-image: none !important;
  84. }
  85. .zUJzi {
  86.     background-color: var(--color-bg-react);
  87.     color: var(--color-soft-subtext);
  88.     border: none !important;
  89. }
  90. .uwn5j ._3DYYr ._28mON header {
  91.     color: var(--color-react-clickable2) !important;
  92. }
  93. ._375XK .F3PyX ._2XzvN {
  94.     color: var(--color-react-clickable2) !important;
  95. }
  96. .uwn5j ._3DYYr ._1j2Cd {
  97.     color: var(--color-soft-subtext);
  98.     text-transform: uppercase !important;
  99. }
  100. ._375XK textarea {
  101.     background-color: var(--color-bg-react);
  102.     color: var(--color-soft-subtext);
  103.     border: none !important;
  104. }
  105. ._375XK ._2XaOw ._1j2Cd p {
  106.     background-color: var(--color-bg-nav);
  107.     color: var(--color-subtext);
  108.     transition: all 0.4s ease-in-out;
  109. }
  110. ._375XK ._2XaOw ._1j2Cd p:hover {
  111.     letter-spacing: var(--font-spacing) !important;
  112. }
  113. ._375XK ._2XaOw ._1j2Cd._1Xzzq p {
  114.     background-color: var(--color-bg-nav);
  115.     color: var(--color-soft-subtext) !important;
  116.     transition: all 0.4s ease-in-out;
  117. }
  118. ._375XK ._2XaOw ._1j2Cd._1Xzzq p:hover {
  119.     letter-spacing: var(--font-spacing) !important;
  120. }
  121. .MuiTypography-colorPrimary,
  122. ._13UrL ._23KvS ._25Vmr ._2IqY6 h1,
  123. ._13UrL ._23KvS ._25Vmr ._2IqY6 h1 a {
  124.     color: var(--color-header-text) !important;
  125. }
  126.  
  127. .MuiButton-containedPrimary {
  128.     background-color: var(--color-react-clickable2) !important;
  129.     letter-spacing: var(--font-spacing) !important;
  130.     text-transform: uppercase !important;
  131.     transition: all 0.4s ease-in-out !important;
  132. }
  133.  
  134. .MuiButton-containedPrimary:hover {
  135.     background-color: var(--color-react-clickable2-hover) !important;
  136.     letter-spacing: var(--font-spacing-hover) !important;
  137. }
  138. .MuiTypography-colorTextSecondary {
  139.     color: var(--color-react-clickable) !important;
  140. }
  141. .MuiTypography-colorTextSecondary:hover {
  142.     color: var(--color-react-clickable2-hover) !important;
  143.     text-decoration: none !important;
  144. }
  145. .MuiLink-underlineHover:hover {
  146.     text-decoration: none !important;
  147. }
  148. .MuiButton-label {
  149.     color: var(--color-react-clickable) !important;
  150.     text-transform: uppercase !important;
  151.     letter-spacing: var(--font-spacing) !important;
  152.     transition: all 0.4s ease-in-out !important;
  153. }
  154. .MuiButton-label:hover {
  155.     color: var(--color-react-clickable) !important;
  156.     letter-spacing: var(--font-spacing-hover) !important;
  157. }
  158. a {
  159.     transition: all 0.4s ease-in-out !important;
  160. }
  161. a:hover {
  162.     color: var(--color-react-clickable2-hover) !important;
  163. }
  164. a.MuiButton-root:hover {
  165.     color: var(--color-react-clickable2-hover) !important;
  166. }
  167. .MuiButton-root:hover {
  168.     color: var(--color-react-clickable2-hover) !important;
  169. }
  170.  
  171. .MuiButton-contained {
  172.     background-color: var(--color-react-clickable2) !important;
  173.     color: var(--color-dark-subtext) !important;
  174.     transition: all 0.4s ease-in-out !important;
  175. }
  176.  
  177. .MuiChip-root {
  178.     background-color: var(--color-react-clickable) !important;
  179.     text-transform: uppercase !important;
  180.     color: var(--color-dark-subtext) !important;
  181.     transition: all 0.4s ease-in-out !important;
  182. }
  183. .MuiChip-root:hover {
  184.     background-color: var(--color-react-clickable2-hover) !important;
  185.     color: var(--color-dark-subtext) !important;
  186. }
  187. body#root-page-mobile header#pageheader .pageheader-inner {
  188.     background-color: var(--color-bg-nav) !important;
  189.     text-transform: uppercase !important;
  190. }
  191. ._13UrL ._23KvS ._1jTCU ._20K92 {
  192.     font-size: 0.65em !important;
  193.     text-transform: uppercase !important;
  194.     color: var(--color-subtext) !important;
  195. }
  196. ._13UrL ._23KvS ._1z4jM {
  197.     display: none !important;
  198. }
  199. .MuiPaper-root h2 {
  200.     position: relative;
  201.     font-size: 0;
  202. }
  203. .icon-cancel:before {
  204.     color: var(--color-react-clickable2-hover) !important;
  205. }
  206. .MuiPaper-root h2::before {
  207.     position: absolute;
  208.     left: 0;
  209.     top: 0;
  210.     content: "about";
  211.     font-size: 1.5rem;
  212.     text-transform: uppercase !important;
  213.     text-align: center;
  214.     color: var(--color-subtext) !important;
  215.     width: 100%;
  216. }
  217. ._13UrL .kR267 ._9smi2 ._1rJI8 ._1aUa_ {
  218.     text-transform: uppercase !important;
  219.     color: var(--color-soft-subtext) !important;
  220. }
  221. footer.authenticated {
  222.     display: none !important;
  223. }
  224. .MuiSnackbar-anchorOriginBottomRight {
  225.     display: none !important;
  226. }
  227. body#root-page-mobile header#pageheader nav.menu > ol > li a {
  228.     color: var(--color-subtext) !important;
  229.     transition: all 0.4s ease-in-out !important;
  230.     height: 50px;
  231.     overflow: hidden;
  232. }
  233.  
  234. body#root-page-mobile header#pageheader nav.menu > ol > li a:hover {
  235.     border-bottom: 4px solid hsla(0, 0%, 100%, 0.13);
  236.     height: 48px;
  237. }
  238. ._2E1AL {
  239.     display: none !important;
  240. }
  241. .MuiDrawer-paperAnchorRight {
  242.     text-transform: uppercase !important;
  243. }
  244. .xp-bar .xp-text {
  245.     color: var(--color-dark-subtext) !important;
  246. }
  247. .xp-bar .progress {
  248.     background-color: var(--color-react-clickable2) !important;
  249. }
  250. .xp-bar .progress .progression-bar {
  251.     background-color: var(--color-react-clickable3-hover) !important;
  252. }
  253. body#root-page-mobile header#pageheader .logo .logo-image {
  254.     background-image: url('https://i.imgur.com/oEaseOY.jpeg') !important;
  255. }
  256. ._1q4mD ._1sUGu ._1u05O {
  257. background-color: transparent !important;
  258. }
  259.  
  260.     `);
  261.  
  262.     function replaceImageAndTooltip() {
  263.         const targetElement = document.querySelector('div._2Jlgl a');
  264.  
  265.         if (targetElement) {
  266.             const newImageUrl = 'https://i.imgur.com/oEaseOY.jpeg';
  267.             const imgElement = targetElement.querySelector('img');
  268.             if (imgElement) {
  269.                 imgElement.src = newImageUrl;
  270.                 imgElement.srcset = newImageUrl + ' 2x';
  271.             }
  272.             const newTooltipText = 'PlexSpace Theme by Simon';
  273.             targetElement.setAttribute('title', newTooltipText);
  274.         }
  275.     }
  276.     window.addEventListener('load', replaceImageAndTooltip);
  277.  
  278.     function changePlaceholderText() {
  279.         const relaxarea = document.querySelector('._375XK textarea');
  280.         if (relaxarea) {
  281.             relaxarea.placeholder = 'Make them smile ❤';
  282.         }
  283.         const relaxarea2 = document.querySelector('.zUJzi ._2BvOT ._375XK textarea');
  284.         if (relaxarea2) {
  285.             relaxarea2.placeholder = 'Make them smile ❤';
  286.         }
  287.     }
  288.     window.addEventListener('load', changePlaceholderText);
  289. })();