Userscript to fix Discord styles and replace server icons in the sidebar with text labels

discord_styles.js

// ==UserScript==
// @name        Discord: Fix styles
// @namespace   discord_styles
// @include     *://discord.com/*
// @version     1
// @grant       GM_addStyle
// ==/UserScript==

GM_addStyle(`

/* Make text darker on light Discord */
.theme-light {
  --text-normal: #000;
}
/* Make background darker on dark Discord, make text darker */
.theme-dark {
  --background-primary:         #111111;
  --background-secondary:       #1a1b1f;
  --channeltextarea-background: #242527;
  --text-normal:                #adadad; /* messages */
  --interactive-active:         #d5d5d5; /* channel names */
  --header-primary:             #d5d5d5; /* usernames */
}
/* Fix font-family */
:root {
  --font-primary: sans-serif !important;
  --font-display: sans-serif !important;;
  --font-headline: sans-serif !important;;
  --font-code: monospace !important;;
}
/* Reduce the font sizes slightly */
div[id^="message-content-"],
div[class^="channelName-"],
span[class^="username-"] {
  font-size: 11pt;
}
div[id^="message-content-"] code,
div[id^="message-content-"] code.inline {
  font-size: 12px;
}
/* Remove bold font-weight on 1.0 pixel scaling */
@media (-webkit-max-device-pixel-ratio: 1) {
  .theme-light {
    font-weight: inherit;
  }
}

/**
 * Replace server icons in sidebar with text labels
 */
:root {
  --servers-sidebar-width: 240px;
}
nav[aria-label="Servers sidebar"] {
  /* Expand the servers sidebar because the text labels need more room */
  width: var(--servers-sidebar-width);
}
div[aria-label="Servers"] > div {
  width: unset;
}
div[aria-label="Servers"] > div > div[aria-hidden="true"] {
  /**
   * Fix the height of the indicator pills on the left edge.
   * We cannot display: none them because
   * 1) we have no other way of indicating the active server. CSS4 :has is not yet implemented.
   * 2) Discord relies on the pills for the drag-to-arrange to work.
   */
  height: 26px;
  
  /* Make the pills less bright */
  opacity: 0.55;
}
/* The pilled (selected) server will have "40px" in the style when selected.
 * Use this information to set a background color for the selected server.
 * 
 * :has isn't supported in any browser yet :(
 */
/*div[aria-label="Servers"] > div:has(> div[aria-hidden="true"] > span[style*="40px"]) {
  background-color: #ffffff22;
}*/
div[aria-label="Servers"] > div > div > div[data-dnd-name][draggable="true"] > div {
  /* Constrain width so that the badges don't run into the very right edge of the servers sidebar */
  width: calc(var(--servers-sidebar-width) - 20px);
  height: 20px;
  overflow: hidden;
}
div[aria-label="Servers"] > div > div > div[data-dnd-name][draggable="true"] > div > svg {
  /* Discord is insane and has the click handler inside the animated SVG icon for the server.
   * We need to make the SVG big so that clicking anywhere in the apparent rectangle lands your click inside the SVG. */
  width: var(--servers-sidebar-width);
  height: var(--servers-sidebar-width);
  /* Center it so that clicks are not impeded by its circular nature */
  margin-top: calc(-0.5 * var(--servers-sidebar-width));
  /* We can't even set visibility: hidden, that breaks the click handler.
   * If you need to debug, set opacity above 0. */
  opacity: 0;
}
/* Add the text labels. */
div[aria-label="Servers"] > div > div > div[data-dnd-name][draggable="true"]::before {
  color: var(--text-normal);
  content: attr(data-dnd-name);
  white-space: nowrap;
  position: absolute;
  left: 16px;
  top: 5px;
  font-size: 11pt;
  /* Constrain the width to avoid running into the new message count badge */
  width: calc(var(--servers-sidebar-width) - 57px);
  overflow-x: hidden;
  /* Need to set a height to avoid a scrollbar after using overflow-x
   * Use a height large enough to not cut off glyph shapes below the baseline */
  height: 15pt;
  /* Don't handle click events; pass clicks through to the svg below. */
  pointer-events: none;
}

`);