Authorlesboy
LicenseNo License
Categoryhttps://studio.youtube.com
Created
Updated
Size38 kB
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
YouTube Studio styled to fit with Firefox's default dark mode!
Also works well with my YouTube Firefox theme! Made sure they wouldn't overlap wrt certain elements, like menus and such, since many share names and thus can cause some weird visual hiccups.
Feel free to edit this theme as you wish! Would prefer credit, but not super uppity about it.
Hope you like it! Makes me happy anyone at all uses my themes :)
/* ==UserStyle==
@name Youtube Studio Firefox
@namespace github.com/openstyles/stylus
@version 6.9
@description Changes YT Studio to be compliant with my own personal Youtube theme! Feel free to edit as you wish w/ credit :)
@author Lesboy
==/UserStyle== */
@-moz-document domain("studio.youtube.com") {
:root {
--light-purple: #2b2a33;
--mid-purple: #1c1b22;
--dark-purple: #131218;
--discover: #232229;
--black: #0c0c0d;
--white: #fff;
--text-1: #ebe9fb;
--text-2: #e2e0f3bf;
--text-3: #e2e0f366;
--text-4: #c0becd;
--text-5: #b0afbf;
--text-5-hover: #85849a;
--accent: #9f99d5;
--accent-hover: #8b83d5;
--accent-scroll: #9f99d570;
--accent-highlight: #9f99d563;
--outline-1: #383641;
--outline-2: #9a99a7;
--selection-1: #9f99d55c;
--hover-1: #6d6b7e30;
--hover-2: #3836424a;
--hover-3: #373641;
--hover-4: #b5a4e41a;
--hover-5: #373641d6;
--hover-6: #6d6b7e29;
--overlay-2: #1c1b2296;
--overlay-4: #1c1b22ed;
--overlay-5: #1c1b22e0;
--overlay-7: #1c1b22e3;
--overlay-9: #08080bc4;
--border: #e2e0f330;
--banner: #2b2a3369;
--banner-hover: #dbd7ff1c;
--video-settings: #2b2a33e6;
--visited: #b5b1d9;
--live-badge: #66637abf;
--end-card: #131218de;
--skeleton-1: #78768b61;
--skeleton-2: #494755;
--skeleton-3: #78768b38;
--search-hover: #37364175;
--offline: #2b2a339c;
--trans: #fff0;
--ytcp-text-primary: #ebe9fb !important;
--yt-spec-text-secondary: var(--text-2) !important;
--yt-compact-link-icon-color: #d7d4f1 !important;
--ytcp-icon-inactive : #d7d4f1 !important;
/* --yt-spec-10-percent-layer: #e2e0f330 !important; */
--yt-spec-10-percent-layer: var(--light-purple) !important;
--ytcp-line-divider-solid: #2b2a33 !important;
/* --ytcp-line-divider: #e2e0f330 !important; */
--ytcp-line-divider: #2b2a33 !important;
--ytcp-hover-item: var(--hover-6) !important;
--ytcp-error-red: #9f99d5 !important;
--ytcp-brand-background-solid: #2b2a33 !important;
--ytls-menu-header-background: #2b2a33 !important;
/* --ytcp-general-background-a: #373641 !important; */
--ytcp-general-background-a: #1c1b22 !important;
--ytcp-general-background-b: #2b2a33 !important;
--ytcp-general-background-c: #373641 !important;
--ytcp-selected-item : #373641 !important;
--ytcp-themed-blue: #9f99d5 !important;
--ytcp-themed-red: #9f99d5 !important;
--ytcp-call-to-action: #9f99d5 !important;
--ytcp-text-secondary: #e2e0f3bf !important;
--ytcp-text-disabled: #e0ddf96e !important;
--ytcp-call-to-action-raised-disabled: #1c1b22 !important;
--ytcp-call-to-action-raised-disabled-background: #9f99d566 !important;
--ytcp-call-to-action-raised: #1c1b22 !important;
--ytcp-call-to-action-raised-background: #9f99d5 !important;
--yt-spec-brand-button-background: #9f99d5 !important;
--ytcp-focus: #9f99d5 !important;
--ytcp-badge-blue: #9f99d514 !important;
--ytcp-container-border-color: #e2e0f330 !important;
--ytcp-icon-disabled: var(--light-purple) !important;
--ytcp-menu-background: #2b2a33 !important;
--paper-toast-background-color: #2b2a33 !important;
--ytcp-static-brand-red: #9f99d5;
--ytcp-call-to-action-ripple: #38364b47 !important;
--yt-spec-brand-background-primary: #232229 !important;
--ytcp-container-border: 2px solid var(--light-purple) !important;
--ytcp-container-hovered-border-color: var(--light-purple) !important;
--ytcp-analytics-overview: #ff17a8 !important;
scrollbar-color: #8d8da3 #2b2a33 !important;
scrollbar-width: thin !important;
}
html[dark], [dark] {
--yt-spec-call-to-action: var(--accent);
--yt-spec-call-to-action-inverse: var(--accent);
--yt-spec-text-primary-inverse: var(--dark-purple);
--yt-spec-brand-background-solid: #26252d;
--yt-spec-menu-background: #26252d; }
html {
--yt-spec-black-pure-alpha-80: #1c1b2296;
--yt-spec-white-1: var(--text-1);
--yt-spec-white-2: var(--text-1);
--yt-spec-white-3: var(--text-1);
--yt-spec-white-4: var(--text-1);
--ytcp-static-overlay-text-primary: var(--text-1)!important;
--ytcp-static-overlay-text-secondary: rgba(255, 255, 255, 0.7);
--ytcp-static-overlay-text-disabled: rgba(255, 255, 255, 0.3);
--yt-spec-black-1: #282828;
--yt-spec-black-2: var(--discover);
--yt-spec-black-3: var(--mid-purple);
--yt-spec-black-4: var(--mid-purple);
--yt-spec-black-pure: var(--dark-purple);
--yt-spec-grey-1: var(--text-2);
--yt-spec-grey-2: var(--text-2);
--yt-spec-grey-3: var(--text-2);
--yt-spec-grey-4: var(--text-2);
--yt-spec-grey-5: var(--text-2);
--ytcp-static-overlay-tooltip-background: var(--discover) !important;
--ytcp-call-to-action-secondary-ripple: rgba(255, 255, 255, 0.2);
--ytcp-call-to-action-raised-ripple: rgba(0, 0, 0, 0.2);
--ytcp-call-to-action-focused-background: #a895ff12 !important;
--ytcp-call-to-action-secondary-focused-background: rgba(255, 255, 255, 0.2);
--ytcp-call-to-action-raised-focused-background: rgba(0, 0, 0, 0.2);
--ytcp-static-background-inverse: var(--discover);
--ytcp-themed-green: #7af3a7 !important; }
::selection {
color: #fff;
background: #8781c4 !important; }
* {
scrollbar-color: #8d8da3 #2b2a33 !important;
scrollbar-width: thin !important; }
yt-icon.ytd-toggle-theme-compact-link-renderer {
--yt-spec-icon-inactive: #d7d4f1 !important; }
ytcp-icon-button {
--color-regular: #d7d4f1 !important;
--color-focus: #bcb9d9 !important;
--color-disabled: #d7d4f17a !important; }
#outer.ytcp-form-input-container {
border: 1px solid #e2e0f330 !important; }
.text-input.ytcp-chip-bar {
caret-color: var(--ytcp-themed-blue); }
#dot { display: block !important; }
yta-pulsating-dot.yta-latest-activity-card {
--dot-color: #9f99d5 !important; }
.line-series.style-scope.yta-line-chart-base {
stroke: #9f99d5 !important; }
p {
color: #e2e0f3bf; }
.menu-icon.ytcp-text-menu { display: none !important; }
[test-id="channel-dashboard-creator-insider-card"] { display: none !important; }
.preview.ytcp-profile-image-upload, .preview.ytcp-banner-upload, #watermark-preview-container.style-scope.ytcp-video-watermark-upload{
border-radius: 8px; }
/* IIIIIIIIII General Pages Bg IIIIIIIIII */
/*
ytcp-video-details-section, ytcp-sticky-header, #main.ytcp-entity-page {
background: var(--mid-purple); }
.header.ytcp-content-section, ytcp-filter-bar, .floating-column.ytcp-table-header, ytcp-table-header, #row-container.ytcp-video-row, #row-container.ytcp-video-row .floating-column.ytcp-video-row, #footer-container.ytcp-video-section-content, #header.ytcp-activity-section, #footer-container.ytcp-post-section-content, #sticky-header.ytgn-channel-translations-section, #footer-container.ytgn-channel-translations-list, .tabs.ytcr-management-section, ytmonet-overview, ytcp-promo-page, #right-side-bar.yta-screen, #main-container.ytcp-entity-page #main.ytcp-entity-page[studio-theme="DASHBOARD"], ytmus-library-table {
background: var(--mid-purple); }
#tab-content-container.yta-screen, #row-container.ytgn-video-row, #row-container.ytgn-video-row .floating-column.ytgn-video-row, ytmus-library-row {
background: var(--mid-purple); }
*/
#outer.ytcp-form-input-container {
border: 2px solid var(--light-purple) !important; }
#container.ytcp-video-metadata-visibility, #restrictions.ytcp-video-metadata-restrictions {
border: 2px solid var(--light-purple) !important; }
#dialog.ytcp-dialog {
box-shadow: var(--light-purple) 0px 0px 0px 2px, var(--ytcp-dialog-box-shadow,0 24px 38px 3px rgba(0,0,0,0.14),0 9px 46px 8px rgba(0,0,0,0.12),0 11px 15px -7px rgba(0,0,0,0.4)); }
ytd-active-account-header-renderer, #sections.ytd-multi-page-menu-renderer > .ytd-multi-page-menu-renderer:not(:last-child), ytd-simple-menu-header-renderer, #container.ytd-google-account-header-renderer, #row-container.ytmus-library-row, .footer.ytmus-library-table {
border-bottom: 2px solid var(--light-purple); }
/*
#sections.ytd-multi-page-menu-renderer > .ytd-multi-page-menu-renderer:nth-child(2) ytd-compact-link-renderer:last-child {
margin-top: 4px; }
*/
#header-container.ytls-core-app {
box-shadow: 0 0px 0px 1px var(--black); }
nav#left-nav.ytls-navigation {
border-right: 1px solid var(--black); }
.schedule-button-container.ytls-broadcast-list-content {
border-bottom: 1px solid var(--black); }
/*
ytcp-primary-action-bar, ytcp-table-header, #row-container.ytcp-video-row, #footer-container.ytcp-video-section-content, .chips-container.ytcp-comments-section, #row-container.ytgn-video-row, .tabs.ytcr-management-section {
border-bottom: 2px solid var(--ytcp-line-divider); }
*/
ytcp-filter-bar {
border-bottom: 1px solid var(--ytcp-line-divider); }
/* Header */
header.ytcp-header {
color: var(--text-1);
padding: 8px 24px 8px 16px; }
ytcp-header {
box-shadow: 0px 1px 0px 0px var(--black); }
ytcp-home-button {
padding-top: 10px; }
img.ytcp-home-button {
filter: hue-rotate(252deg) contrast(0.5) brightness(1.75);
/* filter: hue-rotate(251deg) brightness(3.8); */
height: 20px; }
#help-icon { display: none; }
#create-icon.ytcp-header {
-...