If you want to make spectrum look less awful, here is a way to override stock CSS with your own: Firefox: https://addons.mozilla.org/en-US/firefox/addon/styl-us/ Chrome: https://chromewebstore.google.com/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne Make a new style for url starting with https://robertsspaceindustries.com/spectrum/ This block yeets the top bar: #platform-bar-navigation, #platform-bar-head, body > div:nth-child(2), [data-orion-spectrum][data-rsi-component="PlatformBar"] { display: none !important; } This block changes the main text font: body, .forum-thread-item > .content .content-blocks { font-family: "Segoe UI Variable" !important; letter-spacing: normal !important; } This block changes the code blocks font: .theme-dark .public-DraftEditor-content pre, .theme-dark pre { font-family: "Segoe UI Mono" !important; } Can change the Segoe UI to Roboto, or whatever you want really Here is a fun one: div.message-item:has(div span div div img[src="URL GOES HERE"]), div.message-item:has(div span div div img[src="URL GOES HERE"]) + .type-small:not(:has(div.top)), div.message-item:has(div span div div img[src="URL GOES HERE"]) + .type-small + .last-was-small:not(:has(div.top)), div.message-item:has(div span div div img[src="URL GOES HERE"]) + .type-small + .type-small + .last-was-small:not(:has(div.top)), div.message-item:has(div span div div img[src="URL GOES HERE"]) + .type-small + .type-small + .type-small + .last-was-small:not(:has(div.top)) { background: #063f5d !important; } div.message-item:hover:has(div span div div img[src="URL GOES HERE"]), div.message-item:hover:has(div span div div img[src="URL GOES HERE"]) + .type-small:not(:has(div.top)), div.message-item:hover:has(div span div div img[src="URL GOES HERE"]) + .type-small + .last-was-small:not(:has(div.top)), div.message-item:hover:has(div span div div img[src="URL GOES HERE"]) + .type-small + .type-small + .last-was-small:not(:has(div.top)), div.message-item:hover:has(div span div div img[src="URL GOES HERE"]) + .type-small + .type-small + .type-small + .last-was-small:not(:has(div.top)) { background: #07557e !important; } Add your spectrum avatar's URL to the "URL GOES HERE" part you can find the specific URL using developer tool's inspection tool https://robertsspaceindustries.com/media/4hclzaubgwtcvr/heap_infobox/76c0b544-B093-447e-B41b-C8c539ee5087.png?v=1735976482 in my case and your own chat massages get a ligher blue color background, (or any color you want, if you change the RGB value) - This block makes people posting as Admin/Staff/Mod have a colored background matching the role for better visibility: /* Staff */ .message-item:has(div.avatar[style="border-color: rgb(222, 195, 66);"]), .message-item:has(div.avatar[style="border-color: rgb(222, 195, 66);"]) + .type-small:not(:has(div.top)), .message-item:has(div.avatar[style="border-color: rgb(222, 195, 66);"]) + .type-small + .last-was-small { background: #5b5d16; } .message-item:hover:has(div.avatar[style="border-color: rgb(222, 195, 66);"]), .message-item:hover:has(div.avatar[style="border-color: rgb(222, 195, 66);"]) + .type-small:not(:has(div.top)), .message-item:hover:has(div.avatar[style="border-color: rgb(222, 195, 66);"]) + .type-small + .last-was-small:not(:has(div.top)) { background: #888d00 !important; } /* Admin */ .message-item:has(div.avatar[style="border-color: rgb(255, 98, 98);"]), .message-item:has(div.avatar[style="border-color: rgb(255, 98, 98);"]) + .type-small:not(:has(div.top)), .message-item:has(div.avatar[style="border-color: rgb(255, 98, 98);"]) + .type-small + .last-was-small:not(:has(div.top)) { background: #530 !important; } .message-item:hover:has(div.avatar[style="border-color: rgb(255, 98, 98);"]), .message-item:hover:has(div.avatar[style="border-color: rgb(255, 98, 98);"]) + .type-small:not(:has(div.top)), .message-item:hover:has(div.avatar[style="border-color: rgb(255, 98, 98);"]) + .type-small + .last-was-small:not(:has(div.top)) { background: #804d00 !important; } /* Mod */ .message-item:has(div.avatar[style="border-color: rgb(125, 103, 233);"]), .message-item:has(div.avatar[style="border-color: rgb(125, 103, 233);"]) + .type-small:not(:has(div.top)), .message-item:has(div.avatar[style="border-color: rgb(125, 103, 233);"]) + .type-small + .last-was-small:not(:has(div.top)) { background: rgb(16, 0, 95) !important; } .message-item:hover:has(div.avatar[style="border-color: rgb(125, 103, 233);"]), .message-item:hover:has(div.avatar[style="border-color: rgb(125, 103, 233);"]) + .type-small:not(:has(div.top)), .message-item:hover:has(div.avatar[style="border-color: rgb(125, 103, 233);"]) + .type-small + .last-was-small:not(:has(div.top)) { background: rgb(27, 0, 160) !important; }