Skip to content

Instantly share code, notes, and snippets.

@loopy750
Last active May 13, 2020
Embed
What would you like to do?
Twitch Dark Theme Restorer - Modifies the current Twitch.tv dark theme to resemble its older dark theme.
@-moz-document url-prefix("https://www.twitch.tv"), url-prefix("https://clips.twitch.tv") {
/*
Twitch Dark Theme Restorer
Homepage: https://github.com/loopy750/Twitch-Dark-Theme-Restorer
Twitch: https://www.twitch.tv/loopy750
*/
/* ----------------- */
/* --- Site-wide --- */
/* ----------------- */
/* Main headers: Reduce font size */
h1,
.tw-font-size-2 {
font-size: 3rem !important
}
/* Top navigation menu: Reduce font size */
.tw-font-size-4 {
font-size: 1.65rem !important;
font-weight: normal !important
}
/* Stream title & viewer count */
.tw-mg-r-1 .live-time,
.tw-animated-number.tw-animated-number--monospaced,
.tw-ellipsis.tw-font-size-5.tw-line-clamp-2.tw-strong.tw-word-break-word {
font-size: 1.5rem !important;
font-weight: normal !important
}
/* Semibold fonts: Transform to normal */
.tw-c-text-alt,
.tw-c-text-alt-2,
.tw-semibold {
font-weight: normal !important
}
/* Live asset icon: Position */
.tw-svg__asset.tw-svg__asset--account.tw-svg__asset--live {
margin-right: 1px !important
}
/* Buttons: Lighten/Darken (obsolete in new design) */
.chat-viewers__filter {
filter: invert(12%) !important
}
/* Channel information bar: Adjust padding */
div.tw-block.tw-full-width .channel-banner.channel-banner--open {
padding-bottom: 0.5rem !important
}
/* Channel information bar avatar: Adjust padding */
.tw-full-height.tw-full-width .tw-align-items-center .tw-align-items-center.tw-pd-x-1 {
padding-top: 0.1rem !important
}
/* Channel status: Adjust margin */
div.side-nav-card__live-status.tw-flex-shrink-0.tw-mg-l-05,
div.tw-mg-l-05 .tw-c-text-alt.tw-font-size-6 {
margin-top: 0.7rem !important;
color: rgb(140, 150, 152) !important
}
/* Video player menu: Make transparent */
.simplebar-content .tw-c-background-base.tw-c-text-base,
.tw-absolute.tw-balloon .tw-border-radius-large.tw-c-background-base.tw-c-text-inherit.tw-elevation-3 {
opacity: 0.9 !important
}
/*[[smooth-chat-scroll]]*/
/* ------------------- */
/* --- Light Theme --- */
/* ------------------- */
/* Buttons: Fix background colour */
.tw-root--hover .follow-btn__follow-btn-container,
.tw-root--hover .follow-btn__notification-toggle-container {
filter: invert(10%) !important
}
/* Chat room: Darken background */
.tw-root--hover body,
.tw-root--hover .carousel-player-nav-arrow__container,
.tw-root--hover .chat-room,
.tw-root--hover .chat-room textarea.tw-block,
.tw-root--hover .tw-search-input {
background-color: #F1F1EF !important
}
/* Browse: Darken background */
.tw-root--hover .directory-header-new__banner-cover {
background: linear-gradient(0deg, #F1F1EF, rgba(255, 255, 255, .25)), linear-gradient(90deg, #E7E7E4, rgba(255, 255, 255, .25)) !important
}
/* Top navigation menu: Darken background */
.tw-root--hover .top-nav__menu.tw-c-background-base,
.tw-root--hover .top-nav__menu.tw-c-background-base .tw-avatar.tw-avatar--size-30 {
background-color: #E7E7E4 !important
}
/* Side navigation menu: Darken background */
.tw-root--hover .side-nav__overlay-wrapper,
.tw-root--hover .side-nav {
background-color: #E6E9E9 !important
}
/* Channel header, Channel information bar: Darken background */
.tw-root--hover .channel-header,
.tw-root--hover .channel-info-bar {
background-color: #E7E7E4 !important;
border-left: 1px ridge #DADED9 !important
}
/* Chat room header: Fix background colour */
.tw-root--hover .stream-chat-header,
.tw-root--hover .rooms-header.tw-align-items-center.tw-pd-r-1,
.tw-root--hover .channel-leaderboard-header-rotating.tw-block.tw-relative {
background-color: #E7E7E4 !important
}
/* Users in chat list: Darken background */
.tw-root--hover div.chat-viewers__pane.tw-absolute.tw-bottom-0.tw-flex.tw-flex-column.tw-flex-nowrap {
background-color: #F1F1EF !important
}
/* Sign up division: Darken background */
.tw-border-radius-large.tw-c-background-base.tw-elevation-1.tw-flex.tw-flex-column.tw-mg-1.tw-pd-2 {
background-color: #F6F9F9 !important
}
/* ------------------ */
/* --- Dark Theme --- */
/* ------------------ */
/* Buttons: Fix background colour */
.tw-root--hover.tw-root--theme-dark .follow-btn__follow-btn-container,
.tw-root--hover.tw-root--theme-dark .follow-btn__notification-toggle-container {
filter: invert(3%) !important
}
/* Chat room: Lighten background */
.tw-root--hover.tw-root--theme-dark body,
.tw-root--hover.tw-root--theme-dark .carousel-player-nav-arrow__container,
.tw-root--hover.tw-root--theme-dark .chat-room,
.tw-root--hover.tw-root--theme-dark .chat-room textarea.tw-block,
.tw-root--hover.tw-root--theme-dark .tw-search-input {
background-color: #0F0E11 !important
}
/* Browse: Lighten background */
.tw-root--hover.tw-root--theme-dark .directory-header-new__banner-cover {
background: linear-gradient(0deg, #0F0E11, rgba(0, 0, 0, .25)), linear-gradient(90deg, #37266D, rgba(0, 0, 0, .25)) !important
}
/*[[top-nav-purple]]*/
/* Side navigation menu: Lighten background */
.tw-root--hover.tw-root--theme-dark .side-nav__overlay-wrapper,
.tw-root--hover.tw-root--theme-dark .side-nav {
background-color: #19171C !important
}
/* Channel header, Channel information bar: Lighten background */
.tw-root--hover.tw-root--theme-dark .channel-header,
.tw-root--hover.tw-root--theme-dark .channel-info-bar {
background-color: #18181B !important;
border-left: 1px ridge #252126 !important
}
/*[[channel-info-bar]]*/
/* Chat room header: Fix background colour */
.tw-root--hover.tw-root--hover.tw-root--theme-dark .stream-chat-header,
.tw-root--hover.tw-root--hover.tw-root--theme-dark .rooms-header.tw-align-items-center.tw-pd-r-1,
.tw-root--hover.tw-root--hover.tw-root--theme-dark .channel-leaderboard-header-rotating.tw-block.tw-relative {
background-color: #18181B !important
}
/* Users in chat list: Lighten background */
.tw-root--hover.tw-root--theme-dark div.chat-viewers__pane.tw-absolute.tw-bottom-0.tw-flex.tw-flex-column.tw-flex-nowrap {
background-color: #0F0E11 !important
}
/* Sign up division: Darken background */
.tw-root--hover.tw-root--theme-dark .tw-border-radius-large.tw-c-background-base.tw-elevation-1.tw-flex.tw-flex-column.tw-mg-1.tw-pd-2 {
background-color: #151518 !important
}
}
@loopy750
Copy link
Author

loopy750 commented Sep 27, 2019

Twitch Dark Theme Restorer

Modifies the current Twitch.tv dark theme to resemble its older dark theme.

Using the 'Stylus' or similar browser add-on, enter the code for URL www.twitch.tv, or for advanced Firefox users, userContent.css, for those who prefer to not use an add-on.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment