Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Purple and Black (Purple Vortex) #5

Open
NightmareZer017 opened this issue Jun 21, 2023 · 1 comment
Open

Purple and Black (Purple Vortex) #5

NightmareZer017 opened this issue Jun 21, 2023 · 1 comment

Comments

@NightmareZer017
Copy link

To be honest I do not use Github that often so I have no idea how to even leave a comment.

I edited the black and blue theme to make the blue a bright purple. It is a lazy edit I do not know how to write CSS code (I understand parts but can not write my own). All I really did was post the hex code for purple but it might save someone the time.

/* >>>>READ ME<<<<

    I hope you enjoy!

                        >>>>READ ME<<<<  

*/

html:not(.style-scope)
{

/===================Start of custom variables==============================/

  --cust-ytmusic-play-nav-color: #000;
  --cust-ytmusic-dark-background: #000;
  --cust-ytmusic-dark-foreground: #000;
  
  --cust-ytmusic-light-text-1: #9932CC;
  --cust-ytmusic-light-2: #9932CC; 
  --cust-ytmusic-light-3: #9932CC;
  --cust-ytmusic-light-4: #9932CC;
  --cust-ytmusic-light-5: #9932CC;
  
  --cust-ytmusic-medium-1: #9932CC;
  --cust-ytmusic-medium-2: #9932CC;
  --cust-ytmusic-medium-3: #9932CC;    
  --cust-ytmusic-medium-4: #9932CC;
  --cust-ytmusic-medium-5: #9932CC;
  
  --cust-ytmusic-subscribe-color: #9932CC;
  --cust-ytmusic-nowplaying-color: #9932CC;
  --cust-ytmusic-playbutton-color:#9932CC; 
  --cust-ytmusic-tertiary-nav-button-color: #9932CC;
    
  --cust-ytmusic-main-text-1: #9932CC;
  --cust-ytmusic-header-text-1: #9932CC;
  --cust-ytmusic-header-text-2: #9932CC;
  
  
  
   --cust-ytmusic-scroll-width: 0px;

/===================end of custom variables==============================/

/*AGGRESSIVE AND INSENSITIVE USE OF !IMPORTANT so it works in the desktop app.
some commenting was attempted as I went. */

  --idk-yet: inherit !important;
  
  --ytmusic-color-black1: var(--cust-ytmusic-dark-foreground) !important;
  --ytmusic-color-black4: var(--cust-ytmusic-dark-background) !important;
  
  --ytmusic-color-blackpure: var(--idk-yet) !important;
  --ytmusic-color-blackpure-alpha0: var(--idk-yet) !important;
  --ytmusic-color-blackpure-alpha10: var(--idk-yet) !important;
  --ytmusic-color-blackpure-alpha60: var(--idk-yet) !important;
  
  --ytmusic-color-grey1: var(--cust-ytmusic-light-3) !important;
  --ytmusic-color-grey2: var(--cust-ytmusic-light-2) !important;
  --ytmusic-color-grey3: var(--cust-ytmusic-medium-4) !important;
  --ytmusic-color-grey4: var(--cust-ytmusic-light-4) !important;
  --ytmusic-color-grey5: var(--cust-ytmusic-medium-2) !important;
  
  --ytmusic-color-white1: var(--cust-ytmusic-light-text-1) !important;
  --ytmusic-color-white1-alpha10: var(--cust-ytmusic-light-4) !important;
  --ytmusic-color-white1-alpha15: var(--cust-ytmusic-light-4) !important;
  --ytmusic-color-white1-alpha20: var(--cust-ytmusic-light-4) !important;
  --ytmusic-color-white1-alpha30: var(--cust-ytmusic-light-4) !important;
  --ytmusic-color-white1-alpha50: var(--cust-ytmusic-light-4) !important;
  --ytmusic-color-white1-alpha70: var(--cust-ytmusic-medium-1) !important;
  
  --ytmusic-static-brand-red: var(--cust-ytmusic-light-text-1) !important;/*loadingbar*/
  
  --yt-spec-themed-blue: var(--cust-ytmusic-light-5) !important;
  --yt-spec-dark-blue: var(--cust-ytmusic-medium-5) !important;
  --yt-spec-text-secondary: var(--cust-ytmusic-medium-5) !important;
  --ytmusic-setting-item-toggle-active: var(--cust-ytmusic-light-2) !important;
  
  --ytmusic-brand-link-text: var(--idk-yet) !important;
  --ytmusic-overlay-background-brand: var(--idk-yet) !important;
  --ytmusic-focus-active: var(--idk-yet) !important;
  
  --ytmusic-detail-header: var(--idk-yet) !important;
  --ytmusic-dialog-background-color: var(--cust-ytmusic-dark-background) !important;
  --yt-spec-brand-link-text: var(--cust-ytmusic-medium-5) !important;
  
  --ytmusic-caption-1_-_color: var(--cust-ytmusic-medium-3) !important;
  
  --ytmusic-scrollbar-width: var(--cust-ytmusic-scroll-width)!important;
  --ytd-scrollbar-width: var(--cust-ytmusic-scroll-width)!important;
  --ytd-scrollbar-scrubber_-_background: var(--cust-ytmusic-dark-background);

}

    /*Unique to the desktop ytmdesktop app*/    

i.material-icons /The icons they added; not present on the web version/
{
color: var(--cust-ytmusic-tertiary-nav-button-color) !important;
}
i.material-icons:hover
{
color: var(--cust-ytmusic-tertiary-nav-button-color) !important;
}
/Unique to the desktop ytmdesktop app/

body
{
background: var(--cust-ytmusic-dark-background) !important
}

    ytmusic-nav-bar 
    { 
        background: var(--cust-ytmusic-play-nav-color) !important 
    }

/hide the youtube logo at the top left/
.yt-simple-endpoint[aria-label="Home"]
{
visibility:hidden !important
}

/Home, Explore, Library colors/

    ytmusic-pivot-bar-item-renderer:hover, ytmusic-pivot-bar-item-renderer.iron-selected  /*highlighted word*/
{
    color: var(--cust-ytmusic-light-5) !important
}
    ytmusic-pivot-bar-item-renderer /*non-selected item*/
{
    color: var(--cust-ytmusic-light-4) !important
}
    ytmusic-search-box  /*search button colors*/
{
    color: var(--cust-ytmusic-light-4) !important
}

/color 'new recommendations' pop-up/
a.ytmusic-content-update-chip
{
color: var(--ytmusic-color-black4) !important;
background-color: var(--ytmusic-color-grey2) !important
}

ytmusic-detail-header-renderer
{
background-color: var(--ytmusic-color-black4) !important
}

.title.ytmusic-detail-header-renderer
{
    color: var(--cust-ytmusic-light-text-1) !important
}

ytmusic-player-page
{
background-color: var(--ytmusic-color-black4) !important
}
ytmusic-data-bound-header-renderer
{
background-color: var(--cust-ytmusic-play-nav-color) !important
}
ytmusic-list-item-renderer
{
background-color: var(--ytmusic-color-black1) !important
}
ytmusic-responsive-list-item-renderer
{
background-color: var(--ytmusic-color-black1) !important
}
ytmusic-player-queue-item
{
background-color: var(--ytmusic-color-black1) !important
}
paper-tab.iron-selected.ytmusic-player-page /Up Next color/
{ /depriciated/
color: var(--cust-ytmusic-medium-3) !important
}
tp-yt-paper-tab.iron-selected.ytmusic-player-page /ammended up next color Update/
{
color: var(--cust-ytmusic-medium-3) !important
}
tp-yt-paper-tab.ytmusic-player-page
{
color: var(--cust-ytmusic-medium-3) !important
}

paper-tabs.ytmusic-player-page  /*up next line color*/
{
    --paper-tabs-selection-bar-color: var(--cust-ytmusic-medium-3) !important
}
                    #selectionBar.tp-yt-paper-tabs   /*ammended up next line color Update*/
                     {
                         border-bottom: 2px solid var(--cust-ytmusic-medium-3) !important;
                     }
    
yt-formatted-string.byline.style-scope.ytmusic-player-queue-item  /*artist part in queue*/
{
    color: var(--cust-ytmusic-medium-1) !important
}
yt-formatted-string.duration.style-scope.ytmusic-player-queue-item /*length of songs in queue*/
{
    color: var(--cust-ytmusic-light-4) !important
}

/color of the play bar background/
ytmusic-player-bar
{
background: var(--cust-ytmusic-play-nav-color) !important
}

/color of the progressbar slider/
#progress-bar.ytmusic-player-bar
{
--paper-slider-active-color: var(--ytmusic-color-white1) !important
}
#progress-bar.ytmusic-player-bar[focused], ytmusic-player-bar:hover #progress-bar.ytmusic-player-bar
{
--paper-slider-knob-color: var(--ytmusic-color-white1) !important;
--paper-slider-knob-start-color: var(--ytmusic-color-white1) !important;
--paper-slider-knob-start-border-color: var(--ytmusic-color-white1) !important
}
/volume slider/
paper-slider#volume-slider
{
--paper-slider-container-color: var(--cust-ytmusic-light-4) !important;
--paper-slider-active-color: var(--cust-ytmusic-tertiary-nav-button-color) !important;
--paper-slider-knob-color: var(--cust-ytmusic-tertiary-nav-button-color) !important
}
.volume-slider.ytmusic-player-bar, .expand-volume-slider.ytmusic-player-bar /ammended volume slider color for Update/
{
--paper-slider-container-color: var(--cust-ytmusic-light-4) !important;
--paper-slider-active-color: var(--cust-ytmusic-tertiary-nav-button-color) !important;
--paper-slider-knob-color: var(--cust-ytmusic-tertiary-nav-button-color) !important
}

/play/pause/skip/
paper-icon-button#play-pause-button
{
--iron-icon-fill-color:var(--cust-ytmusic-playbutton-color) !important
}
tp-yt-iron-icon#icon /ammended play-pause button colors for Update/
{
--iron-icon-fill-color:var(--cust-ytmusic-playbutton-color) !important
}

.left-controls.ytmusic-player-bar paper-icon-button.ytmusic-player-bar, .left-controls.ytmusic-player-bar .spinner-container.ytmusic-player-bar, .toggle-player-page-button.ytmusic-player-bar
{ 
    --iron-icon-fill-color: var(--cust-ytmusic-tertiary-nav-button-color) !important
}

/nav bar menu icon/
.menu.ytmusic-player-bar
{
--iron-icon-fill-color: var(--cust-ytmusic-tertiary-nav-button-color) !important
}

/nav bar right button icon colors/
.right-controls-buttons.ytmusic-player-bar paper-icon-button.ytmusic-player-bar, ytmusic-player-expanding-menu.ytmusic-player-bar paper-icon-button.ytmusic-player-bar
{
--paper-icon-button_-_color: var(--cust-ytmusic-tertiary-nav-button-color) !important
}

 .style-scope.yt-icon-button[aria-label="Add to playlist"]  /*add to playlist button Update*/
        {
            color: var(--cust-ytmusic-tertiary-nav-button-color)
        }

/color of titles/
.title.ytmusic-carousel-shelf-basic-header-renderer, .title.ytmusic-immersive-header-renderer, .description.ytmusic-immersive-header-renderer
{
color: var(--ytmusic-color-white1) !important
}

/*Now playing circle*/

div.content-wrapper.style-scope.ytmusic-play-button-renderer
{
background: var(--cust-ytmusic-nowplaying-color) !important
}

/subscribe button/
ytmusic-subscribe-button-renderer
{
--ytmusic-subscribe-button-color: var(--cust-ytmusic-subscribe-color) !important
}

yt-button-renderer[is-paper-button]
{
    background-color: var(--ytmusic-color-white1-alpha70) !important
}

paper-icon-button
{
    --paper-icon-button_-_color: var(--ytmusic-color-white1) !important
}

/add to library button/
ytmusic-data-bound-top-level-menu-item.ytmusic-data-bound-menu-renderer:not(:first-child)
{
--yt-button-color: var(--ytmusic-color-white1) !important;
border: 1px solid var(--ytmusic-color-white1) !important;
border-radius: 5px !important
}
/shuffle playlist button/
yt-button-renderer.watch-button.ytmusic-menu-renderer
{
color: var(--ytmusic-color-white1) !important;
background-color: var(--ytmusic-color-white1-alpha70) !important
}
/edit playlist button/
#top-level-buttons.ytmusic-menu-renderer > .outline-button.ytmusic-menu-renderer, .edit-playlist-button.ytmusic-menu-renderer, ytmusic-toggle-button-renderer.ytmusic-menu-renderer
{
--yt-button-color: var(--ytmusic-color-white1) !important
}
/explicit badge/
yt-icon.ytmusic-inline-badge-renderer
{
color: var(--cust-ytmusic-tertiary-nav-button-color);
}

/headers that aren't links/
.title.ytmusic-carousel-shelf-basic-header-renderer, .title.ytmusic-immersive-header-renderer, .description.ytmusic-immersive-header-renderer
{
color: var(--cust-ytmusic-header-text-1) !important
}
/Songs header/
.title.ytmusic-header-renderer
{
color: var(--cust-ytmusic-header-text-2) !important
}
yt-formatted-string.strapline.text.style-scope.ytmusic-carousel-shelf-basic-header-renderer
{
color: var(--cust-ytmusic-light-4) !important
}

/Links/
yt-formatted-string[has-link-only_]:not([force-default-style]) a.yt-simple-endpoint.yt-formatted-string
{
color: var(--cust-ytmusic-main-text-1) !important
}
yt-formatted-string[has-link-only_]:not([force-default-style]) a.yt-simple-endpoint.yt-formatted-string:hover
{
color: var(--cust-ytmusic-light-2) !important
}

/* scroll left and right carousel buttons */
.previous-items-button.ytmusic-carousel, .next-items-button.ytmusic-carousel
{
background-color: var(--ytmusic-color-white1-alpha70) !important;
color: var(--ytmusic-color-black1) !important
}

/* play button that pops up over album art to play immediately */
.content-wrapper.ytmusic-play-button-renderer, ytmusic-play-button-renderer:hover .content-wrapper.ytmusic-play-button-renderer, ytmusic-play-button-renderer:focus .content-wrapper.ytmusic-play-button-renderer
{
background: var(--ytmusic-color-white1-alpha70) !important;
--ytmusic-play-button-icon-color: var(--ytmusic-color-black1) !important;
--paper-spinner-color: var(--yt-spec-themed-blue) !important
}

/* like button color */
paper-icon-button.ytmusic-like-button-renderer
{
color: var(--cust-ytmusic-medium-3) !important
}

/settings highlighted/
.category-menu-item.iron-selected.ytmusic-settings-page
{
background-color: var(--cust-ytmusic-medium-1) !important
}
/* some dropdown menus*/
.dropdown-content
{
background-color: var(--cust-ytmusic-dark-foreground) !important
}

}

@NightmareZer017 NightmareZer017 changed the title Purple and Black Purple and Black (Purple Vortex) Jun 21, 2023
@Shadowphoenix
Copy link

i think the only actively worked on fork is actually this one here - its also the one mentioned by the devs of the youtube-music-binary: https://github.com/kerichdev/themes-for-ytmdesktop-player
so you should think about posting it there. then again they changed a lot of the looks in the last few versions so i doubt this theme would still work as is.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants