Allows you to change the default Twitch accent color (with added support for BTTV).
Twitch Custom Accent Color by reezavt
Details
Authorreezavt
LicenseNo License
Categorytwitch
Created
Updated
Size13 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
v1.0
- Initial Release
- Various manual additions where Twitch doesn't use global variables for some reason.
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 Custom Accent Color
@namespace github.com/reezavt
@version 1.0.14
@description Allows you to change the default Twitch accent color (with added support for BTTV).
@author ReezaVT
@preprocessor uso
@var number hue "Hue" [264, 1, 360, 1]
@var range saturation "Saturation" [60, 1, 100, 1, "%"]
==/UserStyle== */
@-moz-document domain("twitch.tv") {
:root {
--accent-hue: /*[[hue]]*/;
--accent-saturation: /*[[saturation]]*/;
--color-accent: hsl(var(--accent-hue), var(--accent-saturation), 50%);
--color-twitch-purple: hsl(var(--accent-hue), var(--accent-saturation), 50%); /* default: #9147ff */
--color-twitch-purple-1: hsl(var(--accent-hue), var(--accent-saturation), 2%); /* default: #040109 */
--color-twitch-purple-2: hsl(var(--accent-hue), var(--accent-saturation), 8%); /* default: #0d031c */
--color-twitch-purple-3: hsl(var(--accent-hue), var(--accent-saturation), 14%); /* default: #15052e */
--color-twitch-purple-4: hsl(var(--accent-hue), var(--accent-saturation), 20%); /* default: #24094e */
--color-twitch-purple-5: hsl(var(--accent-hue), var(--accent-saturation), 26%); /* default: #330c6e */
--color-twitch-purple-6: hsl(var(--accent-hue), var(--accent-saturation), 32%); /* default: #451093 */
--color-twitch-purple-7: hsl(var(--accent-hue), var(--accent-saturation), 38%); /* default: #5c16c5 */
--color-twitch-purple-8: hsl(var(--accent-hue), var(--accent-saturation), 44%); /* default: #772ce8 */
--color-twitch-purple-9: var(--color-twitch-purple);
--color-twitch-purple-10: hsl(var(--accent-hue), var(--accent-saturation), 58%); /* default: #a970ff */
--color-twitch-purple-11: hsl(var(--accent-hue), var(--accent-saturation), 66%); /* default: #bf94ff */
--color-twitch-purple-12: hsl(var(--accent-hue), var(--accent-saturation), 74%); /* default: #d1b3ff */
--color-twitch-purple-13: hsl(var(--accent-hue), var(--accent-saturation), 82%); /* default: #e3d1ff */
--color-twitch-purple-14: hsl(var(--accent-hue), var(--accent-saturation), 90%); /* default: #f0e5ff */
--color-twitch-purple-15: hsl(var(--accent-hue), var(--accent-saturation), 98%); /* default: #fcfaff */
--color-opac-p-1: hsla(var(--accent-hue), var(--accent-saturation), 50%, var(--opac-1));
--color-opac-p-2: hsla(var(--accent-hue), var(--accent-saturation), 50%, var(--opac-2));
--color-opac-p-3: hsla(var(--accent-hue), var(--accent-saturation), 50%, var(--opac-3));
--color-opac-p-4: hsla(var(--accent-hue), var(--accent-saturation), 50%, var(--opac-4));
--color-opac-p-5: hsla(var(--accent-hue), var(--accent-saturation), 50%, var(--opac-5));
--color-opac-p-6: hsla(var(--accent-hue), var(--accent-saturation), 50%, var(--opac-6));
--color-opac-p-7: hsla(var(--accent-hue), var(--accent-saturation), 50%, var(--opac-7));
--color-opac-p-8: hsla(var(--accent-hue), var(--accent-saturation), 50%, var(--opac-8));
--color-opac-p-9: hsla(var(--accent-hue), var(--accent-saturation), 50%, var(--opac-9));
--color-opac-p-10: hsla(var(--accent-hue), var(--accent-saturation), 50%, var(--opac-10));
--color-opac-p-11: hsla(var(--accent-hue), var(--accent-saturation), 50%, var(--opac-11));
--color-opac-p-12: hsla(var(--accent-hue), var(--accent-saturation), 50%, var(--opac-12));
--color-opac-p-13: hsla(var(--accent-hue), var(--accent-saturation), 50%, var(--opac-13));
--color-opac-p-14: hsla(var(--accent-hue), var(--accent-saturation), 50%, var(--opac-14));
--color-opac-p-15: hsla(var(--accent-hue), var(--accent-saturation), 50%, var(--opac-15));
}
/* chat replay */
.video-chat__message-author--me {
background-color: var(--color-twitch-purple-7);
}
.tw-root--theme-dark .video-chat__message-author {
color: var(--color-twitch-purple-11);
}
/* calendar */
.tw-root--theme-dark .pika-button {
color: var(--color-twitch-purple-11);
}
.tw-root--theme-dark .is-rtl .pika-prev:after,
.tw-root--theme-dark .pika-next:after,
.tw-root--theme-dark .is-rtl .pika-next:after,
.tw-root--theme-dark .pika-prev:after {
border-left-color: var(--color-twitch-purple-10);
border-right-color: var(--color-twitch-purple-10);
}
.tw-root--theme-dark .pika-button:hover {
color: var(--color-twitch-purple-10);
}
.tw-root--theme-dark .is-selected .pika-button:hover {
background: rgba(255,255,255,.2);
}
.is-selected .pika-button {
color: white;
background: var(--color-twitch-purple-8);
}
.is-selected:hover .pika-button {
background: var(--color-twitch-purple-7);
}
/* bttv settings */
.bttv-rs-btn-primary,
.bttv-rs-btn-toggle-checked {
background-color: var(--color-twitch-purple-8);
}
.bttv-rs-btn-toggle-checked:hover {
background-color: var(--color-twitch-purple-9);
}
.bttv-rs-btn-primary.bttv-rs-btn-icon.bttv-rs-btn-icon-with-text>.bttv-rs-icon {
background-color: var(--color-twitch-purple-9);
}
.bttv-rs-checkbox-wrapper:before,
.bttv-rs-radio-wrapper:before {
border-color: var(--color-twitch-purple-9);
}
/* bttv emote picker */
.bttv-rs-nav .bttv-rs-dropdown .bttv-rs-dropdown-menu-active~.bttv-rs-dropdown-toggle,
.bttv-rs-nav .bttv-rs-dropdown .bttv-rs-dropdown-menu-active~.bttv-rs-dropdown-toggle:active,
.bttv-rs-nav .bttv-rs-dropdown .bttv-rs-dropdown-menu-active~.bttv-rs-dropdown-toggle:focus,
.bttv-rs-nav .bttv-rs-dropdown .bttv-rs-dropdown-menu-active~.bttv-rs-dropdown-toggle:hover,
.bttv-rs-nav .bttv-rs-nav-item-active>.bttv-rs-nav-item-content,
.bttv-rs-nav .bttv-rs-nav-item-active>.bttv-rs-nav-item-content:active,
.bttv-rs-nav .bttv-rs-nav-item-active>.bttv-rs-nav-item-content:focus,
.bttv-rs-nav .bttv-rs-nav-item-active>.bttv-rs-nav-item-content:hover {
color: var(--color-twitch-purple-8);
}
.bttv-rs-nav-subtle.bttv-rs-nav-vertical .bttv-rs-nav-item>.bttv-rs-nav-item-content:before {
background-color: var(--color-twitch-purple-8);
}
.bttv-rs-btn-link {
color: var(--color-twitch-purple-9);
}
.bttv-rs-btn-link:focus,
.bttv-rs-btn-link:hover {
color: var(--color-twitch-purple-10);
}
.bttv-rs-btn-link.bttv-rs-btn-active,
.bttv-rs-btn-link.bttv-rs-btn-active.focus,
.bttv-rs-btn-link.bttv-rs-btn-active:focus,
.bttv-rs-btn-link.bttv-rs-btn-active:hover,
.bttv-rs-btn-link:active,
.bttv-rs-btn-link:active.focus,
.bttv-rs-btn-link:active:focus,
.bttv-rs-btn-link:active:hover {
color: var(--color-twitch-purple-12);
}
.bttv-rs-input:focus,
.bttv-rs-input:hover {
border-color: var(--color-twitch-purple-8);
}
/* thumbnail selector */
.tw-root--theme-dark .thumbnail-selector-cropper__thumbnail-select-image--selected {
border-color: var(--color-twitch-purple-9);
}
.tw-root--theme-dark .thumbnail-selector-cropper__thumbnail-select-image:hover:before,
.tw-root--theme-light .thumbnail-selector-cropper__thumbnail-select-image:hover:before {
background-color: var(--color-twitch-purple-6);
}
/* video preview */
.tw-root--theme-dark .collection-top-bar:hover .collection-top-bar-text,
.tw-root--theme-light .collection-top-bar:hover .collection-top-bar-text {
color: var(--color-twitch-purple-9);
}
/* highlighter, video editor */
.offset-selector__button:hover,
.tw-root--theme-dark .offset-selector__button:hover,
.offset-selector__end-button:hover,
.tw-root--theme-dark .offset-selector__end-button:hover,
.tw-root--theme-light .offset-selector__button:hover,
.tw-root--theme-light .offset-selector__end-button:hover {
background-color: transparent;
}
.tw-root--theme-dark .offset-selector__input-button:hover,
.tw-root--theme-light .offset-selector__input-button:hover {
background-color: var(--color-background-interactable-hover);
}
.tw-root--theme-dark .playhead-dropdown__icon,
.tw-root--theme-dark .playhead-pin__pin {
background-color: var(--color-twitch-purple-10);
}
.tw-root--theme-dark .playhead-pin__draggable {
background-color: var(--color-twitch-purple-10);
border-color: var(--color-twitch-purple-10) !important;
}
/* clip page */
.tw-root--theme-dark .clips-top-nav-user {
background-color: var(--color-twitch-purple-3);
}
.tw-root--theme-dark .clmgr-table__row-expanded {
border-color: var(--color-twitch-purple-9);
}
/* analytics page */
.tw-root--theme-dark .top-stats-tab--active .top-stats-tab__title,
.tw-root--theme-dark .top-stats-tab--active {
color: var(--color-twitch-purple-11);
}
.tw-root--theme-dark .top-stats-tab:hover {
border-bottom-color: var(--color-twitch-purple-11);
box-shadow: inset 0 -2px 0 var(--color-twitch-purple-11), 0 4px 6px -4px var(--color-twitch-purple-11);
}
.tw-root--theme-dark .top-stats-tab--active {
box-shadow: 0 calc(var(--border-width-default)*-3) 0 var(--color-twitch-purple-10) inset;
}
/* bits menu */
.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-6);
}
.tw-root--theme-dark .cheermote-tier-selector__item-button:focus:not([disabled]),
.tw-root--theme-dark .cheermote-tier-selector__item-button:hover:not([disabled]) {
background-color: var(--color-twitch-purple-...