Modifies the current Twitch.tv dark theme to resemble its older dark theme.
Twitch Dark Theme Enhancer by loopy750
Details
Authorloopy750
LicenseNONE
Categoryuserstyles.org
Created
Updated
Size16 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Twitch Dark Theme Enhancer
@namespace USO Archive
@author loopy750
@description Modifies the current Twitch.tv dark theme to resemble its older dark theme.
@version 20231128.20.06
@license NONE
@preprocessor uso
@advanced dropdown a "-" {
b "-*" <<<EOT EOT;
c "-" <<<EOT EOT;
}
@advanced dropdown channel-info-bar "Channel Info Background Colour" {
ChannelInfoBG_Grey "Grey*" <<<EOT background-color: #18181B !important;
border-left: 1px ridge #252126 !important EOT;
ChannelInfoBG_Def "Default" <<<EOT background-color: unset EOT;
ChannelInfoBG_Grey_G "Grey (Gradient)" <<<EOT background: linear-gradient(0deg, #0E0E10, rgba(0, 0, 0, .25)), linear-gradient(150deg, rgb(46, 46, 48), rgba(0, 0, 0, .25)) !important EOT;
ChannelInfoBG_Pur_G "Purple (Gradient)" <<<EOT background: linear-gradient(0deg, #0F0E11, rgba(0, 0, 0, .25)), linear-gradient(150deg, #37266D, rgba(0, 0, 0, .25)) !important EOT;
}
@advanced dropdown hide-chat-border "Hide Chat Border" {
chat_border_disabled "Disabled*" <<<EOT EOT;
chat_border_enabled "Enabled" <<<EOT .Layout-sc-1xcs6mc-0 {
border-left: none !important
}
EOT;
}
@advanced dropdown hide-footer "Hide Footer" {
footer_enabled "Enabled*" <<<EOT /* Hide Footer *\/
#twilight-sticky-footer-root {
display: none !important;
}
EOT;
footer_disabled "Disabled" <<<EOT /* Hide Footer: Option disabled *\/
EOT;
}
@advanced dropdown live-time-format "Live Time Format (Experimental)" {
Live_Time_hmms "h:mm:ss (Default)*" <<<EOT content: '' EOT;
Live_Time_hmm "h:mm" <<<EOT max-width: 30px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: '' !important;
display: block !important; EOT;
Live_Time_remove "Remove" <<<EOT display: none !important; EOT;
}
@advanced dropdown smooth-chat-scroll "Smooth Chat Scrolling" {
SmoothScroll_Enabled "Enable*" <<<EOT scroll-behavior: smooth !important
}
@supports (-moz-appearance: none) {
.chat-room__content div.scrollable-area div.simplebar-scroll-content:not(:hover),
.chat-room__content div.simplebar-scroll-content div.simplebar-content:not(:hover) {
width: 100% !important;
overflow-y: hidden !important
}
EOT;
SmoothScroll_Disable "Disable" <<<EOT scroll-behavior: auto !important
EOT;
}
@advanced dropdown top-nav-purple "Top Navigation Menu" {
TopNav_Purple "Purple*" <<<EOT background-color: #37266D !important EOT;
TopNav_Default "Grey" <<<EOT background-color: #18181B !important EOT;
}
==/UserStyle== */
@-moz-document url-prefix("https://www.twitch.tv"), url-prefix("https://clips.twitch.tv") {
/* ----------------- */
/* --- Site-wide --- */
/* ----------------- */
/* Main headers: Reduce font size */
.CoreText-sc-cpl358-0.ScTitleText-sc-1gsen4-0.kUBEnB.gasGNr.tw-title,
.CoreText-sc-cpl358-0.ScTitleText-sc-1gsen4-0.dEuQyA.fakvtp.tw-title,
.CoreText-sc-cpl358-0.ScTitleText-sc-1gsen4-0.beejGj.fakvtp.tw-title,
.CoreText-sc-cpl358-0.ScTitleText-sc-1gsen4-0.kGpodG.gasGNr.tw-title,
.sc-AxirZ.ScTitleText-sc-1gsen4-0.ipNmNI.tw-title,
.sc-AxirZ.ScTitleText-sc-1gsen4-0.gAYdrP.tw-title,
h1,
.tw-font-size-2,
.ipNmNI.tw-title,
.gAYdrP.tw-title {
font-size: 3rem !important
}
/* Top navigation menu: Reduce font size */
.tw-title,
.lkYZxg .tw-title,
.sc-AxjAm.bFphK,
.tw-font-size-4 {
font-size: 1.65rem !important;
font-weight: normal !important
}
.CoreText-sc-1txzju1-0.ScTitleText-sc-d9mj2s-0.kcPfws.ezNtJL.tw-title,
.CoreText-sc-1txzju1-0.ScTitleText-sc-d9mj2s-0.MGmly.igzOaC.tw-title,
.CoreText-sc-1txzju1-0.ScTitleText-sc-d9mj2s-0.hCyyEb.ezNtJL.tw-title,
.CoreText-sc-cpl358-0.ScTitleText-sc-1gsen4-0.eVJEzK.bMnEsX.tw-title,
.CoreText-sc-cpl358-0.ScTitleText-sc-1gsen4-0.fjVUJF.bMnEsX.tw-title {
font-size: 2.5rem !important;
font-weight: normal !important
}
/* Stream title & viewer count */
.sc-AxirZ.cUlgmo,
.channel-info-content .tw-c-text-alt-2,
.gzJsTf .live-time,
.sc-AxiKw .hDWwrj,
.sc-pzMyG.eysNAy,
.tw-animated-number.tw-animated-number--monospaced,
.tw-ellipsis.tw-font-size-5.tw-line-clamp-2.tw-strong.tw-word-break-word,
.ffz-stat.tw-align-items-center.tw-align-middle {
font-size: 1.5rem !important;
font-weight: normal !important
}
/* Semibold fonts: Transform to normal */
.CoreText-sc-1txzju1-0.ieBkYF,
.CoreText-sc-1txzju1-0.kyRSfG,
.CoreText-sc-1txzju1-0.rcFft,
.CoreText-sc-1txzju1-0.dtzjDk,
.CoreText-sc-1txzju1-0.kxUZOm,
.CoreText-sc-1txzju1-0.fdYGpZ,
.CoreText-sc-1txzju1-0.lnnKUr,
.CoreText-sc-1txzju1-0.iUzxZP,
.CoreText-sc-1txzju1-0.iQYdBM,
.CoreText-sc-1txzju1-0.gBAboc,
.CoreText-sc-cpl358-0.fntqRM,
.ScTagText-sc-xzp4i-2.eMoqSY,
.ScTag-sc-14s7ciu-0.bOVWlO.tw-tag,
.CoreText-sc-cpl358-0.dGUHAp,
.CoreText-sc-cpl358-0.ilJsSZ,
.CoreText-sc-cpl358-0.gYupEs.InjectLayout-sc-588ddc-0.emHXNr,
.CoreText-sc-cpl358-0.fnnwmm.InjectLayout-sc-588ddc-0.fTYBwJ,
.CoreText-sc-cpl358-0.ekRRIm,
.ScAnimatedNumber-sc-acnd2k-0.fIFzBf,
.ScAnimatedNumber-sc-1iib0w9-0.hERoTc,
.ScTagContent-sc-xzp4i-1.iYcwjl,
.CoreText-sc-cpl358-0.fOZtfX,
.CoreText-sc-cpl358-0.gwuOHV,
.CoreText-sc-cpl358-0.flEeqM,
.ScTag-sc-xzp4i-0.fHyEvT.tw-tag,
.ScTruncateText-sc-i3kjgq-0.ickTbV,
.ScAnimatedNumber-sc-acnd2k-0.cIxmzd,
.ScAnimatedNumber-sc-acnd2k-0.bHSmOZ,
.CoreText-sc-cpl358-0.hSTXRs.InjectLayout-sc-588ddc-0.ecXQMX,
.kfuhZW,
.dRrnwM,
.cTGYGP.ispdkM,
.jnNOQj,
.bjXXAY,
.sc-AxirZ.eAXpco,
.sc-AxirZ.cUlgmo,
.sc-AxirZ.cvDvvT,
.ScTagContent-xzp4i-1.jAVAzd,
.sc-AxheI,
.sc-AxgMl.hIHXBT,
.sc-pRTZB.bKnJeX,
.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 */
.jfVDhh,
.chat-viewers__filter,
.side-nav-card__live-status,
.sc-fzozJi.sc-fzpans.fEINUM {
filter: invert(15%) !important
}
/* Channel information bar: Adjust padding */
.bIubrA,
.fdDGVb,
div.tw-block.tw-full-width .channel-banner.channel-banner--open {
padding-bottom: 0.5rem !important
}
/* Channel information bar avatar: Adjust padding */
.fdDGVb,
.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 */
.side-nav-card__live-status,
.sc-AxjAm.gyevzD.side-nav-card__live-status,
.sc-AxirZ.wshJJ,
.sc-AxiKw .fXQGUA,
.sc-AxgMl.jxsNUG,
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(138, 140, 144) !important
}
/* Time display: Remove seconds (experimental) */
.gzJsTf .live-time {
/*[[live-time-format]]*/
}
/* Video player menu: Make transparent */
.ScBalloonWrapper-sc-14jr088-0.cWxeSu.InjectLayout-sc-1i43xsx-0.deTqzm.tw-balloon,
.ScBalloonWrapper-sc-14jr088-0.bzQeNe.CpjkP.InjectLayout-sc-1i43xsx-0.tw-balloon,
.ScCoreButton-sc-1qn4ixc-0.ffyxRu.ScButtonIcon-sc-o7ndmn-0.kqUZki,
.Layout-sc-1xcs6mc-0 .gdUPAO,
.Layout-sc-nxg1ff-0 .kobNEz,
.Layout-sc-nxg1ff-0 .bEZOnd,
.joiQlw,
.kjsYAe,
.sc-AxjAm .cnGpgF,
.ScBalloonWrapper-jzdqb5-0,
.cYCcIS,
.sc-Axmtr.eLkNAb,
.Layout-sc-1xcs6mc-0.dfCXFq,
.Layout-sc-nxg1ff-0.cTompz,
.Layout-sc-1xcs6mc-0.ibyWQL,
.Layout-sc-1xcs6mc-0.dfCXFq,
.ScBalloonWrapper-sc-jzdqb5-0,
.ScTransitionBase-sc-hx4quq-0.jJXXMJ,
.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 {
border-radius: 8px;
opacity: 0.92 !important
}
.Layout-sc-1xcs6mc-0.fTJaQo.disclosure-tool {
display: none !important
}
/* Chat scrolling: smooth */
.chat-room__content div.scrollable-area div.simplebar-scroll-content,
.chat-room__content div.simplebar-scroll-content div.simplebar-content {
/*[[smooth-chat-scroll]]*/
}
.Layout-sc-1xcs6mc-0.kLjaOI.disclosure-card {
display: none !important
}
/*[[hide-footer]]*/
/* ------------------- */
/* --- Light Theme --- */
/* ------------------- */
/* Buttons: Fix background colour */
.tw-root--hover .channel-leaderboard,
.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 .Layout-sc-1xcs6mc-0 .jWHzQH,
.tw-root--hover .chat-input__textarea textarea,
.tw-root--hover .tw-search-input input,
.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,
.tw-root--hover .tw-search-input .tw-relative input,
.tw-root--hover .tw-block.tw-pd-0 .tw-relative .chat-input__textarea textarea {
background-color: #F1F1EF !important
}
/* Browse: Darken background */
.tw-root--hover .directory-header-new__banner-cover {
margin-left: -30px !important;
padding-left: 30px !important;
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-root--hover .to...