blue youtube accent
blue youtube accent by editthis
Details
Authoreditthis
LicenseNo License
Categoryyoutube
Created
Updated
Size6.9 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
/* ==UserStyle==
@name Youtube Custom Accent Color
@version 20220423.13.12
@namespace userstyles.world/user/adreaskar
@description A CSS style to make the Youtube page more personal with a custom accent color (can be modified at the beggining of the code, in the variable labed as --color). Works best with native dark theme enabled.
@author adreaskar
@license No License
==/UserStyle== */
@-moz-document url-prefix("https://www.youtube.com/") {
/*================================================================
Youtube Custom Accent Color
by Andreas Karabetian
v1.5
Last updated: 23/04/2022
================================================================*/
:root {
--color: #52e2ff;
}
/* Channel name */
yt-formatted-string[has-link-only_]:not([force-default-style]) a.yt-simple-endpoint.yt-formatted-string {
color: var(--color) !important;
}
#channel-name.ytd-video-meta-block {
--ytd-channel-name-badges-margin-right: 8px;
--ytd-channel-name-text-display: block;
--ytd-channel-name-text-complex-display: flex;
--yt-endpoint-color: var(--yt-spec-text-secondary);
--yt-endpoint-visited-color: var(--color);
color: var(--yt-spec-text-secondary);
}
yt-formatted-string[has-link-only_]:not([force-default-style]) a.yt-simple-endpoint.yt-formatted-string:visited {
color: var(--color);
}
/* Like button */
button[aria-pressed="true"] > yt-icon:not(#guide-icon.ytd-app), [id$="-replies"].ytd-comment-replies-renderer > .ytd-button-renderer > paper-button, [id$="-replies"].ytd-comment-replies-renderer > .ytd-button-renderer > paper-button > yt-icon {
fill: var(--color) !important;
color: var(--color) !important;
}
/* Progress bar on thumbnail */
#progress.ytd-thumbnail-overlay-resume-playback-renderer {
background-color: var(--color);
}
/* Tick badge */
yt-icon.ytd-badge-supported-renderer {
color: var(--color);
}
/* Left panel option highlights */
ytd-mini-guide-entry-renderer[active] .guide-icon.ytd-mini-guide-entry-renderer {
color: var(--color);
}
ytd-guide-entry-renderer[active] .guide-icon.ytd-guide-entry-renderer {
color: var(--color);
}
ytd-guide-entry-renderer[active] .title.ytd-guide-entry-renderer {
color:var(--color);
}
ytd-guide-entry-renderer[active] {
background:transparent;
}
paper-item:focus::before, .paper-item.paper-item:focus::before {
background:transparent
}
/* Contribute button */
ytd-button-renderer.style-suggestive[is-paper-button] {
--yt-formatted-string-deemphasize-color: var(--yt-blue-opacity-lighten-2);
background-color: transparent;
color: var(--color);
}
ytd-button-renderer.style-suggestive[is-paper-button] tp-yt-paper-button.ytd-button-renderer {
border: 1px solid var(--color);
padding: var(--yt-button-padding-minus-border);
}
/* Current tab in channel */
paper-tab.iron-selected.ytd-c4-tabbed-header-renderer {
color: var(--color);
}
/* New Video by channel */
#newness-dot.ytd-guide-entry-renderer {
background-color: var(--color);
}
/* Search box highlight */
ytd-searchbox[has-focus] #container.ytd-searchbox {
border: 1px solid var(--color);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}
/* Border on thumbnail */
/*ytd-thumbnail.ytd-rich-grid-video-renderer {
width: 100%;
position: relative;
border-left: solid;
border-color: var(--color);
border-width: 3px;
}*/
/* Channel name on side */
#text.ytd-channel-name {
color: var(--color);
}
/* Posts author title */
ytd-post-renderer[uses-compact-lockup_] #author-text.yt-simple-endpoint.ytd-post-renderer {
color: var(--color);
}
/* Bell notifications */
.yt-spec-icon-badge-shape--type-notification .yt-spec-icon-badge-shape__badge {
background-color: var(--color)
}
/* Youtube Logo */
#logo-icon path:nth-child(1) {
fill:var(--color) !important;
}
#youtube-paths path:nth-child(1){
fill: white !important;
}
/* Channel tabs bottom bar */
#selectionBar.paper-tabs {
border-bottom:2px solid var(--color);
}
/* Sidebar titles */
#guide-section-title.ytd-guide-section-renderer {
color:var(--color);
}
/* Subscribe Button */
tp-yt-paper-button.style-scope.ytd-subscribe-button-renderer {
background-color:var(--color);
}
tp-yt-paper-button.ytd-subscribe-button-renderer[subscribed]{
background-color: var(--yt-spec-badge-chip-background);
}
#notification-preference-button.style-scope.ytd-subscribe-button-renderer{
background-color: #f000!important;
}
/* Links */
a.yt-simple-endpoint.yt-formatted-string {
color:lightskyblue !important;
}
/* View replies link */
.more-button.ytd-comment-replies-renderer, .less-button.ytd-comment-replies-renderer {
color: lightskyblue !important;
}
/* Account circle */
yt-img-shadow.ytd-topbar-menu-button-renderer {
border:2px solid var(--color);
}
/* Auto play enabled */
paper-toggle-button[checked]:not([disabled]) .toggle-button.paper-toggle-button {
background-color:var(--color);
}
/* P L A Y E R */
/* Video bar */
.ytp-swatch-background-color {
background-color:var(--color);
}
.ytp-volume-slider-track, .ytp-volume-slider-handle:before {
background: var(--color) !important;
z-index: -117;
}
.ytp-settings-button.ytp-hd-quality-badge::after, .ytp-settings-button.ytp-4k-quality-badge::after, .ytp-settings-button.ytp-5k-quality-badge::after, .ytp-settings-button.ytp-8k-quality-badge::after, .ytp-settings-button.ytp-3d-badge::after {
background-color: var(--color) !important;
}
.ytp-swatch-color {
color: var(--color) !important;
}
.ytp-menuitem[aria-checked="true"] .ytp-menuitem-toggle-checkbox {
background: var(--color) !important;
}
.ytp-chrome-controls .ytp-button.ytp-youtube-button:hover:not([aria-disabled="true"]):not([disabled]) .ytp-svg-fill-logo-tube-lozenge {
fill: var(--color) !important;
}
.ytp-cued-thumbnail-overlay:hover .ytp-large-play-button-bg, .ytp-large-play-button.ytp-touch-device .ytp-large-play-button-bg {
fill: var(--color) !important;
}
.resume-playback-progress-bar {
background: var(--color) !important;
}
.ytp-chrome-controls .ytp-button[aria-pressed]::after {
background-color: var(--color) !important;
}
.yt-uix-checkbox-on-off input-extras2-disabled[type="checkbox"]:checked + label {
background-color: var(--color) !important;
}
.video-extras-sparkbar-likes-extras2-disabled {
background-color: var(--color) !important;
}
/* END P L A Y E R */
/* New video dot */
ytd-notification-renderer.unread #new.ytd-notification-renderer {
background-color:var(--color);
}
/* Account Popup */
#account-name.ytd-active-account-header-renderer {
color:var(--color);
}
}