PitchBlack - Apple Music Edition
by sprince0031
Imported from https://raw.githubusercontent.com/uso-archive/data/flomaster/data/usercss/261641.user.css
Mirrored from https://github.com/sprince0031/PitchBlack-UserStyle-themes/raw/master/Apple/AppleMusic.user.css
Details
Author sprince0031
License NO-REDISTRIBUTION
Created 2 months, 1 week ago
Updated 1 month, 3 weeks ago
Category apple
Statistics
Learn how we calculate statistics in the FAQ .
Total views
Total installs
Weekly installs
Weekly updates
Description
Inspired by the legendary PitchBlack Substratum theme for Android, this is a PitchBlack theme for Apple Music. In true PitchBlack fashion, you get to pick the accent color of your choice! A list of all PitchBlack accents and background variants is available below along with their hexcodes. Do note that you can pick any color you want from the color picker but these are the official colors. Enjoy!
BONUS: Apple TV+ has been themed in the latest update! (v0.6)
Checkout my original PitchBlack theme for YouTube here:
https://userstyles.world/style/9076/youtube-pitchblack-darkblack-theme
Notes
Accent colors: | Background colors:
---------------------------------------------------------+--------------------------------------------------------------------------------------
DarkRed - #D3002A | PitchBlack - #000000
NetflixRed - #DE1400 | DarkGrey - #151515
CandyRed - #FF1744 | MatteBlack - #131318
PaleRed - #BA2A3D | Andromeda - #18191C
Ocean - #38AEED | MaterialDark - #29262B
PixelBlue - #5E97F6 | Neptune - #181F3D
DarkGrey - #878787 | Neptune-Dark - #0C071D
Lime - #B2CC22 | Neptune-Purple - #28243A
Spotify - #23CF5F | Hybrid - #424242
Yellow - #EF9F00 | Night - #20212A
Fuchsia - #C2184F |
Sky - #22B2CC | Special Chocolate Theme:
Aurora - #9A478D |
PaleBlue - #A1B6ED | DarkChocolate (accent color) - # 6D4C41,
Emerald - #009688 | BitterSweet (background color) - #110B09
Indigo - #3F51B5 |
Orange - #EF6C00 |
Watermelon - #F05361 |
LightGreen - #A0D600 |
Mint - #36E2B2 | NOTE:
Green - #8BC34A | Choose one accent color from
DarkOrange - #FF3A25 | the left and one background
GlueBlue - #31E8F8 | color from the right to get a theme.
DreamPink - #ED9EC4 |
UltraViolet - #7960B2 |
Cyan - #0097A7 |
DarkBlue - #008DF5 |
Purple - #6A4DFF |
Gold - #DAA520 |
Amber - #FF8F00 |
NeonPink - #E20074 |
Sunrise - #AD2C3D |
NightBlue - #48659B |
---------------------------------------------------------+--------------------------------------------------------------------------------------
Changelog:
You can find the changelogs for this theme here
Issues:
For issues in the theme, kindly let me know by creating a new issue in GitHub or email me at siddharthprince31@gmail.com . I'll do my best to fix them as soon as I can.
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name PitchBlack - Apple Music Edition
@namespace USO Archive
@author sprince0031
@description `Inspired by the legendary PitchBlack Substratum theme for Android, this is a PitchBlack theme for Apple Music. In true PitchBlack fashion, you get to pick the accent color of your choice! A list of all PitchBlack accents and background variants are available below along with their hexcodes. Do note that you can pick any color you want from the color picker but these are the official colors. Enjoy!If you liked this theme, checkout my PitchBlack theme for YouTube here:https://userstyles.org/styles/165645/youtube-pitchblack-dark-black-theme`
@version 20230410.0.6
@license NO-REDISTRIBUTION
@preprocessor uso
@advanced color accent "Accent" #23cf5f
@advanced color bg "Background" #000000
@advanced color tpac "Transparency Effects (Accent)" #23cf5f66
@advanced color tpbg "Transparency Effects (Background)" #00000099
==/UserStyle== */
@-moz-document regexp("https?://(music|tv).apple.com.*") {
:root {
--pageBG: /*[[bg]]*/;
--keyColor: /*[[accent]]*/;
--tpBG: /*[[tpbg]]*/;
--tpAC: /*[[tpac]]*/;
--keyColor-pressed: var(--tpAC);
--bannerDarkGray: #121212;
--keyColorBG: var(--keyColor);
--navSidebarSelectedState: var(--keyColor);
--playerPlatterButtonBGFill: var(--keyColor);
--playerPlatterButtonIconFill: var(--pageBG);
--chromeVolumeElapsed: var(--keyColor) !important;
/*
--playerScrubberTrack: rgba(55,55,55,0.95) !important;
--playerScrubberFill: var(--keyColor) !important;
--playerLCDBGFill: rgba(45,45,45,0.95) !important;
*/
--iconFillArrow: var(--pageBG) !important;
--selectionColor: var(--keyColor) !important;
--mobileNavigationBG: var(--pageBG);
--dropdownBackground: var(--pageBG);
--dropdownLightGray: var(--keyColor);
--dropdownLightGrayIcon: var(--keyColor);
--opaqueShelfBG: var(--pageBG);
--footerBg: var(--pageBG);
/* Apple TV settings */
--appPrimaryBackgroundColor: /*[[bg]]*/;
--appModalBackgroundColor: var(--tpBG);
--modalContentOverlayColorEnd: var(--tpAC);
--systemStandardThickMaterialSover: var(--tpBG);
}
.wrapper amp-chrome-player:before {
background-color: var(--tpBG) !important;
}
.banner-container {
border-top: solid 1px var(--keyColor);
}
.select-button,
button.click-action {
color: var(--pageBG) !important;
}
/* Search bar*/
.search-input__text-field {
caret-color: var(--keyColor);
}
input.search-input__text-field:focus {
box-shadow: 0 0 0 4px var(--tpAC) !important;
}
/* Search Scope Bar */
.search-scope-bar {
backdrop-filter: saturate(50%) blur(20px) !important;
background-color: var(--tpBG);
}
.app-container.is-not-focused .search-scope-bar {
background-color: var(--pageBG) !important;
}
/* Player UI */
amp-lcd.lcd.lcd__music.lcd__initial,
amp-lcd.lcd.lcd__music,
amp-lcd.lcd.lcd__music__buffering {
background: none !important;
}
.lcd__track-info-empty {
color: var(--keyColor) !important;
}
:host(.lcd-progress) {
--progress-thumb-color: var(--tpBG) !important;
--progress-thumb-color-outline: var(--pageBG) !important;
--progress-thumb-color-active: var(--pageBG) !important;
--progress-track-color: var(--tpBG) !important;
--progress-track-color-elapsed: var(--tpAC) !important;
--progress-track-color-elapsed-active: var(--keyColor) !important;
}
.lcd__badge-platter.lcd__badge-platter--preview {
color: var(--pageBG) !important;
}
.navigation-item[aria-selected=true] a svg {
fill: var(--pageBG) !important;
}
.navigation-item[aria-selected=true] a span {
color: var(--pageBG) !important;
}
.signin svg path {
fill: var(--pageBG) !important;
}
.signin span.button-text {
color: var(--pageBG) !important;
}
/* Side panel */
.side-panel {
background-color: var(--tpBG) !important;
backdrop-filter: blur(50px) saturate(100%) !important;
}
/* Up next pane */
.up-next-item-remove {
background-image: none ;
/* Need to find a way to replace the image with a css icon.
background-color: var(--keyColor); */
}
.up-next-item:focus {
--selectedTextColor: var(--pageBG) !important;
--contextMenuEllipsisFillOverride: var(--pageBG) !important;
}
/* Context Menus */
.contextual-menu__items::before {
background-color: var(--tpBG) !important;
}
/* Playlist Thumbnails */
.powerswoosh--radioStation .powerswoosh__play-button-wrapper:focus .play-button.is-large,
.powerswoosh--radioStation .powerswoosh__play-button-wrapper:focus-within .play-button.is-large,
.powerswoosh--radioStation .powerswoosh__play-button-wrapper:hover .play-button.is-large {
--iconCircleFillBGOverride: #28282850 !important;
backdrop-filter: blur(5px) saturate(80%) !important;
}
.play-button--platter.is-hovered,
.play-button--platter:hover,
.play-button--platter:focus {
--iconFillArrow: var(--pageBG) !important;
}
amp-contextual-menu-button:focus-within .more-button--material,
amp-contextual-menu-button:hover .more-button--material {
--iconEllipsisFill: var(--pageBG) !important;
}
/* Artist profile page */
.artist-header__name-container .play-button--platter {
--iconFillArrow: var(--pageBG) !important;
}
.artist-header__name-container .play-button--platter.is-hovered,
.artist-header__name-container .play-button--platter:focus,
.artist-header__name-container .play-button--platter:hover {
--iconFillArrow: var(--keyColor) !important;
--iconCircleFillBG: var(--pageBG) !important;
border: solid 1px var(--keyColor);
}
.artist-header__favorite-button {
--favoriteButtonStarColorOverride: var(--keyColor) !important;
--favoriteButtonFavoritedBGColorOverride: var(--keyColor) !important;
--favoriteButtonFavoritedHoverBGColorOverride: var(--keyColor) !important;
--favoriteButtonFavoritedHoverStarColorOverride: var(--pageBG) !important;
--favoriteButtonHoverStarColorOverride: var(--pageBG) !important;
}
.artist-header__name-container amp-contextual-menu-button:focus-within .more-button--material,
.artist-header__name-container amp-contextual-menu-button:hover .more-button--material {
--iconEllipsisFill: var(--keyColor) !important;
}
/* Modal elements */
.content-modal-container {
background-color: var(--tpBG) !important;
backdrop-filter: blur(20px) saturate(100%);
}
.close-button:hover {
fill: var(--keyColor);
}
.subtitle {
color: var(--keyColor);
}
/* Explicit badge*/
.explicit {
fill: var(--explicitFillOverride,var(--keyColor)) !important;
}
/* playlist/album page */
.songs-list-row--selected:not(.songs-list-row--disabled) {
--linkColor: var(--pageBG) !important;
--explicitFillOverride: var(--pageBG) !important;
--contextMenuEllipsisFillOverride: var(--pageBG) !important;
--addToLibraryFillOverride: var(--pageBG) !important;
--rowBackgroundColor: var(--selectionColor) !important;
}
.songs-list__col .songs-list-row__controls .songs-list-row__preview-button button.click-action {
color: var(--keyColor) !important;
}
.songs-list-row--selected:not(.songs-list-row--disabled) .songs-list__col .songs-list-row__controls .songs-list-row__preview-button button.click-action {
color: var(--pageBG) !important;
}
.songs-list-row--selected:not(.songs-list-row--disabled) {
color: var(--pageBG) !important;
}
.songs-list-row--selected:not(.songs-list-row--disabled).songs-list-row--no-artwork .songs-list-row__play-button-wrapper {
--playButtonIconHoverColor: var(--pageBG) !important;
--playButtonIconColor: var(--pageBG) !important;
}
.songs-list-row--selected:not(.songs-list-row--disabled) .songs-list__col {
color: var(--pageBG) !important;
}
.songs-list-row--selected:not(.songs-list-row--disabled) .songs-list__col .songs-list__song-link-wrapper a,
.songs-list-row--selected .songs-list__col .songs-list__song-link-wrapper a:hover {
color: var(--pageBG) !important;
}
.songs-list-row--selected:not(.songs-list-row--disabled) .songs-list__col .songs-list-row__song-wrapper {
color: var(--pageBG) !important;
}
.songs-list-row--selected:not(.songs-list-row--disabled) .songs-list-row__video-glyph {
fill: var(--pageBG) !important;
}
.songs-list-row--selected:not(.songs-list-row--disabled) .songs-list-row__column-data {
color: var(--pageBG) !important;
}
.songs-list-row--selected:not(.songs-list-row--disabled) .songs-list-row__by-line {
color: var(--pageBG) !important;
}
/* Artists library page */
.virtual-row .is-selected {
color: var(--pageBG) !important;
}
/* Songs library page */
.library-track.selected {
color: var(--pageBG) !important;
}
.library-track.selected .action-menu .more-button--non-platter {
--iconEllipsisFill: var(--pageBG) !important;
}
/* Common library page rules*/
.virtual-row {
border-radius: 10px;
}
/* Profile Page */
.button.socialProfileButton button {
color: var(--pageBG);
}
.button.so...