Decent Twitch looks

darktv.user.css

/* ==UserStyle==
@name        Dark.tv
@description Makes Twitch look decent. Replaces purple overtones with orange/grey ones.
@namespace   CheerySoup
@author      Yanrishatum
@version     1.1.0
@license     mit
@advanced dropdown squares "Border corners" {
  yes "Square" <<<EOT
    --border-radius-large: 0px;
    --border-radius-medium: 0px;
    --border-radius-none: 0;
    --border-radius-rounded: 9000px;
    --border-radius-small: 0px; EOT;
  no "Rounded" <<<EOT
EOT;
}
@advanced dropdown mini-badges "Chat badge sizes (FFZ required)" {
  small "Small" <<<EOT
  .chat-line__message--badges > .ffz-badge {
    background-size: 1rem!important;
    min-width: 10px;
    transition: all 0.2s ease;
    position: relative;
  }

  .chat-line__message--badges > .ffz-badge:hover {
    background-size: 1.8rem!important;
  }

  .chat-badge,
  .chat-line__message--badges > .ffz-badge {
    border-radius: 0px;
    width: 10px !important;
    height: 10px !important;
    margin-bottom: 5px;
    margin-top: 5px;
  }

  .chat-badge:hover,
  .chat-line__message--badges > .ffz-badge:hover {
    width: 20px !important;
    height: 20px !important;
    margin-right: -7px;
    margin-bottom: 0px;
    margin-top: 0px;
    z-index: 10;
  }

  .drag-and-drop-layout-scrollable-area__expanded-view .drag-and-drop-layout > div {
    margin-left: 1em!important;
    margin-right: 1em!important;
  }

  .ffz__tooltip--arrow,
  .ffz__tooltip {
    background-color: var(--bg-color)!important;
    color: white !important;
  }

  .ffz--highlight {
    background-color: rgb(89, 163, 255);
  } EOT;
  regular "Regular" <<<EOT

  EOT;
}
==/UserStyle== */

@-moz-document domain("twitch.tv") {
  /** Applies to: URLs on the domain: twitch.tv **/
  :root {

    --color-twitch-purple: #ffad70;
    --color-twitch-purple-1: #040109;
    --color-twitch-purple-2: #241103;
    --color-twitch-purple-3: #241204;
    --color-twitch-purple-4: #5b2d0a;
    --color-twitch-purple-5: #793a0a;
    --color-twitch-purple-6: #95480e;
    --color-twitch-purple-7: #c15e14;
    --color-twitch-purple-8: #b5550f;
    --color-twitch-purple-9: #7d3600;
    --color-twitch-purple-10: #ffad70;
    --color-twitch-purple-11: #ff8b35;
    --color-twitch-purple-12: #ffd7ba;
    --color-twitch-purple-13: #ffe4cf;
    --color-twitch-purple-14: #ffefe3;
    --color-twitch-purple-15: #fffbf9;

    --color-opac-p-1: rgba(255, 173, 112, .025);
    --color-opac-p-10: rgba(255, 173, 112, 0.7);
    --color-opac-p-11: rgba(255, 173, 112, 0.75);
    --color-opac-p-12: rgba(255, 173, 112, 0.8);
    --color-opac-p-13: rgba(255, 173, 112, 0.85);
    --color-opac-p-14: rgba(255, 173, 112, 0.9);
    --color-opac-p-15: rgba(255, 173, 112, 0.95);
    --color-opac-p-2: rgba(255, 173, 112, 0.1);
    --color-opac-p-3: rgba(255, 173, 112, 0.15);
    --color-opac-p-4: rgba(255, 173, 112, 0.2);
    --color-opac-p-5: rgba(255, 173, 112, 0.25);
    --color-opac-p-6: rgba(255, 173, 112, 0.3);
    --color-opac-p-7: rgba(255, 173, 112, 0.4);
    --color-opac-p-8: rgba(255, 173, 112, 0.5);
    --color-opac-p-9: rgba(255, 173, 112, 0.6);

    --color-hinted-grey-1: #111;
    --color-hinted-grey-2: #0f0f0f;
    --color-hinted-grey-3: #151515;
    --color-hinted-grey-4: #202020;
    --color-hinted-grey-5: #2f2f2f;
    --color-hinted-grey-6: #4d4d4d;
    --color-hinted-grey-7: #6a6a6a;
    --color-hinted-grey-8: #7b7b7b;
    --color-hinted-grey-9: #8c8c8c;
    --color-hinted-grey-10: #bfbfbf;
    --color-hinted-grey-11: #ccc;
    --color-hinted-grey-12: #d5d5d5;
    --color-hinted-grey-13: #e8e8e8;
    --color-hinted-grey-14: #eee;
    --color-hinted-grey-15: #f7f7f7;


    --color-accent: #ff9342;

    /* Old */
    --bg-color: #1c1c1c;
    --bg-alt-color: #161616;
    --bg-alt2-color: #141414;

    --bg-textarea: #222;

    --nav-link-active: #404040;
    --nav-link-hover: #5c5c5c;

    --link-color: #ff8b34;
    --link-hover: #ffad70;

    --border: #070707
  }

  .tw-root--theme-dark {
    --color-background-input-focus: #313131;
    --color-background-body: #151515;
    /** I love dem squares */
    /*[[squares]]*/

  }

  .tw-root--theme-dark body,
  .rooms-header {
    background-color: var(--color-background-body)
  }

  .player-button--highlighted svg,
  .player-button:hover:enabled svg {
    fill: var(--color-twitch-purple-11);
  }
  .ffz--player-pip:hover:before,
  .ffz--player-reset:hover:before {
    color: var(--color-twitch-purple-11);
  }
  .tw-root--theme-dark .side-nav__overlay-wrapper {
    background-color: var(--color-hinted-grey-2);
  }

  ::selection {
    background: #a26335;
  }

  .t-bits-card__footer,
  .tw-root--theme-dark .t-bits-card__footer,
  .tw-root--theme-light .t-bits-card__footer {
    background-color: var(--color-twitch-purple-4);
  }

  .tw-root--theme-dark .chat-room {
    background-color: var(--color-background-base);
  }

  .tw-root--theme-dark .chat-line__message.bttv-split-chat-alt-bg,
  .tw-root--theme-dark .vod-message.bttv-split-chat-alt-bg {
    background-color: var(--color-background-alt)!important;
  }

  .tw-root--theme-dark .navigation-link.active,
  .tw-root--theme-dark .navigation-link:hover,
  .tw-root--theme-dark .top-nav__external-link:hover {
    color: var(--color-text-link);
  }
  .bits-leaderboard-expanded__section-break {
    border-color: var(--color-twitch-purple-7);
  }
  .tw-root--theme-dark .chat-viewers__pane {
    background: var(--color-background-base);
  }

  /** Player stuff */
  .pl-button,
  .preview-overlay__button {
    background-color: var(--color-twitch-purple-8);
  }
  .pl-button:hover,
  .preview-overlay__button {
    background-color: var(--color-twitch-purple-11);
  }
  .theme--dark .pl-button:focus,
  .theme--dark .preview-overlay__button:focus {
    background-color: var(--color-twitch-purple);
    box-shadow: 0 0 6px 0 var(--color-twitch-purple-7), inset 0 0 0 1px var(--color-twitch-purple-6)
  }
  .player a.player-text-link--no-color:hover,
  .tw-root--theme-dark .chat-viewers-list__button {
    color: var(--color-text-link);
  }
  .player-slider__left {
    background-color: var(--color-twitch-purple-7);
  }

  .pl-card--withborder .pl-card__layout {
    box-shadow: 0 0 0 2px var(--color-twitch-purple-11);
  }
  .pl-card--withborder .pl-card__layout:hover {
    box-shadow: 0 0 0 2px var(--color-twitch-purple-10);
  }
  .pl-card__overlay .pl-card__info,
  .theme--dark .pl-card__overlay .pl-card__info,
  .theme--light .pl-card__overlay .pl-card__info {
    color: var(--color-twitch-purple-11);
  }
  .pl-card__smallicon svg {
    fill: var(--color-twitch-purple-11);
  }

  .theme--dark .pl-menu,
  .theme--dark .pl-menu a,
  .theme--dark .pl-menu button {
    color: var(--color-text-base);
  }
  .pl-menu__item--block button:focus {
    outline-color: var(--color-twitch-purple-10);
  }
  /* --color-background-button-primary-default */
  .pl-menu__item--block button:focus,
  .pl-menu__item--block button:hover,
  .theme--dark .pl-menu__item--block button:focus,
  .theme--dark .pl-menu__item--block button:hover {
    background-color: var(--color-background-button-primary-hover);
  }
  .pl-menu__item--block button:focus .pl-pill,
  .pl-menu__item--block button:hover .pl-pill,
  .theme--dark .pl-menu__item--block button:focus .pl-pill,
  .theme--dark .pl-menu__item--block button:hover .pl-pill,
  .theme--light .pl-menu__item--block button:focus .pl-pill,
  .theme--light .pl-menu__item--block button:hover .pl-pill {
    background-color: var(--color-background-button-primary-default);
  }
  .theme--dark .pl-menu__item--block button:active,
  .pl-menu__item--block button:active {
    color: var(--color-twitch-grey-15);
  }
  .theme--dark .pl-menu__item--active button {
    background-color: var(--color-twitch-purple-4);
  }

  /*[[mini-badges]]*/

  /** Old stuff I still want to sort out */
  /*
.tw-root--theme-dark .chat-viewers__pane,
.tw-root--theme-dark .twilight-root {
    background-color: var(--bg-color)!important;
}

.tw-root--theme-dark .channel-header,
.tw-root--theme-dark .top-nav__menu,
.tw-root--theme-dark .drag-and-drop-card-placeholder,
.tw-root--theme-dark .tw-c-background-alt {
    background-color: var(--bg-alt-color)!important;
}

.tw-root--theme-dark .channel-info-bar,
.tw-root--theme-dark .chat-viewers__header,
.tw-root--theme-dark .t-bits-card__footer,
.tw-root--theme-dark .side-nav__overlay-wrapper, .tw-root--theme-dark .side-nav__theme-wrapper,
.tw-root--theme-dark .tw-input,
.tw-root--theme-dark .tw-select,
.tw-root--theme-dark .tw-c-background-alt-2 {
    background-color: var(--bg-alt2-color)!important;
}

.tw-root--theme-dark .chat-line__message.bttv-split-chat-alt-bg, .tw-root--theme-dark .vod-message.bttv-split-chat-alt-bg,
.tw-root--theme-dark .tw-c-background-base,.tw-root--theme-dark .tw-textarea {
    background-color:var(--bg-textarea)!important;
}

.tw-root--theme-dark .dashboard-side-nav__link--active {
    background-color: var(--nav-link-active)!important;
}

.tw-root--theme-dark .dashboard-side-nav__link:hover {
    background-color: var(--nav-link-hover)!important;
}

.tw-root--theme-dark .tw-pill,
.tw-root--theme-dark .tw-pill--brand {
    background-color: #662516;
}
.tw-pill--overlay, .tw-root--theme-dark .tw-pill--overlay, .tw-root--theme-light .tw-pill--overlay {
   box-shadow:  0 0 0 1px #000000a6
}

.tw-root--hover .tw-button:hover, .tw-root--theme-dark.tw-root--hover .tw-button:hover, .tw-root--theme-light.tw-root--hover .tw-button:hover,
.tw-button:focus, .tw-root--theme-dark .tw-button:focus, .tw-root--theme-light .tw-button:focus,
.tw-root--theme-dark .tw-border-b, .tw-root--theme-dark .tw-border-t, .tw-root--theme-dark .tw-border-r,
.bits-leaderboard-expanded__section-break,
.tw-root--theme-dark .chat-viewers__header,
.tw-root--theme-dark .tw-input,
.tw-root--theme-dark .channel-header,
.tw-root--theme-dark .emote-picker__content-block:not(:first-child),
.tw-root--theme-dark .tw-select,
.tw-root--theme-dark .tw-border-l, .tw-root--theme-dark .tw-textarea {
    border-color: var(--border)!important;
}

.tw-root--theme-dark .tw-tab-wrapper {
    box-shadow: inset 0 -1px 0 var(--border);
}

.tw-root--theme-dark .tw-tab:not(.tw-tab--disabled) .tw-tab__link.tw-tab__link--active {
  box-shadow: inset 0 -1px 0 var(--link-color);
}
.tw-root--theme-dark.tw-root--hover .tw-tab:not(.tw-tab--disabled) .tw-tab__link:hover, .tw-root--theme-light.tw-root--hover .tw-tab:not(.tw-tab--disabled) .tw-tab__link:hover {
  box-shadow: inset 0 -1px 0 var(--link-hover);
}


.tw-root--theme-dark .emote-picker__tab--active {
    border-color: #959595;
}

.tw-root--theme-dark .tw-button--overlay.tw-button--hollow,
.tw-root--theme-dark .tw-button--hollow,
.emote-picker__tab--active, .emote-picker__tab:hover, .tw-root--theme-dark .emote-picker__tab:hover, .tw-root--theme-light .emote-picker__tab:hover {
    border-color: #4b4b4b;
}

.tw-root--theme-dark .mention-fragment {
    background-color: #4d2715;
}

.tw-root--theme-dark .tw-input,
.tw-root--theme-dark .tw-select,
.tw-button, .tw-root--theme-dark .tw-button, .tw-root--theme-light .tw-button,
.tw-root--theme-dark .tw-textarea {
    border-radius: 0px!important;
    
}

.tw-root--theme-dark .mention-fragment--recipient {
    background-color: #faf9fa;
    color: #19171c;
}

.tw-root--theme-dark.tw-root--hover .tw-interactable--inverted:hover,
.tw-root--theme-dark .scrollable-area .simplebar-track .simplebar-scrollbar,
.tw-button, .tw-root--theme-dark .tw-button, .tw-root--theme-light .tw-button {
    background-color: #2f2f2f!important;
}

.tw-root--theme-dark.tw-root--hover .tw-button-icon:focus,
.tw-root--theme-dark .tw-button-icon:focus {
    background: rgba(124, 124, 124, .2);
    border-color: rgba(47, 47, 47, .4);
}

.tw-root--theme-dark.tw-root--hover .tw-button-icon:hover,
.tw-root--theme-dark.tw-root--hover .tw-button-icon--secondary:hover {
    background: rgba(73, 73, 73, .2);
}

.tw-root--theme-dark .tw-checkbox__label:before,
.tw-root--theme-dark .tw-button-icon:focus,
.tw-button:focus, .tw-root--theme-dark .tw-button:focus, .tw-root--theme-light .tw-button:focus,
.tw-input:focus, .tw-root--theme-dark .tw-input:focus, .tw-root--theme-light .tw-input:focus,
.tw-root--theme-dark .tw-textarea:focus, .tw-root--theme-light .tw-textarea:focus, .tw-textarea:focus {
    box-shadow: 0 0 6px -2px #9c9c9c
}

.tw-root--theme-dark .tw-checkbox__label:before {
    box-shadow: inset 0 0 0 1px var(--link-color), 0 0 0 transparent!important;
}
.tw-checkbox__input:checked+.tw-checkbox__label:before, .tw-root--theme-dark .tw-checkbox__input:checked+.tw-checkbox__label:before, .tw-root--theme-light .tw-checkbox__input:checked+.tw-checkbox__label:before {
    background-color: var(--link-color)!important;
    box-shadow: inset 0 0 0 1px var(--link-color)
}

.tw-root--theme-dark .room-picker__label--active-main:after, .tw-root--theme-light .room-picker__label--active-main:after {
    border-color: var(--link-color)!important;
}

.tw-root--theme-dark a,
.tw-root--theme-dark .tw-c-text-link {
    color: var(--link-color)!important;
}

.tw-root--theme-dark a:hover {
    color: var(--link-hover)!important;
}

.tw-root--theme-dark .chat-line__message.bttv-highlighted,
.tw-root--theme-dark .vod-message.bttv-highlighted,
.ffz-mentioned
{
    background-color: #7c2e0a!important;
}
*/
}